Jump to content

CSS and DIVs IE bad, FireFox Good


SharkBait

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

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.