I hate Internet Explorer… IE6 and IE7 are both ignored anchor element padding whereas Firefox does exactly as I’d like. Any help is appreciated.
Note: the xHTML is incomplete - I am knocked these out one tab at a time. The CSS may look goofy because I was tossing in a lot of different ideas trying to get IE to comply - things like the positioning of the anchor element (which all lead to no change in the results).
xHTML:
<div id="nav">
<ul>
<li class="menu_home_active"><?= anchor('', '<span>Home</span>'); ?></li>
<li class="menu_services"><?= anchor('services', '<span>Services</span>'); ?></li>
<li><?= anchor('portfolio', '<span>Portfolio</span>'); ?></li>
<li><?= anchor('blog', '<span>Blog</span>'); ?></li>
<li><?= anchor('about', '<span>About</span>'); ?></li>
<li><?= anchor('contact', '<span>Contact</span>'); ?></li>
</ul>
</div>
CSS:
#nav {height:32px;}
#nav ul, #nav li {list-style:none;padding:0;margin:0;}
#nav ul li {float:left;margin-right:10px;height:32px;line-height:32px;}
#nav ul li span {display:none;}
li.menu_home_active {
background:transparent url(../img/menu_home_active.png) no-repeat top left;
width:69px;
}
li.menu_home_active a {
position:relative;
padding-right:67px;
padding-bottom:15px;
}
li.menu_services {
background:transparent url(../img/menu_services.png) no-repeat top left;
width:91px;
}
li.menu_services a {
border:1px solid #000;
padding-right:89px;
padding-bottom:15px;
}
Check the attached images for how the site appears in FF (for some reason Photoshop won’t paste from a Print Screen on this computer, so I can’t get an IE screenshot. Needless to say, the Services tab does not have the black border).