IE bugs with UL

[codie1991]

Hi there.

This is the site in question

Having trouble with the way IE6 and 7 render my UL nav.

http://browsershots.org/png/original...cab522302f.png

It appears to put each new item on a new line but still in the correct horizontal position.

This then forces my Welcome message downwards and in IE6 extends the Div.
Code

<div id="container"><!-- Base of Design -->	
	<div id="header"><!-- Logo and Navigation -->
		<h1>ExigeDesign</h1>		
		<ul>
			<li><a class="selected" href="index.html">Home</a></li>
			<li class="slash">/</li>
			<li><a href="portfolio.html">Porfolio</a></li>
			<li class="slash">/</li>
			<li><a href="contact.html">Contact</a></li>
		</ul>	
	</div><!--End header here-->

CSS

#header ul {
margin: 0 0 0 470px;
text-align: right;
}

#header ul a,
#header ul .slash {
float: left;
margin-top: 20px;
margin-right: 0px;
padding-right: 3px;
font-family: Georgia;
font-size: 18px;
font-weight: normal;
text-decoration: none;
font-style: italic;
letter-spacing: 0.7px;
color: #ebebeb;
}

#header ul a:hover {
color: #ed008c;
}

#header ul a.selected:hover {
text-decoration: underline;
}

#header ul a.selected {
color: #ed008c;
}

Any Help would be greatly appreciated for this budding coder and im sure its just a matter of adding a little CSS to the UL

[ktsixit]

try putting your list inside a div and set a height for this div. Also add display:inline in your list items css.

<div style="height:20px;">
<ul>
<li style="display:inline;">....</li>
<li style="display:inline;">....</li>
<li style="display:inline;">....</li>
</ul>
</div>

I think that this will work for you

[abduraooft]

Just add

#header ul li{
display:inline;
}

into your CSS.

PS: welcome to CF!

[codie1991]

Thank you both, will try that and see if it works. Need to wait for BrowserShots.org now to find out.

[abduraooft]

Originally Posted by codie1991

Thank you both, will try that and see if it works. Need to wait for BrowserShots.org now to find out.

Make use of IE Tester