User Name
Password
AppleNova Forums » Programmer's Nook »

CSS: floated blocks collapse in IE6


Register Members List Calendar Search FAQ Posting Guidelines
CSS: floated blocks collapse in IE6
Thread Tools
drewprops
Space Pirate
 
Join Date: May 2004
Location: Atlanta
 
2007-03-22, 22:19

I'm making a small 7 page website that has a horizontal navigation window made from a styled list; turning each of the list items into a block element and floating them to the left so that they queue up next to each other. To make it "pretty" I'm hiding the text of the menu information and using a couple of background images for rollovers/selected pages.

Looks and works great on all the browsers on my Mac (except IE5, which I consider dead now), but it breaks in IE6.... all the menu items land "on top of each other" on the far left side and only the last one in line ("Contact") is visible.

At this point I'm feeling like I "need a push from somebody" toward the solution. It's definitely a FLOAT, common problem in IE....




HTML:
Code:
<div id="navigation"> <ul id="menubar"> <li class="active" id="About"><a href="?sec=0"><span class="hide">About</span></a></li> <li class="menu" id="Animation"><a href="?sec=1"><span class="hide">Animation</span></a></li> <li class="menu" id="Downloads"><a href="?sec=2"><span class="hide">Downloads</span></a></li> <li class="menu" id="FAQ"><a href="?sec=3"><span class="hide">FAQ</span></a></li> <li class="menu" id="Legal"><a href="?sec=4"><span class="hide">Legal</span></a></li> <li class="menu" id="Glossary"><a href="?sec=5"><span class="hide">Glossary</span></a></li> <li class="menu" id="BridgingCM"><a href="?sec=6"><span class="hide">BridgingCM</span></a></li> <li class="menu" id="Contact"><a href="?sec=7"><span class="hide">Contact</span></a></li> </ul> </div>
CSS:
Code:
#navigation { width: 810px; background: #dacca2 url(graphics/navZone.png); height: 25px; margin: 0px; padding: 0px; font: bold 110% LegacySans, Trebuchet, "sans serif"; } span.hide { display: none; } ul#menubar { margin: 0px; height: 20px; } #menubar a { display: block; height: 25px; float: left; } ul#menubar li { display: block; float: left; border-right: 1px solid #9a7649; margin: 0; } li#About a, li#Animation a, li#Downloads a, li#FAQ a, li#Legal a, li#Glossary a, li#BridgingCM a, li#Contact a { background: url(graphics/navOff.png) no-repeat; } li#About a:hover, li#Animation a:hover, li#Downloads a:hover, li#FAQ a:hover,li#Legal a:hover,li#Glossary a:hover,li#BridgingCM a:hover,li#Contact a:hover { background: url(graphics/navHover.png) no-repeat; } li#About.active a, li#Animation.active a, li#Downloads.active a, li#FAQ.active a, li#Legal.active a, li#Glossary.active a, li#BridgingCM.active a, li#Contact.active a { background: url(graphics/navActive.png) no-repeat; } ul#menubar li#About a { width: 57px; background-position: -7px; padding-left: 7px; border-left: 1px solid #9a7649; } ul#menubar li#Animation a { width: 83px; background-position: -91px; padding-left: 7px; } ul#menubar li#Downloads a { width: 94px; background-position: -208px; padding-left: 7px; } ul#menubar li#FAQ a { width: 56px; background-position: -316px; padding-left: 7px; } ul#menubar li#Legal a { width: 75px; background-position: -373px; padding-left: 7px; } ul#menubar li#Glossary a { width: 81px; background-position: -448px; padding-left: 7px; } ul#menubar li#BridgingCM a { width: 115px; background-position: -543px; padding-left: 7px; } ul#menubar li#Contact a { width: 86px; background-position: -677px; padding-left: 7px; }

Steve Jobs ate my cat's watermelon.
Captain Drew on Twitter

Last edited by drewprops : 2007-03-23 at 14:51. Reason: desperation
  quote
drewprops
Space Pirate
 
Join Date: May 2004
Location: Atlanta
 
2007-03-22, 23:47

Just in case somebody has extra time on their hands I've put up a "live" version of the menu at this link:

http://homepage.mac.com/drewprops/ap...apse/index.htm

Note that this is only a hardcoded example to show how the styling is applied.... (the real site uses PHP).

Anyway.... there 'tis

Steve Jobs ate my cat's watermelon.
Captain Drew on Twitter
  quote
adamb
Formerly “adambrennan”
 
Join Date: Oct 2005
Location: Northern Ireland
 
2007-03-23, 17:43

I think IE6 has a problem with this style of floating for some reason. I found using 'display: inline;' (inserted in your li formatting and removing the float) works in IE, Safari and Firefox.
  quote
drewprops
Space Pirate
 
Join Date: May 2004
Location: Atlanta
 
2007-03-23, 18:13

EDIT: Adam, you posted while I was writing the treatise down below.... let me go off and play with what you just posted..... thanks!!

Okay, I tried switching them from { display:block; } to { display:inline; ) with no change in behavior. There's something more bugdamental going on here.

For anyone who'd like to fiddle with this I've made a ZIP....
Background Image Rollovers


.


.

It's problems like this that really drive home how big a pig Internet Explorer is underneath its hood... no wonder nobody has been dumb enough to pick this problem up. I'm going to solve it eventually, so I thought I'd continue to post in this thread, maybe it will help somebody else out in the future!



