1 reply [Last post]
Bloomington/Normal, IL
Last seen: 13 years 22 weeks ago
Bloomington/Normal, IL
Joined: 2005-01-12
Posts: 66
Points: 0

I'm scratching my head on this one.

I have two horizontal nav bars. Both need to be floated to the right side of the container.

Here's the code:

	<div id="header">
		<ul id="topNav" class="clear">
			<li><a href="#">Employment</a></li><li>
			<a href="#">News</a></li><li>
			<a href="#">Visions</a></li><li>
			<a href="#">Customer Login</a></li>
		<ul id="mainNav" class="clear"><li>
			<a href="#">Home</a></li><li>
			<a href="#">Products &amp; Services</a></li><li>
			<a href="#">Contact Us</a></li><li>
			<a href="#">Company</a></li><li>
			<a href="#">Site Map</a></li><li>
			<a href="#">Partners</a></li>

Code looks pretty simple, right? Here's the CSS:

#header ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	float: right;
	margin-right: 10px;
#header ul li {
	font-size: 11px;
	display: inline;
	margin-left: 20px;
#header ul li a {
	color: #FFF;
	text-decoration: none;
#header ul li a:hover {
	text-decoration: underline;
ul#topNav {
	margin-top: 5px;
ul#mainNav {
	margin-top: 47px;
	width: 764px; /*Source of problem, I think*/
ul#mainNav li {
	background-image: url(images/mainNav.bg.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 10px;	

I'm kinda stuck. If I remove 'width:764px' from "ul#mainNav", the nav bar works perfect in FF, but is horribly broken in IE.

If I add the 'width' back to "ul#mainNav", it is no longer broken in IE, but both FF and IE justify the nav left.

I'm.....baffled. I guess the problem lies in why the Nav bar in IE is breaking. Any takers?

gary.turner's picture
Last seen: 11 weeks 11 hours ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

&quot;Float:Right&quot; justifying to the Left???

#header ul {text-align: right;}



If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.