I haven't really had to screw around with IE box model hacks before, but I've got a fairly annoying problem (that could perhaps also be solved with cleaner markup -- ideas?)
The site is and the problem is in the 1 pixel margins between menu options and the solid grey bars. On firefox, they are all 1 pixel, on MSIE the bottom grey bars are 3 pixels off and the top one is 2 pixels off. Not a huge problem, but annoying.
Current coding for a menu section is:
with this long bit of CSS from something i found through a list apart
The site is and the problem is in the 1 pixel margins between menu options and the solid grey bars. On firefox, they are all 1 pixel, on MSIE the bottom grey bars are 3 pixels off and the top one is 2 pixels off. Not a huge problem, but annoying.
Current coding for a menu section is:
Code:
<ul>
<li><span> </span></li>
<li><a href="TARGET">TEXT</a></li>
<li><a href="TARGET">TEXT</a></li>
<li><a href="TARGET">TEXT</a></li>
<li><span> </span></li>
</ul>
with this long bit of CSS from something i found through a list apart
Code:
#navlist span
{
background-color: #808080;
text-align: left;
width: 160px;
display: block;
font-size: 10px;
}
#navlist ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navlist li {
margin: 0 0 1px 0;
}
#navlist a
{
text-align: left;
border-left: 10px solid #808080;
border-right: 10px solid #808080;
padding: 5px 10px;
width: 120px;
display: block;
}
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #002569;
text-decoration: none;
}
#navlist a:hover, #navlist a:active
{
color: #fff;
background-color: #2586d7;
text-decoration: none;
border-top: none;
border-bottom: none;
}
#navlist ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}