Okay, this is a technique that you may have seen over at MacRabbit (makers of CSSEdit) or Joyent (who had their entire site design stolen by a winery last year if memory serves). These guys are using image-based buttons instead of styled text and it makes their sites look great.

The solution is seemingly elegant:

#1. Create an image which contains all of your menu titles spaced out over its length.



#2. Create two modified versions of that image to represent the OVER and SELECTED states.





#3. Float your menu's <li> items using CSS (still trying to remember why I floated the a element).

Code:
#menubar a { display: block; height: 25px; float: left; } ul#menubar li { display: block; float: left; border-right: 1px solid #9a7649; margin: 0; }
#4. Assign different background images to the list items depending on their hover state (or their classification as "active").

Code:
li#About a, li#Animation a, li#Downloads a, li#FAQ a, li#Legal a, li#Glossary a, li#BridgingCM a, li#Contact a { background: url(graphics/navOff.png) no-repeat; } li#About a:hover, li#Animation a:hover, li#Downloads a:hover, li#FAQ a:hover,li#Legal a:hover,li#Glossary a:hover,li#BridgingCM a:hover,li#Contact a:hover { background: url(graphics/navHover.png) no-repeat; } li#About.active a, li#Animation.active a, li#Downloads.active a, li#FAQ.active a, li#Legal.active a, li#Glossary.active a, li#BridgingCM.active a, li#Contact.active a { background: url(graphics/navActive.png) no-repeat; }
#5. Let each list item declare its WIDTH and let it reassign the positioning of the background image by changing it's x/y coordinates. In my case it's only horizontal (since then I've gotten rid of the padding shown in this example). Remember, this part of the CSS doesn't care which image state gets loaded, it just knows to move that image X number of pixels left or right.

Code:
ul#menubar li#About a { width: 57px; background-position: -7px; padding-left: 7px; border-left: 1px solid #9a7649; } ul#menubar li#Animation a { width: 83px; background-position: -91px; padding-left: 7px; } ul#menubar li#Downloads a { width: 94px; background-position: -208px; padding-left: 7px; } ul#menubar li#FAQ a { width: 56px; background-position: -316px; padding-left: 7px; } ul#menubar li#Legal a { width: 75px; background-position: -373px; padding-left: 7px; } ul#menubar li#Glossary a { width: 81px; background-position: -448px; padding-left: 7px; } ul#menubar li#BridgingCM a { width: 115px; background-position: -543px; padding-left: 7px; } ul#menubar li#Contact a { width: 86px; background-position: -677px; padding-left: 7px; }


Hours down the road from this version of the code I have determined that:

IE6 isn't respecting my width declarations.
At least, not while I have span.hide set to {display:none;}
If you'll look at the HTML you'll see that each <li> item has its section title text inside, wrapped by a span whose class is "hide".

Viewing the page in Internet Explorer 6:
All you get is a string of "collapsed" <li> elements as shown at the bottom of the first image of this thread (and below).



See the thick dark brown line to the left of the "Contact" button?
Those are a stack of vertical borders left over from each "missing" <li> item. When viewed in any other browser but IE those vertical lines fall to the right of each menu item, visual separation from the next menu item. This clump of lines in IE6 is the only evidence that they're there.

So far it seems that the floated <li> elements must have some content displayed inside them in order for this to work in IE6, and even then the width declarations for each unique <li> item (About, Animation, Downloads, etc) seems to have no effect; the width of the <li> is constrained to the width of the displayed text. Make it smaller, the list item's width shrinks... so just putting in a &nbsp; space inside the HTML code for each list item would be little help.

But hey, what's up with that lone working list item "Contact"??
It's the last list element in line. Perhaps it's gobbling up the previous list items?

Is this some weird form of the peek-a-boo bug? I don't think so, but I'm not sure enough not to say that it isn't... not yet anyway.

Steve Jobs ate my cat's watermelon.
Captain Drew on Twitter

Last edited by drewprops : 2007-03-24 at 00:13. Reason: Posts merged
  quote
drewprops
Space Pirate
 
Join Date: May 2004
Location: Atlanta
 
2007-03-24, 08:11

Well, I have come up with what I call my "ugly solution" for right now, which is to build in exclusions to certain CSS rules in such a way as to make IE use the text instead of the background images.

The a new CSS file named "style(uglysolution).css" is located HERE.
Just change the filename back to "style.css" to see how it works.

What a kludge.

::sigh::


UPDATE: I'm looking at the way they did it over on PureVolume.com and see that they used a <DIV> to wrap the linked text inside the <li> items. They're still using a <span>, but they *are* using positioned text and.... new code to gnaw on....

Steve Jobs ate my cat's watermelon.
Captain Drew on Twitter

Last edited by drewprops : 2007-03-24 at 09:04.
  quote
drewprops
Space Pirate
 
Join Date: May 2004
Location: Atlanta
 
2007-03-26, 13:00

Solved it. I'm an idiot.
Nothing to do with style sheets.

It has to do with another recent post in here wondering why my HTML was rendering out funny. Chucker suspected that I was pulling in a line break, which I was. It was *totally* screwing things up. As soon as I went back and applied the rtrim() function the sun came out, the birds started singing and I breathed a heavy sigh of relief.

::sigh::

Steve Jobs ate my cat's watermelon.
Captain Drew on Twitter
  quote
Posting Rules Navigation
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Post Reply

Forum Jump
Thread Tools

« Previous Thread | Next Thread »

All times are GMT -5. The time now is 11:42.


Powered by vBulletin®
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright ©2004 - 2024, AppleNova