Jump to content


Photo

CSS and DIVs IE bad, FireFox Good


  • Please log in to reply
3 replies to this topic

#1 SharkBait

SharkBait
  • Members
  • PipPipPip
  • Advanced Member
  • 845 posts
  • LocationMetro Vancouver, BC

Posted 15 July 2006 - 03:56 PM

Alright....

  I am having troubles with this bit of 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>

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

#2 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 15 July 2006 - 07:15 PM

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.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#3 SharkBait

SharkBait
  • Members
  • PipPipPip
  • Advanced Member
  • 845 posts
  • LocationMetro Vancouver, BC

Posted 16 July 2006 - 12:22 AM

Ya know.. that makes sense!

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

#4 cmgmyr

cmgmyr
  • Members
  • PipPipPip
  • Advanced Member
  • 1,278 posts
  • LocationUSA

Posted 16 July 2006 - 04:08 PM

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:
<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>

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




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users