Hi all,
I was wondering if anyone had any idea what might be causing this (IE7 on the left, IE 8 on the right (fine)):
Everything looks perfect in IE8, FF, Safari, Chrome and Opera this is just a IE7 and earlier issue.
<div id="header">
<div id="navcontainer">
<ul id="navlist">
<li><a href="index.php" <? echo setNavActive($pageId, "home")?>>Home</a></li>
<li>|</li>
<li><a href="#?page=about" <? echo setNavActive($pageId, "about")?>>About Us</a></li>
<li>|</li>
<li><a href="#?page=story" <? echo setNavActive($pageId, "story")?>>Our Alpaca Story</a></li>
<li>|</li>
<li><a href="#?page=meet" <? echo setNavActive($pageId, "meet")?>>Meet the Animals</a></li>
<li>|</li>
<li><a href="#?page=blog" <? echo setNavActive($pageId, "blog")?>>Our Blog</a></li>
<li>|</li>
<li><a href="#?page=alpaca" <? echo setNavActive($pageId, "alpaca")?>>Alpaca Facts</a></li>
<li>|</li>
<li><a href="#?page=services" <? echo setNavActive($pageId, "services")?>>Stud Services</a></li>
<li>|</li>
<li><a href="#?page=contact" <? echo setNavActive($pageId, "contact")?>>Contact</a></li>
<li>|</li>
<li><a href="#?page=links" <? echo setNavActive($pageId, "links")?>>Useful Links</a></li>
</ul>
</div>
</div>
#header{
width:1006px;
height:256px;
background-image:url('http://tacchidev.co.uk/devshed/AngersleighAlpacas/images/header.jpg');
background-position:0px 0px;
background-repeat:no-repeat;
position:relative;
}
#navcontainer{
position:absolute;
left:0px;
bottom:5px;
overflow:visible;
}
#navlist{
margin-left:-10px;
overflow:visible;
}
#navlist li{
font-size:0.75em;
display: inline;
list-style-type: none;
padding-right: 2px;
}
.active{
background-color:#a28664;
border:2px solid #917858;
padding:10px;
height:45px;
}