Clipped Menu in IE7/6

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;
	}

Anyone? :frowning:

Do you have a live link where this is taking place? If you don’t, then the PHP code doesn’t help us. We need the view source code. The output code :).

I’m about to leave for a double shift, but if this is still unsolved when I get back, I’ll take a look at it.

Hi Ryan, it just needed line-height applied to #navlist li, sorted now thanks. P.s I did put the CSS in the original post.

The css doesn’t have PHP in it :). I was referring to the HTML.

Good job figuring it out on your own.

Yes I know but it was only a spot of PHP and I figured you guys would just ignore it :wink: