Negative Margins -- ie v.s. ff

HTML & CSS
1

I have a CSS delima that I hope someone can help me with.

First, let me give you the CSS code I’m working with for my main navigation menu at http://www.filipinaeyes.com

div#headernav_wrap {
	margin: 0px auto;
	width: 920px;
	height: 38px;
	background: #dd0040 url(images/navbar_bg.png);
	background-repeat: repeat-x; }

	div#headernav { }

		div#headernav ul {
			
			padding-left: 5px;
			height: 30px;
			list-style-type: none; }

			div#headernav ul li {
				float: left; }

				div#headernav ul li a {
					
					padding: 0px 10px;
					height: 36px;
					display: block;
					float: left;
					font: bold 12px/36px arial, verdana, sans-serif;
					color: #ffffff;
					text-decoration: none; }

					div#headernav ul li a:hover {
						text-decoration: underline; }

Now let me show you the html code that uses the above css coding:

<div id="headernav_wrap">
	<div id="headernav">
		<ul>
		<li style="margin-left:-50px;"><a href="http://www.filipinaeyes.com/online-dating-gallery/">Main Asian Dating Gallery</a></li>
		<li><a href="http://www.filipinaeyes.com/online-dating-gallery/blogs/">Blog Gallery</a></li>
		<li><a href="http://www.filipinaeyes.com/online-dating-gallery/videos/">Video Gallery</a></li>
		<li><a href="http://www.filipinaeyes.com/online-dating-gallery/hotornot/">Hot or Not</a></li>
		<li><a href="http://www.filipinaeyes.com/online-dating-gallery/account/register/"><font color="#FFFF00">Sign Up for Free Membership</font></a></li>
					
		</ul>
					
	</div>
</div>

You can see in the above html coding I used inline style to give the first menu item a negative margin left.

NOW FOR THE PROBLEM

Firefox displays the negative margin correctly as the image below shows:

IE seems to ignore the negative margin as the image below shows:

In Fire Fox the menu item displays correctly. But in IE8 the negative margin seems to have no effect. Am I dong something wrong or is this a bug in IE? Any suggestions would be appreciated.

Thanks

2

A little advice - stop slapping div containers around things just because you are adding a little styling. I’m not seeing ANYTHING in the menu that warrants a negative margin, or ANY of the div wrapping it. Literally you should get rid of #page_wrap, #page, #header_wrap, #header, the clearing DIV, #headernav_wrap and #headernav… and that’s just before we get to the menu. From there you have dozens of div for nothing AND tables for layout. It’s an excellent example of what I’m referring to when I say “overthinking the solution to a problem.” as evidenced by the 8k of markup for less than 2k of content… much less if this is a new site why are you working in Tranny? Transitional is for supporting old/outdated/half-assed coding techniques, NOT for building new sites.

… and axe the keyword stuffing before the h1 – that’s a good way to get slapped down by the search engines.

I’m on the road at the moment, but when I get back to my workstation I’ll take a closer look…

3

Maybe try giving the ul or the containing div the negative left margin instead.

4

Welcome. Next i would try pushing it instead of pulling it. Try a margin right on the ul or div. If margin doesn’t work try padding.

5

Thanks for the quick reply Eric, but that didn’t work. I tried it with both ul and divs but same results.

6

ok figured it out. Needed to clear both to get IE to work properly.

Added to css:

div.clear {
clear: both; }

Added to html:

<div class=“clear”></div>
<div id=“headernav_wrap”>
<div id=“headernav”>
<ul>

It now lines up in IE properly

cheers