mozilla layout prob with padding

[autopost]

hello,

i use the following code to make up my menu:
css:

ul#submenu {
list-style-type:none;
padding:0;
margin:0;
border:0;
}
ul#submenu a{
display: block;
width: 198px;
margin: 2px;
margin-right: 0;
margin-top: 0;
}
a#sub_titel:link, a#sub_titel:visited {
background-color:#EEEEEE;
color:#2461AA;
line-height:30px;
text-decoration:none;
}
a#sub_titel:hover, a#sub_titel:active {
background-color:#DCE1E8;
color:#2461AA;
}
/*----------*/
a#sub_normaal:link, a#sub_normaal:visited {
background-color: #EEEEEE;
color: #000000;
cursor: default;
line-height: 25px;
padding-left: 10px;
}
a#sub_normaal:hover, a#sub_normaal:active {
background-color:#DCE1E8;
color:#000000;
cursor:default;
}


html:


<ul id="submenu">
<li><a id="sub_titel" href=http://www.webdeveloper.com/forum/archive/index.php/"#">one test test</a></li>
<li><a id="sub_normaal" href>two test test</a></li>
<li><a id="sub_normaal" href=http://www.webdeveloper.com/forum/archive/index.php/"#">one test test</a></li>
</ul>



i want the text of the items that are being marked up by sub_normaal start 10px to the right. this works great in ie and opera, but when i open the site in mozilla the box is 10px longer for the sub_normaal items, cause mozilla adds widths + padding. is there a fix for this?

thanksHi there mikachu,

remove the 10px padding and try it like this...


css
ul#submenu {
list-style-type:none;
padding:0;
margin:0;
border:0;
}
ul#submenu a{
display: block;
width: 198px;
margin: 2px;
margin-right: 0;
margin-top: 0;
}
a#sub_titel:link, a#sub_titel:visited {
background-color:#EEEEEE;
color:#2461AA;
line-height:30px;
text-decoration:none;
}
a#sub_titel:hover, a#sub_titel:active {
background-color:#DCE1E8;
color:#2461AA;
}

a.sub_normaal:link, a.sub_normaal:visited {
background-color: #EEEEEE;
color: #000000;
cursor: default;
line-height: 25px;
}
a.sub_normaal:hover, a.sub_normaal:active {
background-color:#DCE1E8;
color:#000000;
cursor:default;
}

a.sub_normaal span {
margin-left:10px;
}

html
<ul id="submenu">
<li><a id="sub_titel" href=http://www.webdeveloper.com/forum/archive/index.php/"#">one test test</a></li>
<li><a class="sub_normaal" href><span>two test test</span></a></li>
<li><a class="sub_normaal" href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span>one test test</span></a></li>
</ul>
...also note that 'id' has been changed to 'class' in the css and the html

cootheadthank you. works perfectly!