Hi Viken..
yes of course you are
correct ! Simply forgot the url.
To my surprise, when I took Stevvis page into an editor with "strict" settings, the 2 px difference still was there !! A good oportunity to trace some more syntax errors using the "strict" setting.
But what to do with the 2 px. Any idea ? And in FF it seems that the body margin setting is not ok !!
Michael
Cross browser menu width problem
Migru,
We seem to be heading towards the esoteric. I am quite prepared to adhere to the "strict" code if need be, but that does seem to be a little extreme for what I am asking for. I really, really, don't need or want you to do anything else other than find a way to make the menu width property work cross browser. Everything else is negligable as i will sort that out whne i finally build the site.
Now, from what I gather, you're saying that the menuwidth setting does not work cross browser and you don't know of a solution to this problem? If so, please just say so and I'll live with it. If you do have a solution then please, please let me know.
I really don't mean to sound harsh or cruel but going off on tangents seems to be the way of things here. Please, I am a very professional web site designer of over 14 years experience, I don't need or want comments on anything other than how to solve this menuwidth problem.
Again, apologies. I'm sure this has all come out wrong...
We seem to be heading towards the esoteric. I am quite prepared to adhere to the "strict" code if need be, but that does seem to be a little extreme for what I am asking for. I really, really, don't need or want you to do anything else other than find a way to make the menu width property work cross browser. Everything else is negligable as i will sort that out whne i finally build the site.
Now, from what I gather, you're saying that the menuwidth setting does not work cross browser and you don't know of a solution to this problem? If so, please just say so and I'll live with it. If you do have a solution then please, please let me know.
I really don't mean to sound harsh or cruel but going off on tangents seems to be the way of things here. Please, I am a very professional web site designer of over 14 years experience, I don't need or want comments on anything other than how to solve this menuwidth problem.
Again, apologies. I'm sure this has all come out wrong...
Hi Stevvi
my apologies !! I´m sorry, it really "has all come out wrong..." and it was never my intention to do anything else than to try to find a simple solution. It seems there isn´t any. It might be necessary to effect a compromise.
After some testing, my "best solution is" this:
a- using Transitional
b- setting the menu width to 778
c - borderwidth=1; // main menu style
d - fontsize="11px"; // main menu style
e -padding=0;// main menu style
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
followscroll=1;
left=0;
orientation="horizontal";
style=menuStyleMain;
top=74;
menuheight=24;
menuwidth=778;
aI("showmenu=About ARB;text=About ARB;itemwidth=92px;align=center;");
aI("showmenu=Education;text=Education;;itemwidth=92px;align=center;");
aI("showmenu=Registration;text=Registration;;itemwidth=88px;align=center;");
aI("showmenu=Regulation;text=Regulation;;itemwidth=88px;align=center;");
aI("showmenu=News;text=News & Information;;itemwidth=120px;align=center;");
aI("showmenu=Links;text=Links;;itemwidth=88px;align=center;");
aI("text=Registrant Services;;itemwidth=130px;align=center;");
aI("text=Index ;itemwidth=88px;align=center;");
}
This had in both browsers (IE 6.02 and FF 1.5) an identical appearance.
Michael
my apologies !! I´m sorry, it really "has all come out wrong..." and it was never my intention to do anything else than to try to find a simple solution. It seems there isn´t any. It might be necessary to effect a compromise.
After some testing, my "best solution is" this:
a- using Transitional
b- setting the menu width to 778
c - borderwidth=1; // main menu style
d - fontsize="11px"; // main menu style
e -padding=0;// main menu style
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
followscroll=1;
left=0;
orientation="horizontal";
style=menuStyleMain;
top=74;
menuheight=24;
menuwidth=778;
aI("showmenu=About ARB;text=About ARB;itemwidth=92px;align=center;");
aI("showmenu=Education;text=Education;;itemwidth=92px;align=center;");
aI("showmenu=Registration;text=Registration;;itemwidth=88px;align=center;");
aI("showmenu=Regulation;text=Regulation;;itemwidth=88px;align=center;");
aI("showmenu=News;text=News & Information;;itemwidth=120px;align=center;");
aI("showmenu=Links;text=Links;;itemwidth=88px;align=center;");
aI("text=Registrant Services;;itemwidth=130px;align=center;");
aI("text=Index ;itemwidth=88px;align=center;");
}
This had in both browsers (IE 6.02 and FF 1.5) an identical appearance.
Michael
Hi,
One solution is to use css classes for the border in the main menu.
The menu data file styles, main menu and 1st submenu would be:
All submenus would have the last item coded as the last item in this submenu. And note that the main menu has a different class in the 1st and last items.
I tested this is IE5.5, NN7.1, FF1.0.2, Opera 7.54 Opera wants the margin code set in the body tag, leftmargin=0px topmargin=0px. All the others looks the same size.
Maybe someone can test it using more up to date browser versions, also, the doctype I used is the Transitional.
Hope this helps.
Ruth
One solution is to use css classes for the border in the main menu.
Code: Select all
<STYLE type=text/css>BODY {
MARGIN: 0px}
.mainbeg{
border-top:1px dotted #002389;border-right:0px dotted #002389;
border-bottom:1px dotted #002389;border-left:1px dotted #002389;
padding-top:2px;padding-right:4px;padding-bottom:2px;padding-left:0px;}
.mainmid{
border-top:1px dotted #002389;border-right:0px dotted #002389;
border-bottom:1px dotted #002389;border-left:0px dotted #002389;}
.mainend{
border-top:1px dotted #002389;border-right:1px dotted #002389;
border-bottom:1px dotted #002389;border-left:0px dotted #002389;
padding-top:2px;padding-right:0px;padding-bottom:2px;padding-left:4px;}
.subbrd{
border-top:0px dotted #002389;border-right:0px dotted #002389;
border-bottom:1px dotted #002389;border-left:0px dotted #002389;}
.subbrd1{border:0px dotted #002389;}
</STYLE>
Code: Select all
with(menuStyle=new mm_style()){
bordercolor="#002389";
borderstyle="dotted";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="11";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#B0CBF8";
offcolor="#000000";
onbgcolor="#002662";
oncolor="#FFFFFF";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90)";
padding=2;
decoration="none";
offclass="subbrd";
onclass="subbrd";
subimage="arrow.gif";
subimagepadding=2;
image="inv-8.gif";
imagewidth=10;
itemwidth=200;
}
with(menuStyleMain=new mm_style()){
bordercolor="#002389";
borderstyle="dotted";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="11";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#B0CBF8";
offcolor="#000000";
onbgcolor="#002662";
oncolor="#FFFFFF";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90)";
padding=2;
separatorcolor="#002389";
separatorsize=0;
subimage="arrow.gif";
subimagepadding=2;
offclass="mainmid";
onclass="mainmid";
menubgcolor="#ffffff";
}
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
followscroll=1;
left=0;
menualign="center";
orientation="horizontal";
style=menuStyleMain;
top=74;
menuheight=24;
menuwidth=780;
aI("image=inv-8.gif;showmenu=About ARB;text=About ARB;offclass=mainbeg;onclass=mainbeg;");
aI("showmenu=Education;text= Education;");
aI("showmenu=Registration;text= Registration;");
aI("showmenu=Regulation;text= Regulation;");
aI("showmenu=News;text= News & Information;");
aI("showmenu=Links;text= Links;");
aI("text= Registrant Services;");
aI("text= Site Index ;offclass=mainend;onclass=mainend;");
}
with(milonic=new menuname("About ARB")){
style=menuStyle;
aI("text=Introduction;url=/about/index.shtml;");
aI("text=How to find us;url=/about/how-to-find-us.shtml;");
aI("text=The Board;showmenu=The Board;");
aI("text=Board Committees;showmenu=Board Committees;");
aI("text=Architects Act 1997;url=/about/act/arctitects-act-1997.shtml;");
aI("text=The Architects Act 1997: Q&A;url=/about/the-architects-act-1997-qanda.shtml;");
aI("text=Architect's Qualifications (EC) Recogniton Order 2002;url=/about/the-architects-qualifications-ec-recognition-order-2002.shtml;");
aI("text=Freedom of Information Act;showmenu=Freedom;");
aI("text=Who we are;showmenu=Who we are;offclass=subbrd1;onclass=subbrd1;");
}
I tested this is IE5.5, NN7.1, FF1.0.2, Opera 7.54 Opera wants the margin code set in the body tag, leftmargin=0px topmargin=0px. All the others looks the same size.
Maybe someone can test it using more up to date browser versions, also, the doctype I used is the Transitional.
Hope this helps.
Ruth
Hi there again,
testet yours, Ruth,
good job the dotted borders
I´ve put them into a css file, called it "dotted_borders.css"
dotted_borders.css ( contents from Ruth)
The html file I tested is here:
The menu_data.js :
:
:
It is Ruths work, I have just modified
"11px" - because "11" only did not show the correct font size here
and set padding=0; // in main menu style only and removed
//menualign="center"; // I have commented out
placed the
"top.gif" file in an "images" - folder and the JavaScript files in an "js" folder
Ruth wrote
Finally hope, that this helped too.
Special thanks to Ruth, I added a useful css file to my data files !!!
Michael
testet yours, Ruth,
good job the dotted borders
I´ve put them into a css file, called it "dotted_borders.css"
dotted_borders.css ( contents from Ruth)
Code: Select all
BODY {
MARGIN: 0px}
.mainbeg{
border-top:1px dotted #002389;border-right:0px dotted #002389;
border-bottom:1px dotted #002389;border-left:1px dotted #002389;
padding-top:2px;padding-right:4px;padding-bottom:2px;padding-left:0px;
}
.mainmid{
border-top:1px dotted #002389;border-right:0px dotted #002389;
border-bottom:1px dotted #002389;border-left:0px dotted #002389;
}
.mainend{
border-top:1px dotted #002389;border-right:1px dotted #002389;
border-bottom:1px dotted #002389;border-left:0px dotted #002389;
padding-top:2px;padding-right:0px;padding-bottom:2px;padding-left:4px;
}
.subbrd{
border-top:0px dotted #002389;border-right:0px dotted #002389;
border-bottom:1px dotted #002389;border-left:0px dotted #002389;
}
.subbrd1{border:0px dotted #002389;
}Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0019)http://c8.com/site/ -->
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="dotted_borders.css" rel="stylesheet" media="screen">
<meta name="GENERATOR" content="MSHTML 6.00.2800.1458">
</head>
<body>
<script type="text/javascript" src="js/milonic_src.js"></script>
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=js/mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt type=text/javascript src=js/mmenudom.js><\/scr"+"ipt>");
</script>
<script type="text/javascript" src="js/menu_data.js"></script>
<img src="images/top.gif" alt="Header" height="99" width="780">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
The menu_data.js :
:
:
Code: Select all
with(menuStyle=new mm_style()){
bordercolor="#002389";
borderstyle="dotted";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="11px";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#B0CBF8";
offcolor="#000000";
onbgcolor="#002662";
oncolor="#FFFFFF";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90)";
padding=2;
decoration="none";
offclass="subbrd";
onclass="subbrd";
subimage="arrow.gif";
subimagepadding=2;
image="inv-8.gif";
imagewidth=10;
itemwidth=200;
}
with(menuStyleMain=new mm_style()){
bordercolor="#002389";
borderstyle="solid";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="11px";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#B0CBF8";
offcolor="#000000";
onbgcolor="#002662";
oncolor="#FFFFFF";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90)";
padding=0;
separatorcolor="#002389";
separatorsize=0;
subimage="arrow.gif";
subimagepadding=2;
offclass="mainmid";
onclass="mainmid";
menubgcolor="#ffffff";
}
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
followscroll=1;
left=0;
//menualign="center";
orientation="horizontal";
style=menuStyleMain;
top=74;
menuheight=24;
menuwidth=780;
aI("showmenu=About ARB;text=About ARB;itemwidth=92px;align=center;offclass=mainbeg;onclass=mainbeg;");
aI("showmenu=Education;text=Education;;itemwidth=92px;align=center;");
aI("showmenu=Registration;text=Registration;;itemwidth=88px;align=center;");
aI("showmenu=Regulation;text=Regulation;;itemwidth=88px;align=center;");
aI("showmenu=News;text=News & Information;;itemwidth=130px;align=center;");
aI("showmenu=Links;text=Links;;itemwidth=73px;align=center;");
aI("text=Registrant Services;;itemwidth=130px;align=center;");
aI("text=Index;itemwidth=88px;align=center;offclass=mainend;onclass=mainend;");
}
with(milonic=new menuname("About ARB")){
style=menuStyle;
aI("text=Introduction;url=/about/index.shtml;");
aI("text=How to find us;url=/about/how-to-find-us.shtml;");
aI("text=The Board;showmenu=The Board;");
aI("text=Board Committees;showmenu=Board Committees;");
aI("text=Architects Act 1997;url=/about/act/arctitects-act-1997.shtml;");
aI("text=The Architects Act 1997: Q&A;url=/about/the-architects-act-1997-qanda.shtml;");
aI("text=Architect's Qualifications (EC) Recogniton Order 2002;url=/about/the-architects-qualifications-ec-recognition-order-2002.shtml;");
aI("text=Freedom of Information Act;showmenu=Freedom;");
aI("text=Who we are;showmenu=Who we are;offclass=subbrd1;onclass=subbrd1;");
}
:
:
:
:
drawMenus()
"11px" - because "11" only did not show the correct font size here
and set padding=0; // in main menu style only and removed
//menualign="center"; // I have commented out
placed the
"top.gif" file in an "images" - folder and the JavaScript files in an "js" folder
Ruth wrote
I have tested this with FF 1.5 and IE 6.02, both with good success.Maybe someone can test it using more up to date browser versions, also, the doctype I used is the Transitional.
Finally hope, that this helped too.
Special thanks to Ruth, I added a useful css file to my data files !!!
Michael
Hi Stevvi,
I forgot one thing. Sorry. Because you are using a horizontal main menu, the 1st level subs do not offset using the subOffset setting. To prevent what looks like two dotted borders when you mouseover a main menu item, you need to have top="offset=-1"; in the menu settings of those 1st level submenus, e.g.
If you'd like, since I did the whole data file to make sure everything was correct, I can post that and the css for you, save you a bit of coding. Just let me know, I can post it at the support.milonic section.
Ruth
I forgot one thing. Sorry. Because you are using a horizontal main menu, the 1st level subs do not offset using the subOffset setting. To prevent what looks like two dotted borders when you mouseover a main menu item, you need to have top="offset=-1"; in the menu settings of those 1st level submenus, e.g.
Code: Select all
with(milonic=new menuname("About ARB")){
style=menuStyle;
top="offset=-1";Ruth
Once again, many thanx for your help with this.
I have updated the page on http://c8.com/site (this is obviously not the finished item!).
I can sort out the width problem by setting individual itemwidths which will push the righthand border to where it should be.
The main problem I now have is that IE renders the menu at 30px height rather than 24 as it's adding the padding and border to the height. FF does the job perfectly. This is obviously the same problem I had with the width in the first place. Any ideas?
Just to complicate things further, is there a way to have the border as an image as IE renders dotted as dashed at 1px and it looks terrible?
Finally, Migru, apologies for my previous outburst. I put it down to overwork and a glass to much wine!
Code:
fixMozillaZIndex=true; //Fixes Z-Index problem with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;
with(menuStyle=new mm_style()){
bordercolor="#002389";
borderstyle="dotted";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="11px";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#B0CBF8";
offcolor="#000000";
onbgcolor="#002662";
oncolor="#FFFFFF";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2)";
padding=2;
decoration="none";
offclass="subbrd";
onclass="subbrd";
subimage="images/nav/arrow.gif";
subimagepadding=2;
image="inv-8.gif";
imagewidth=10;
itemwidth=200;
}
with(menuStyleMain=new mm_style()){
bordercolor="#002389";
borderstyle="dotted";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="11px";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#B0CBF8";
offcolor="#000000";
onbgcolor="#002662";
oncolor="#FFFFFF";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2)";
padding=2;
separatorcolor="#002389";
separatorsize=1;
subimage="images/nav/arrow.gif";
subimagepadding=2;
offclass="mainmid";
onclass="mainmid";
}
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
followscroll=1;
left=0;
orientation="horizontal";
style=menuStyleMain;
top=74;
menuheight=24;
menuwidth=780;
aI("showmenu=About ARB;text=About ARB;offclass=mainbeg;onclass=mainbeg;");
aI("showmenu=Education;text=Education;");
aI("showmenu=Registration;text=Registration;");
aI("showmenu=Regulation;text=Regulation;");
aI("showmenu=News;text=News & Information;");
aI("showmenu=Links;text=Links;");
aI("text=Registrant Services;");
aI("text=Site Index;offclass=mainend;onclass=mainend;");
}
with(milonic=new menuname("About ARB")){
style=menuStyle;
top="offset=-1";
aI("text=Introduction;url=/about/index.shtml;");
aI("text=How to find us;url=/about/how-to-find-us.shtml;");
aI("text=The Board;showmenu=The Board;");
aI("text=Board Committees;showmenu=Board Committees;");
aI("text=Architects Act 1997;url=/about/act/arctitects-act-1997.shtml;");
aI("text=The Architects Act 1997: Q&A;url=/about/the-architects-act-1997-qanda.shtml;");
aI("text=Architect's Qualifications (EC) Recogniton Order 2002;url=/about/the-architects-qualifications-ec-recognition-order-2002.shtml;");
aI("text=Freedom of Information Act;showmenu=Freedom;");
aI("text=Who we are;showmenu=Who we are;offclass=bordr1;onclass=bordr1;");
}
I have updated the page on http://c8.com/site (this is obviously not the finished item!).
I can sort out the width problem by setting individual itemwidths which will push the righthand border to where it should be.
The main problem I now have is that IE renders the menu at 30px height rather than 24 as it's adding the padding and border to the height. FF does the job perfectly. This is obviously the same problem I had with the width in the first place. Any ideas?
Just to complicate things further, is there a way to have the border as an image as IE renders dotted as dashed at 1px and it looks terrible?
Finally, Migru, apologies for my previous outburst. I put it down to overwork and a glass to much wine!
Code:
fixMozillaZIndex=true; //Fixes Z-Index problem with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;
with(menuStyle=new mm_style()){
bordercolor="#002389";
borderstyle="dotted";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="11px";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#B0CBF8";
offcolor="#000000";
onbgcolor="#002662";
oncolor="#FFFFFF";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2)";
padding=2;
decoration="none";
offclass="subbrd";
onclass="subbrd";
subimage="images/nav/arrow.gif";
subimagepadding=2;
image="inv-8.gif";
imagewidth=10;
itemwidth=200;
}
with(menuStyleMain=new mm_style()){
bordercolor="#002389";
borderstyle="dotted";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="11px";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#B0CBF8";
offcolor="#000000";
onbgcolor="#002662";
oncolor="#FFFFFF";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2)";
padding=2;
separatorcolor="#002389";
separatorsize=1;
subimage="images/nav/arrow.gif";
subimagepadding=2;
offclass="mainmid";
onclass="mainmid";
}
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
followscroll=1;
left=0;
orientation="horizontal";
style=menuStyleMain;
top=74;
menuheight=24;
menuwidth=780;
aI("showmenu=About ARB;text=About ARB;offclass=mainbeg;onclass=mainbeg;");
aI("showmenu=Education;text=Education;");
aI("showmenu=Registration;text=Registration;");
aI("showmenu=Regulation;text=Regulation;");
aI("showmenu=News;text=News & Information;");
aI("showmenu=Links;text=Links;");
aI("text=Registrant Services;");
aI("text=Site Index;offclass=mainend;onclass=mainend;");
}
with(milonic=new menuname("About ARB")){
style=menuStyle;
top="offset=-1";
aI("text=Introduction;url=/about/index.shtml;");
aI("text=How to find us;url=/about/how-to-find-us.shtml;");
aI("text=The Board;showmenu=The Board;");
aI("text=Board Committees;showmenu=Board Committees;");
aI("text=Architects Act 1997;url=/about/act/arctitects-act-1997.shtml;");
aI("text=The Architects Act 1997: Q&A;url=/about/the-architects-act-1997-qanda.shtml;");
aI("text=Architect's Qualifications (EC) Recogniton Order 2002;url=/about/the-architects-qualifications-ec-recognition-order-2002.shtml;");
aI("text=Freedom of Information Act;showmenu=Freedom;");
aI("text=Who we are;showmenu=Who we are;offclass=bordr1;onclass=bordr1;");
}
OK... after a bit more playing around and a lot of going round in circles I have got rid of the menuwidth setting and am forcing the item widths via padding in CSS (see below).
Getting rid of the top and bottom padding in the CSS helps with the height problem although I am still working on it.
I'm also now setting the menu border in menu_data.js
I'm sure there must be a reason why what I've done is wrong so please let me know if it is.
Cheers.
.mainbeg{
padding-right:8px;
padding-left:9px;
}
.mainmid{
padding-right:8px;
padding-left:9px;
}
.mainend{
padding-right:7px;
padding-left:9px;
}
Getting rid of the top and bottom padding in the CSS helps with the height problem although I am still working on it.
I'm also now setting the menu border in menu_data.js
I'm sure there must be a reason why what I've done is wrong so please let me know if it is.
Cheers.
.mainbeg{
padding-right:8px;
padding-left:9px;
}
.mainmid{
padding-right:8px;
padding-left:9px;
}
.mainend{
padding-right:7px;
padding-left:9px;
}