Hello, I have been working on this for days, but I can't figure out how to have a nested unordered list position itself correctly underneath the parent list item. It displays on top of its parent in Firefox, Opera, and Safari while IE places it over to the right where it is totally unusable. Here is a link to my page: http://www.crosst.org/test/ Any help would be appreciated!!
This thread: http://forums.digitalpoint.com/showthread.php?t=756714 has someone with the same problem. Basically you should use the Suckerfish method. Position: relative is set on the menu itself, not the li's, and the li's are floated, and their children (the submenus) are positioned absolutely and generally then (so long as the li's are given a width) even IE will set the subs in relation to the li's instead of way off. You should look at this for some ideas: http://www.htmldog.com/articles/suckerfish/dropdowns/ The only thing with that is that IE7 can have issues with that style of menu. Keeping position: relative off the top-level li's and having this instead fixes IE7: #menu li:hover { position: relative; z-index: 1; } This triggers Haslayout on the :hover itself, which is all IE7 needs. Of course you're probably using something to get IE6 to hover. : ) *edit I have a habit of posting before looking at the sites in question. It does look like the old Suckerfish. Get position: relative off the li's. I have made an IE7-friendly suckerfish with some help from Suzy (WebMAsterWorld): http://stommepoes.nl/Menus/barebonessuckerfish.html also: @charset "UTF-8"; /* CSS Document */ Watch out, there's a browser (I forget who) who chokes on this (unless this was deliberate to stop that browser)! You can set the charset elsewhere if needed. Lastly, you've got haslayout triggers everywhere (height: 1%; ) which is fine but you should be really careful with those. To all browsers except IE, height means total height (IE lets boxes grow to acoomodate content cause it's stupid). Now usually browsers will let the content flow out (overflow: auto is the default) but then you may find unexpected results when setting background colours or images... the RestOfWorld browsers will take that 1% literally. We usually hide those behind the star hack (* html #container{height: 1%;}) though IE7 doesn't see those and also has the Haslayout thing. So anyway, just be careful and know that if you've set a width on something, or floated something, you don't necessarily need the height: 1% since setting a width is also a haslayout trigger.
Thanks for your help! I have fixed the dropdown problems in IE and Opera, but now the nested list doesn't display when the parent list item is hovered. Essh... Can't win.. any ideas? Thanks I still have one more question. The whole header section drops down if the window is resized in IE. Can you see something in my markup that would cause this? Thanks! Link: http://www.crosst.org/test/ CSS: /* CSS Document */ body { font:normal 62.5% Verdana, Arial, Helvetica, sans-serif; padding:0px; margin:27px 0px 0px 0px; background: #ffe66d url(images/bg.jpg) top repeat-x; text-align:center; } h1 { margin:0; padding:0; } .clear { clear:both; } #outerwrapper { width:100%; height:1%; } #wrapper { height:1%; margin:0 auto; width:1000px; padding:0px; } div#bgleft { margin: 0px 0px 0px 0px; float:left; width:90px; height:150px; background-image:url(images/header_left.jpg); background-repeat:no-repeat; background-position:top left; } div#bgright { margin: 0px 0px 0px 0px; float:right; background-image:url(images/header_right.jpg); background-repeat:no-repeat; background-position:top right; width:90px; height:150px; } #header { height:150px; width:650px; background:url(images/header.jpg) top center no-repeat; margin:0px 0px 0px 0px; padding:0px; } #content { width: 667px; padding:0px; margin:0px auto; } /* start navigation */ #center { width:647px; margin:0 auto; } #navcontain { width:486px; margin:0 auto; padding:94px 0px 0px 0px; } #nav { width:492px; display:block; margin:0 auto; padding:0px 0px 0px 0px; } #nav li { position:relative; width:80px; float:left; padding:0px 2px 0px 0px; } <!-- submenu that appears when parent li is hovered over --> #nav li:hover ul, #nav li.sfhover ul { display:block; border:1px solid #CC9900; position:absolute; left:0px; margin:32px 0px 0px 0px; padding:0px 0px 0px 0px; height:auto; width:77px; } <!-- normal state for submenus--> #nav li:hover ul li a, #nav li.sfhover ul li a{ width:72px; height:auto; border-bottom:1px solid #CC9900; padding:5px 0px 5px 5px; margin:0px 0px 0px 0px; color:#0000FF; display:block; } <!--hover state for submenus--> #nav li:hover ul li a:hover, #nav li:active ul li a:active, #nav li.sfhover ul li a:active, #nav li.sfhover ul li a:hover { width:72px; height:auto; border-bottom:1px solid #CC9900; padding:5px 0px 5px 5px; margin:0px 0px 0px 0px; color:#0000FF; display:block; background-image:none; background-color:#99ccff; z-index:500; } #nav li ul { width:72px; height:auto; background:#ffffff; position:absolute; text-align:left; left:-999em; } #nav ul ul { width:72px; height:auto; } ul li a{ font:bold 1.15em Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; display:block; width:80px; height:32px; float:left; padding:5px 0px 0px 0px; text-decoration:none; } ul li a:hover, ul li a:active { color:#0000FF; background:url(images/over.jpg) top center no-repeat; } ul { color:#FFFFFF; list-style-type:none; } .bodycopy p{ text-align:left; text-indent: 10px; } .contentleft p { text-align:left; text-indent: 10px; } #contentright p { text-align:left; text-indent: 10px; } .contentright p { line-height:.3em; margin:0px; padding:0px; } #contentright { background:#ffffff url(images/rc_brcontent.png) bottom left no-repeat; height:auto; float:left; width: 130px; padding:10px 10px 10px 10px; margin:150px 0px 0px 0px; display:block; } .rightwrap { margin-top:1px; margin-left:20px; float:left; background: url(images/biblehead.jpg) top right no-repeat; width:180px; } .contentleft { height:auto; background:#FFFFFF url(images/feather.jpg) bottom right no-repeat; float:left; width:445px; margin: 9px 0px 0px 20px; display:block; text-align:left; } .contentleft p { text-align:left; text-indent:10px; } .contentleft_head { padding:0px; margin:0px; } .contentleft_head h1{ text-align:left; padding:0px 0px 10px 0px; margin:0px; font: bold 1.7em Verdana, Arial, Helvetica, sans-serif; color:#4284c0; } .contentleft_head .subhead { padding:0px; font:1.4em bold "Times New Roman", Times, serif; text-align:left; } .contentleft_head h1 .hr_top { border-bottom:1px solid #000000; width: 200px; height:5px; margin-left:200px; text-align:right; } .titles { padding-top:5px; font:bold 1.5em Verdana, Arial, Helvetica, sans-serif; color:#4284c0; border-bottom:1px solid #ffe66d; text-align:left; width: 400px; } .roundedcornr_top div { background: url(images/roundedcornr_tl.png) no-repeat top left; } .roundedcornr_top { background: url(images/roundedcornr_tr.png) no-repeat top right; } .roundedcornr_bottom div { background: url(images/roundedcornr_bl.png) no-repeat bottom left; } .roundedcornr_bottom { background: url(images/roundedcornr_br.png) no-repeat bottom right; } .roundedcornr_top div, .roundedcornr_top, .roundedcornr_bottom div, .roundedcornr_bottom { width: 100%; height: 12px; font-size: 1px; } .roundedcornr_content { margin: 0px 12px; float:left; } .church { float:left; background:url(images/church.jpg) top left no-repeat; width:190px; height:137px; margin:0px 10px 0px 0px; } .br_corner { float:right; text-align:right; background:url(images/roundedcornr_br.png) bottom right no-repeat; height:12px; } .bl_corner { float:left; background:url(images/roundedcornr_bl.png) bottom left no-repeat; height:12px; } .tab_devotion { height:30px; width:130px; background:url(images/tab.png) top center no-repeat; font:1.6em "Times New Roman", Times, serif; color:#FFFFFF; margin:0px; padding:0px 0px 0px 0px; text-align:center; line-height:30px; } .tab_botm { height:160px; width:130px; background:url(images/botm.jpg) top center no-repeat; font:1.3em "Times New Roman", Times, serif; color:#FFFFFF; padding:0px 0px 10px 0px; text-align:center; line-height:30px; } div .tab_search { background:url(images/tab.png) top center no-repeat; font:1.6em "Times New Roman", Times, serif; color:#FFFFFF; text-align:center; line-height:30px; padding:0px 0px 0px 0px; margin-top:20px; } .tab_search p { line-height:0px; padding:0px 0px 0px 0px; margin-top:0px; } .tab_search input { padding-top:0px; margin-top:10px; } #content_top td { padding:5px 5px 5px 5px; } </code>
Well, it looks like you're mixing styles now. The submenu is sitting to the left but you're still using display: block to bring it back. You need to change it's position now, not it's display state. The header dropping down is something to do with IE thinking there's not enough room for the header to stay in outerwrap. Though I would have written the HTML differently (you have a lot of containers and while that would be understandable with mutliple background images, you really only have one, which if you wanted could actually go on the body!) <body> <div id="wrapper"> <div id="header"> <ul id="nav"> <li><a href="http://www.crosst.org">Home</a></li> <li><a href="#">Ministry</a></li> <li><a href="#">Media</a> <ul> <li><a href="live.html">Live</a></li> <li><a href="archive.html">Archive</a></li> <li><a href="photos.html">Photos</a></li> </ul> </li> <li><a href="#">Calendar</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Links</a></li> </ul> </div> rest of page starts here... etc... Code (markup): CSS something like this (out of my head, partially pseudocode and not tested): * { margin: 0; padding: 0; } img { border: 0; } ul, li { list-style: none; } body { background: #ffe66d url(images/bg.jpg) 0 30px repeat-x; (if you want it to start 30px down from the top which it is now) (don't set fonts here unless you're setting all your containers in em widths and height... and if you do set fonts, set to 80%/1.5 instead... works more cross-browser) font-family: verdana, arial, helvetica, sans-serif; text-align: center; (only for IE5.5 and under, otherwise ditch it) } #wrapper { width: 700px; margin: 0 auto; padding-top: 30px; (to push the header down to where the body's background img is) text-align: left; (to undo the fix for IE5.5) } #header { width: 650px; margin: 0 auto; height: 150px; (all browsers but IE6 will strictly enforce this height) } #nav { position: relative; height: 38px; (my guess on the height of the background image part) } #nav li { float: left; width: 82px; (that's my guess on the width of those) } #nava { display: block; text-align: center; color: #fff; font:bold 1.15em Verdana, Arial, Helvetica, sans-serif; text-decoration: none; height: 38px; line-height: 38px; } #nav a: focus, #nav a:hover, #nav a:active { color:#00f; background:url(images/over.jpg) top center no-repeat; } /*this is the subs in their normal, unhovered state*/ #nav ul { position: absolute; width: 82px; left: -999em; } /*haslayout trigger IE7*/ #nav li:hover { position: relative; z-index: 1; } /*this brings the subs back into view on hover or focus*/ #nav li:focus ul, #nav li:hover ul { left: 0; } #content { clear: left; } Code (markup): If left: 0 causes issues with some browser, you can in theory do it like Suckerfish with left: auto... I think the sub a's would inherit the same as the regular a's... if not then you'd have to add it be hand. There's some extra code if you need the main menu item to keep the background image showing while the mouse travels down the sub menu. Anyway, this is how I'd do it. It looks like the majority of the site is not wider than 700px so I made the wrapper that wide and so the majority of the page gets centered pretty well... anything smaller than 700px still gets margin: 0 auto; to keep it centered inside its container (the wrapper)... The right sidebar does indeed drop down also in IE6 when the browser window is made smaller... this shouldn't happen if #content is made more than wide enough for the left and right sides, and you can check for doubling margins (IE6 bug) or any other bugs, because we should be forcing a scrollbar instead of float-dropping by setting the ultimate container (wrapper) 700px wide. It's too easy to make stuff more complicated than it needs to be. A page is generally made of a few big boxes and most of the rest you can set with CSS instead of more boxes. *edit if you want to keep using the sfhover, then add that with the other hover stuff... including the haslayout trigger part, so #nav li:hover, #nav li.sfhover:hover { etc... I use Peterned's whatever:hover here, code here and stick it on the server.
Hey, Thanks again for all your help, but even after I changed the wrapper, the header still drops down, as well as my list items for navigation. I have tried using "overflow:hidden" for the navigation li's, but forgot that stops the li:hovers from showing sub menus. Per your suggestions I got rid of my "display:block" for my li:hovers, but It is still not working in Firefox and Safari only IE and Opera. Can you see anything in my code that would cause this? Thanks! /* CSS Document */ body { font:normal 62.5% Verdana, Arial, Helvetica, sans-serif; padding:0px; margin:27px 0px 0px 0px; background: #ffe66d url(images/bg.jpg) top repeat-x; text-align:center; } h1 { margin:0; padding:0; } .clear { clear:both; } #outerwrapper { margin:0 auto; height:auto; width:700px; text-align:left; } div#bgleft { margin: 0px 0px 0px 0px; float:left; width:90px; height:150px; background-image:url(images/header_left.jpg); background-repeat:no-repeat; background-position:top left; } div#bgright { margin: 0px 0px 0px 0px; float:right; background-image:url(images/header_right.jpg); background-repeat:no-repeat; background-position:top right; width:90px; height:150px; } #header { height:150px; width:650px; background:url(images/header.jpg) top center no-repeat; margin:0 auto; padding:0px; } #content { width: 667px; padding:0px; margin:0px auto; } /* start navigation */ #center { width:647px; margin:0 auto; } #navcontain { width:486px; margin:0 auto; padding:94px 0px 0px 0px; } #nav { width:492px; display:block; margin:0 auto; padding:0px 0px 0px 0px; } #nav li { position:relative; width:80px; float:left; padding:0px 2px 0px 0px; } <!-- submenu that appears when parent li is hovered over --> #nav li:hover ul, #nav li.sfhover ul { border:1px solid #CC9900; position:absolute; left:0; margin:32px 0px 0px 0px; padding:0px 0px 0px 0px; height:auto; width:77px; z-index:1; background:white; } <!-- normal state for submenus--> #nav li:hover ul li a, #nav li.sfhover ul li a { width:72px; height:auto; border-bottom:1px solid #CC9900; padding:5px 0px 5px 5px; margin:0px 0px 0px 0px; color:#0000FF; } <!--hover state for submenus--> #nav li:hover ul li a:hover, #nav li:active ul li a:active, #nav li.sfhover ul li a:active, #nav li.sfhover ul li a:hover { width:72px; height:auto; border-bottom:1px solid #CC9900; padding:5px 0px 5px 5px; margin:0px 0px 0px 0px; color:#0000FF; background-image:none; background-color:#99ccff; z-index:500; } #nav li ul { width:77px; height:auto; background:#ffffff; position:absolute; text-align:left; left:-999em; } #nav ul ul { width:77px; background:#FFFFFF; } ul li a{ font:bold 1.15em Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; display:block; width:80px; height:32px; float:left; padding:5px 0px 0px 0px; text-decoration:none; } ul li a:hover, ul li a:active { color:#0000FF; background:url(images/over.jpg) top center no-repeat; } ul { color:#FFFFFF; list-style-type:none; } .bodycopy p{ text-align:left; text-indent: 10px; } .contentleft p { text-align:left; text-indent: 10px; } #contentright p { text-align:left; text-indent: 10px; } .contentright p { line-height:.3em; margin:0px; padding:0px; } #contentright { background:#ffffff url(images/rc_brcontent.png) bottom left no-repeat; height:auto; float:left; width: 130px; padding:10px 10px 10px 10px; margin:150px 0px 0px 0px; display:block; } .rightwrap { margin-top:1px; margin-left:20px; float:left; background: url(images/biblehead.jpg) top right no-repeat; width:180px; } .contentleft { height:auto; background:#FFFFFF url(images/feather.jpg) bottom right no-repeat; float:left; width:445px; margin: 9px 0px 0px 20px; display:block; text-align:left; } .contentleft p { text-align:left; text-indent:10px; } .contentleft_head { padding:0px; margin:0px; } .contentleft_head h1{ text-align:left; padding:0px 0px 10px 0px; margin:0px; font: bold 1.7em Verdana, Arial, Helvetica, sans-serif; color:#4284c0; } .contentleft_head .subhead { padding:0px; font:1.4em bold "Times New Roman", Times, serif; text-align:left; } .contentleft_head h1 .hr_top { border-bottom:1px solid #000000; width: 200px; height:5px; margin-left:200px; text-align:right; } .titles { padding-top:5px; font:bold 1.5em Verdana, Arial, Helvetica, sans-serif; color:#4284c0; border-bottom:1px solid #ffe66d; text-align:left; width: 400px; } .roundedcornr_top div { background: url(images/roundedcornr_tl.png) no-repeat top left; } .roundedcornr_top { background: url(images/roundedcornr_tr.png) no-repeat top right; } .roundedcornr_bottom div { background: url(images/roundedcornr_bl.png) no-repeat bottom left; } .roundedcornr_bottom { background: url(images/roundedcornr_br.png) no-repeat bottom right; } .roundedcornr_top div, .roundedcornr_top, .roundedcornr_bottom div, .roundedcornr_bottom { width: 100%; height: 12px; font-size: 1px; } .roundedcornr_content { margin: 0px 12px; float:left; } .church { float:left; background:url(images/church.jpg) top left no-repeat; width:190px; height:137px; margin:0px 10px 0px 0px; } .br_corner { float:right; text-align:right; background:url(images/roundedcornr_br.png) bottom right no-repeat; height:12px; } .bl_corner { float:left; background:url(images/roundedcornr_bl.png) bottom left no-repeat; height:12px; } .tab_devotion { height:30px; width:130px; background:url(images/tab.png) top center no-repeat; font:1.6em "Times New Roman", Times, serif; color:#FFFFFF; margin:0px; padding:0px 0px 0px 0px; text-align:center; line-height:30px; } .tab_botm { height:160px; width:130px; background:url(images/botm.jpg) top center no-repeat; font:1.3em "Times New Roman", Times, serif; color:#FFFFFF; padding:0px 0px 10px 0px; text-align:center; line-height:30px; } div .tab_search { background:url(images/tab.png) top center no-repeat; font:1.6em "Times New Roman", Times, serif; color:#FFFFFF; text-align:center; line-height:30px; padding:0px 0px 0px 0px; margin-top:20px; } .tab_search p { line-height:0px; padding:0px 0px 0px 0px; margin-top:0px; } .tab_search input { padding-top:0px; margin-top:10px; } #content_top td { padding:5px 5px 5px 5px; }
I think the header is dropping down because of the funny floats on each side. The menu, now I'm wondering if it's the order of the code. You should state the "normal" position for the subs first (left: -999em etc) and then later state what happens on hover. Hmm, I might have to write this and get a tested version going. If I can get it to work then I can post it here and show you. However I can't do that until weekend I think. But it wouldn't be hard. I've struggled with these menus for some time now : )
I think you are right about the floats on the body causing the header to drop in IE. Is there another way to position these? Also, I tried reordering the code to list the normal state first with no luck. Rats.
Eh, you know, I suck at finding problems in other people's code and find it easier to rewrite it myself. Problem is, since you made your changes on your site I haven't been able to see the dropdowns anymore : ) and it's a holiday weekend and so I don't have the work machines for testing IE or Safari... only old FF1.5 and Opera and Konqueror. Konqueror doesn't even react to the hovers... but I've given up on that browser, cause the code it valid. Opera and FF1.5 are cool, and my crusty old Fake IE6 4 Linux (of course doesn't hover) looks good as far as the header upon shrinking down to 800x600. I don't have this done, and not sure how much I can do without being able to test at work, but this is what I have so far regarding the header, and rezising: http://stommepoes.nl/Church/church.html CSS is same path, church.css (only half finished, the rest is your code...) One thing I did which might not be the best idea was have the menu image held in the h1's span. The span is absolutely positioned, meaning it naturally gets a higher z-index on the page... and then I pulled the relatively-positioned menu up over it, so it looks like it's sitting in the same place. So, on my machine where I can get the hover to work, it seems to line up fine, but I'm almost sure that IE can look at that menu sitting on an abso-po'd span and puke (or do something weird). I couldn't remember what the drop-down part actually looked like, so I know the colours and such aren't right. Everything below that area was rewritten HTML-wise but CSS-wise I didn't get a whole lot farther... was just playing with some things like using the CSS-only rounded corners and trying to make the code simpler... like I was about to remove most of the classes on things when I encountered what they were doing in the CSS (just didn't get there yet). But anyway, from like the top to the menu, code-wise, does it work for you? (make sure the closing divs at the bottom of the document match however many are open at the top) And, do you want me to continue? I might anyway, need to get my skills up with the rounded corners thing, which I've only used on the tops of divs before, not the bottoms. Also, I added labels to your form for accessibility, and with CSS the plan is to move those labels a gazillion px top and left, so they're available for screen readers and text browsers but don't screw with your design. Last, one thing I might do if any browser has issues with the menu being pulled up, is slice the image in two-- one for the h1 (which is there so there's text when people have images off, always a good thing) and the bottom part for the menu alone. That way, the menu wouldn't need to be pulled up so much. I suspect that's what Konqueror's problem is.
Thanks for testing the code, but I checked it in IE and the drop downs are not displaying when the parent li's are hovered. I will be working on it some today and I will let you know if I make any headway. I appreciate your help with this, as I am kinda stumped.
Which IE? 6 won't work as I needed to remove the sfhover from the body tag. You'd need to put that back in. IE7... I'll need to check that as well.
IE 6 doesn't display the dropdowns. It's also adding space between the header nav and the content when any li is hovered over.
I've got it to display dropdowns correctly in IE 7, Firefox 3, Opera, and Safari. If anyone could give me a clue as to what needs to be done for IE 6 to work, I would greatly appreciate it. Thanks!
I can't get the content shift thing to happen on my copy of IE6 with my code. Another thing I forgot about the hover in IE6 is that I also didn't add back in the sfhover that you need in the CSS. That's the class the Javascript refers to to make IE6 hover. You'd add it back in all the places it was for Suckerfish, except you'll also add it where I have that /*only for IE triggers*/ part too. #nav li:hover, #nav li.sfhover:hover { blah blah } Big whoops! 'Cause for my menus I use Peterned's whatever:hover (though not on my own server, only on online sites on the work server) which makes the classes for you too.