SharkBait Posted July 15, 2006 Share Posted July 15, 2006 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.caCheck 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 Quote Link to comment Share on other sites More sharing options...
moberemk Posted July 15, 2006 Share Posted July 15, 2006 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. Quote Link to comment Share on other sites More sharing options...
SharkBait Posted July 16, 2006 Author Share Posted July 16, 2006 Ya know.. that makes sense!Silly me forgot that I always make the navigation a fixed with. Thanks Quote Link to comment Share on other sites More sharing options...
cmgmyr Posted July 16, 2006 Share Posted July 16, 2006 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.