CSS and DIVs IE bad, FireFox Good

[SharkBait]

Alright....

  I am having troubles with this bit of code:

[code]
<div style="width: 180px; padding-left: 5px;">
<div style="float:left; background-image: url('images/menu-title-left.gif');
background-repeat: no-repeat; width: 14px; height: 25px;">
</div>
<div style="float:right; background-image: url('images/menu-title-right.gif');
background-repeat: no-repeat; width: 14px; height: 25px;">
</div>
<div style="background-image: url('images/menu-title-repeat.gif');
background-repeat: repeat-x; margin:0; padding: 0; padding-top: 8px;
font-weight: bold; font-size: 11pt; color: #fff; height: 17px;">
Main Menu
</div>
<div style="clear:both; border: 1px solid #999; background-color: #ddd;">
  <ul class="leftmenu">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Guestbook</a></li>
  </ul>
</div>
</div>
[/code]

It works fine in Firefox. But IE6 makes the middle section of the title bar not match up with the left and right float.

Sample: www.tingram.ca
Check it in IE6 and then look at it in FireFox (firefox is how I want it to look).

When I used IE7b2 it looked fine, but IE6 killed it.  How can I fix this? I hate how IE6 butchers div tags.  Though its nice IE7 works a bit better in regards to w3 consortium's standards etc.  Not sure if I am following them but hey....

:)
Thanks

[moberemk]

You know, if that left column is fixed-width, it would be a whole lot easier to just combine the three backgrounds together and set it as one background.

[SharkBait]

Ya know.. that makes sense!

Silly me forgot that I always make the navigation a fixed with. Thanks

[cmgmyr]

Also what i've noticed is that IE doesn't like it when you drop the </div> down to the next line. It treats this like a space or a line break in some cases.

Try changing it to this:[code]<div style="width: 180px; padding-left: 5px;">
<div style="float:left; background-image: url('images/menu-title-left.gif');
background-repeat: no-repeat; width: 14px; height: 25px;"></div>
<div style="float:right; background-image: url('images/menu-title-right.gif');
background-repeat: no-repeat; width: 14px; height: 25px;"></div>
<div style="background-image: url('images/menu-title-repeat.gif');
background-repeat: repeat-x; margin:0; padding: 0; padding-top: 8px;
font-weight: bold; font-size: 11pt; color: #fff; height: 17px;">
Main Menu</div>
<div style="clear:both; border: 1px solid #999; background-color: #ddd;">
  <ul class="leftmenu">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Guestbook</a></li>
  </ul></div>
</div>[/code]

I don't know why it does that, but it does. I had the same problem a while ago and I tried that and it worked. If it doesn't work for you, then just make the top all one image like what moberemk said.

-Chris