Jump to content

Archived

This topic is now archived and is closed to further replies.

SharkBait

CSS and DIVs IE bad, FireFox Good

Recommended Posts

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
Ya know.. that makes sense!

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.