CSS problems: with custom ul,li dropdown navigation in ie, especially with the ie6 overflow:visible bug?

Up vote 0 down vote favorite 1 share g+ share fb share tw.

The essence of the ie6 bug (dropdown entries must be truncated via overflow hidden to prevent ie from incorrectly expanding instead of acting as overflow:visible) can be seen in it's current (hacky) form in the screenshot below, and at the site zd-cms.com Wrong (ie6): Right (FF, IE8, Chrome): The menu entry should show: Contact Us Resellers Support Designer Services But since I can't get overflow:visible working or otherwise simulate it, parts of the dropdown menus get cut off. Currently the css in the ie6-specific stylesheet is: #zd-nav { padding-left:0; margin-left:0; background-color:transparent; } #zd-nav . Zd-sub-nav{ margin-top:5px; **width:73px**; **overflow:hidden;** } A few solutions to the bug that I've tried: I'm aware of the ie6 overflow:visible bug, (as per here: positioniseverything.net/explorer/expand... ), which renders overflow:visible null and void.

Read through: stackoverflow.com/questions/83696/strate... and tried a few hacks to try to make it really act as overflow:visible, but nothing worked. Right now, I've got the dropdown part of the menu set to overflow:hidden as a last ditch solution because I can't get ie6 to let the menu act in an overflow:visible manner. Pointing out any problems with the nav in ie7 or ie8 would be much appreciated as well.

Suggestions? Css internet-explorer-6 overflow visible link|improve this question edited Nov 4 '09 at 2:23 community wiki7 revs, 2 users 83%Tchalvak.

Heh, thanks Jonathan, was just looking to edit in code tags. Should have used the preview better. – Tchalvak Oct 27 '09 at 17:37 Man, IE6 pwns me, makes me feel like a N00b.

Whee. – Tchalvak Oct 27 '09 at 23:36 Man, still haven't had time to check out the additional solutions. Will before long, though.

– Tchalvak Nov 9 '09 at 15:12.

This worked for me: #zd-nav . Zd-sub-nav li{ float:left; clear:left; position:relative; z-index:20; /* or some other arbitrary biggish number */ } The float gives the li the right width, and the position relative and z-index make it show above (ie not constrained by) the ul.

Since this was simple, I tried it first, and it solved the problem, so thanks. – Tchalvak Nov 10 '09 at 16:04 glad to help ..................... – wheresrhys Nov 10 '09 at 18:25 Since it is position relative, it will still cause pushdown on the page. But if it fixed the problem, good on ya.

– Kevin Peno Nov 11 '09 at 3:49.

Try this out (assuming that you want the drop down plus sub sub sub to also be allowed to "float" over any other elements on the page that get in the way): . Zd-nav-active { position: relative; } . Zd-sub-nav { position: absolute; z-index:10000; } Forcing the li containg the sub navigation to position relative will not change position on the page.

It does, however, allow you to use position absolute on child elements, while keeping them contained within the parent by default, AND releasing it from the "flow" of the page (thus preventing the push down effect).

Try either: word-wrap:break-word; /*use this in the #zd-nav . Zd-sub-nav class*/ or... width:100%; /*instead of setting the width to 73px*/ you could do height:100%; also. It's a hasLayout issue that Microsoft invented.

Found the info here: zoffix.com/css/ie/haslayout.shtml Hope this helps...

Word-wrap:break-word; // No effect. I thought this was a css3 feature anyway? Width:100% //changed the layout, but not in any good way, just threw the menu down to a lower line.

Height:100%; // As with width. If it were really a hasLayout issue, it seems like the "zoom:1" hack should be a clean way to fix it, but... ...the googles, zey do nathink. – Tchalvak Oct 27 '09 at 23:31 Well, I gave it a try!

Really, the best thing is to not develop for IE6 at all! 9-year old browser full of bugs, and MS doesn't mind anyone using it. – tahdhaze09 Oct 28 '09 at 13:41 2 Yep, would that I had that choice.

– Tchalvak Oct 28 '09 at 14:07 I have the same dilemma. – tahdhaze09 Oct 28 '09 at 17:40.

This should work #zd-nav . Zd-sub-nav{ margin-top:5px; width: auto; display: block; overflow: visible } An auto width is used to adopt the size of each navigation item without needing to give each one a fixed width. Hope this helps.

I suggest to use a relative position to the container, with specifying top and left and width.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.