CSS - Please Help! Css Dropdowns Not Working Correctly In Ie6
Hello everyone,
Thanks in advance for any help you can offer. I have a single page for a site I'm creating located he simplethoughts.com/test/index.html The css file for the page is located he simplethoughts.com/test/css/screen.css The main navigation is using suckerfish style dropdowns which work fine in IE7, firefox, and opera. However, when I try the page in IE6 or 5.5, the dropdowns 'drop' about 100px too low and WAY to the right of where they're supposed to and I can't seem to figure out why. Thanks again for any help...it's extremely appreciated! -Neil Similar TutorialsI can hardly believe my eyes. Maybe I'm doing something wrong... I have a div with 5px borders and 5px padding on each side. My php does a browser detect, and pulls the appropriate css file. In the IE stylesheet, I have the div's width set to 820px (800px + 5px + 5px +5px + 5px = 820px) as described as part of the Tan Box Hack (which wasn't working right for some reason). In the Mozilla stylesheet, I have the width set to 800px, because, well, that's how wide it's supposed to be. Now, when I open IE6 and Firefox, and send them both to the page, IE renders the box somewhat larger than the box in FF. What's even stranger is, when I set the width in the IE stylesheet to 800px, it renders correctly, matching the width rendered by FF. Any thoughts on this? I can post my code if you really wanna see it, but I figured you'd all understand what I'm trying to describe... I uploaded the page I am working on to http://sulley.dm.ucf.edu/~ebuccianti/wtf/. I want that text at the top of the page to begin a certain number of pixels down from the top of the div, so I tried to set padding-top to that number of pixels, but for some reason Firefox is extending the bottom of the div by that number of pixels as well. I have done this before and I have never had this problem. What the hell am I doing wrong this time?? Download the page he http://sulley.dm.ucf.edu/~ebuccianti/wtf/index.php Download the stylesheet he http://sulley.dm.ucf.edu/~ebuccianti/wtf/style.css Please help! Maybe I'm just missing something here, but I can't get the right column of the search box to align at the top. At first I thought it had something to do with the specified widths, but that did not work. I'm sure this is a quick fix, I can't seem to figure it out though. Thanks. The site Code: <div id="searchbox"> <h2 id="searchbox_header">Browse Bus Rates and Amenities</h2> <p style="padding-left: 5px; ">Search by Bus Type:<br /> <select name="bustype"> <option selected value="">All Bus Types</option> <option value="1" >Deluxe Motor Coach</option> <option value="7" >Double Decker</option> <option value="4" >Entertainer</option> <option value="5" >Executive</option> <option value="9" >Limo Bus</option> <option value="2" >Minibus</option> <option value="3" >School Bus</option> <option value="0" >Tour Operator</option> <option value="6" >Trolley</option> <option value="8" >Van</option> </select></p> <p style="padding-left: 5px; ">Departure State / Province:<br /> <select name="state" onChange="buildCity('','');"><option selected value=""> - No state selected - </option> </select></p> <p style="padding-left: 5px; ">Departure City / Metro Area:<br /> <select name="city"> <option value="">Entire State</option> </select></p> <div id="searchboxrightcol"> <p>Or search by Zipcode:<br /><input type="text" name="zip" size="15"></p> <p>Browse local rates & inventory. Locate specific bus types</p> <p><a href="#">Search</a></p> </div> <div id="searchbox_footer"> <p>BusRates.com does its best to screen out brokers but cannot guarantee this.</p> </div> </div> CSS: #searchbox { width: 400px; margin: 0; padding: 0; border: 1px solid #003366; background: #CCCCFF; } #searchboxrightcol { padding: 0; margin: 0; margin-left: 170px; padding-left: 5px; } #searchboxleftcol { width: 160px; float: left; padding: 0; vertical-align: top; border-right: 1px solid black; } #searchbox p { padding-left: 5px; padding-right: 5px; width: auto; height: auto; } #searchbox_header { text-align: center; color: white; background: #003366; padding: 0px; margin: 0px; width: auto; } #searchbox_footer { width: 400px; text-align: center; color: black; padding: 0px; margin: 0px; } #searchbox a, #searchbox a:visited { background: #336699; text-align: center; padding: 5px 50px 5px 50px; border: 2px solid #003366; color: white; font-weight: bold; text-decoration: none; } #searchbox a:hover { background: #FC7400; text-align: center; padding: 5px 50px 5px 50px; border: 2px solid #003366; text-decoration: none; font-weight: bold; } I am using a transparent png file for a background, obviously this will not work in IE so I am using the AlphaImageLoader hack. Unfortunately I am not sure why but the results are not as expected. Here is my CSS: PHP Code: .wrap[class] { margin-left: auto; margin-right: auto; margin-top: -21px; width: 760px; top: 21px; min-height: 100%; position: relative; left: 0px; background-image: url(../images/content_bg.png); text-align: left; } * html .wrap { height:100%; padding-bottom: -20px; margin-left: auto; margin-right: auto; margin-top: -21px; width: 760px; top: 21px; min-height: 100%; position: relative; left: 0px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='../images/content_bg.png'); text-align: left; } The first attachment is IE and the second is Firefox (the correct one). I can't seem to find out how to solve this. Some reason, the body/html/whatever the hell IE uses as its root, doesn't auto-expand past 100%, meaning vertical scrolling can't occur. What could be going wrong here? Attached is html and css, the relevant css is at top, and is readable, the unreadable css isn't relevant Hello I'm a photographer trying to code my site myself, I'm a control freak and trying to learn css but coding is not my thing. I have two different rollover effects on my page but only one part is working. The links on the right of photo function correctly when I hover over them, but the links on top don't change as they should. a link to my css file Can anyone help me on this? I believe i have the order correct (a:hover follows link and visited) but i'm sure it's an easy fix. Sadly, not for me. Thanks for any help here is my site: chrisziebarth dot com/test My css file is located in /style.css Hi, First, I'm using the javascript/tutorial from http://www.htmldog.com/articles/suckerfish/dropdowns/ Visit http://serve5.net/xcage/nav/ . The spacing inbetween each image is fine, it's how I want it to be. However, view it in Mozilla first then in IE. Notice something? In Mozilla it does what it's supposed to correctly - have the 'main' background turn blue, and the sub-menu background turn green. However, in IE, this makes BOTH the 'main' and sub-menu background green, instead of keeping the main one blue. I have tried for the past 15 minutes trying to figure this out, but came up empty. I believe it's a problem in the javascript hover code, located in sfhover.js.... since that's what controls IE's hover and it works fine in Mozilla Could you look at the code and tell me whats wrong? http://serve5.net/xcage/nav/ http://serve5.net/xcage/nav/styles/xcage.css http://serve5.net/xcage/nav/scripts/sfhover.js Thanks. I'm trying to create my first dropdown using suckerfish. anyone have an idea why this will only extend about half way across the page before splitting my main categories into two columns? i want it all on one line..any help is appreciated. thanks! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> body { font: 78%/1.5 arial, helvetica, serif; text-align: center; padding: 0; margin: 2em; } #container { width: 36em; background: #F4ECD9; text-align: left; border: 1px solid #eda; margin: 0 auto; } #nav, #nav ul { float: left; width: 36em; list-style: none; line-height: 1; background: white; font-weight: bold; padding: 0; border: solid #eda; border-width: 1px 0; margin: 0 0 1em 0; } #nav a { display: block; width: 10em; w\idth: 6em; color: #7C6240; text-decoration: none; padding: 0.25em 2em; } #nav a.daddy { background: url(rightarrow2.gif) center right no-repeat; } #nav li { float: right; padding: 0; width: 10em; } #nav li ul { position: absolute; left: -999em; height: auto; width: 14.4em; w\idth: 13.9em; font-weight: normal; border-width: 0.25em; margin: 0; } #nav li li { padding-right: 1em; width: 13em } #nav li ul a { width: 13em; w\idth: 9em; } #nav li ul ul { margin: -1.75em 0 0 14em; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { background: #eda; } </style> <script type="text/javascript"> sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script> </head> <body> <ul id="nav"> <li><a href="#">WINDOWS</a> <ul> <li><a href="#">300 Series</a></li> <li><a href="#">900 Series</a></li> <li><a href="#">Sliding</a></li> <li><a href="#">Bay and Bow</a></li> </ul> </li> <li><a href="#">SIDING</a></li> <li><a href="#">GUTTERS</a></li> <li><a href="#">BASEMENTS</a></li> <li><a href="#">GARAGE DOORS</a></li> <li><a href="#">DOORS</a> <ul> <li><a href="#">Entry</a></li> <li><a href="#">Patio</a></li> </ul> </li> </ul> </body> </html> Look fine in FF3 and Chrome, nothing shows in IE8. I likely screwed it up, there is a separate CSS for IE but I can't see what is missing. Thank you for your help, if you can spare it. www.tulsahope.com I have seen this problem before but I have no idea how to fix it. My CSS dropdown menus are falling behind a javascript slideshow. I managed to tweek the zindex for a submenu that now shows above the slideshow but for the life of me I can't get the main menu to do the same. Its killing me. I would be happy to provide you with any code you might need to determine the problem but want to put it all here until asked as it might be quite extensive. If you need to see it, let me know. The site I am working on is alumniunit dott com Thanks, Bruce I'm not finding a topic which addresses this .. or at least one that I comprehend. I've just begun working with CSS, converting our website from one riddled with tables and frames. The new main page has a set of images at top (which finally don't have borders around them in any testing browser), and a set of dropdowns - which all browsers can see except AOL's. Our AOL user reports he is on 9.0 Optimized. (how kosher is it here to post the contents of an entire set of files..?) Pertinent Components: - CSS: http://www.legendsofkarinth.com/lok_cssindex.css - HTML: http://www.legendsofkarinth.com/smallership7a.html Problem Summary: - all browsers are seeing the rollover buttons performing properly but only after backing down from DOCTYPE STRICT to TRANSITIONAL and reinstalling BORDER="0" on all images with links; - all but AOL see the four dropdowns parading across the bottom (again, no links). As an aside, we had to back down from DOCTYPE STRICT to TRANSITIONAL in order for the images to line up in any browser.. I could use some advice there as well. Other than that, the page validates in STRICT but the images have a black line through the midpoint horizontal. The infamous z-index/select problem in ie6 has become a pain for me now. I have read countless articles and yet to find an understandable and stillworking example of how to get around this. Apprently there is an iframe method which seems to do the trick, however all sample code that is provided never works. IE 6 only problem: I have a list (like a good programmer) for my navigation that generates a drop down via css and some js. Selects stay above it regardless of z-index. I have countless selects scattered throughout my site. Can someone give me a WORKING example of how to get around this...i don't want to go down the road of hidding all the selects. We've implemented a slightly modified form of suckerfish dropdowns...apparently I can't post links, but it's at jlfurnishings.com Here's the markup and javascript: Code: <ul id="nav-bar" class="nav-bar"> <li><a href="/jlf/pages/facility" >Facility</a></li> <li><a href="#" >About Us</a> <ul> <li><a href="/jlf/pages/aboutjlf" >JLF</a></li> <li><a href="/jlf/pages/aboutlm" >Lone Meadow</a></li> </ul> </li> <li><a href="/jlf/pages/designerresources" > Designer Resources</a></li> <li><a href="#" >Projects / Clients</a> <ul> <li><a href="/jlf/pages/hotels" >Hotels</a></li> <li><a href="/jlf/pages/restaurants" >Restaurants</a></li> </ul> </li> <li><a href="/jlf/pages/links" >Links</a></li> <li><a href="/jlf/pages/newsevents" >News / Events</a></li> <li><a href="/jlf/pages/calendar" >Calendar</a></li> <li class="nav-bar-white"> <a href="/jlf/pages/contactus"><font style="color:#2E350A;">Contact Us</font></a> </li> </ul><!--end nav-bar --> <script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav-bar").getElementsByTagName("LI"); if (!sfEls) sfEls = document.getElementById("nav-bar-products").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script> Here's the CSS: Code: #nav-bar { position:relative; float:left; width:595px; height:25px; text-align:left; padding-left:6px; margin-left:30px; line-height:25px; } .nav-bar { position:relative; float:left; width:595px; height:25px; background:url(../img/content-nav-bg.jpg) #FFF no-repeat; text-align:left; padding:0px; margin:0px; padding-left:6px; margin-left:30px; line-height:25px; color:#FFF; } .nav-bar li { position:relative; list-style:none; display:inline; margin:0px; margin-left:-4px; padding:0px; } .nav-bar a { color:#FFFFFF; font-size:11px; font-weight:normal; padding:0px; padding-left:12px; padding-right:8px; margin:0px; border-right:solid 1px #FFF; margin:0px; margin-left:-4px; } .nav-bar a:hover { position:relative; color:#2E350A; background:#FFF; padding:7px; padding-left:12px; padding-right:8px; margin:0px; margin-left:-4px; } .nav-bar li.nav-bar-highlight { position:relative; color:#FFF; background:#FFFFFF; font-size:11px; font-weight:normal; padding:7px; padding-left:12px; padding-right:8px; margin:0px; margin-left:-4px; } .nav-bar li.nav-bar-highlight a { position:relative; color:#2E350A; background:#FFFFFF; font-size:11px; font-weight:normal; padding:7px; padding-left:12px; padding-right:8px; margin:0px; margin-left:-4px; } /** this is for the "contact us" item that has a white background **/ .nav-bar-white { background:#FFFFFF; } .nav-bar li ul, .nav-bar-products li ul { /* second-level lists */ position: absolute; background: #E1E1E1; z-index:9; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ } .nav-bar li ul li, .nav-bar-products li ul li { border:0px; float:left; clear:left; margin-left:5px; z-index:900; } .nav-bar li ul li a, .nav-bar-products li ul li a { color:#4C4C4C; border:0px; width: 10em; } #nav-bar li:hover ul, #nav-bar li.sfhover ul, #nav-bar-products li:hover ul, #nav-bar-products li.sfhover ul { /* lists nested under hovered list items */ left: auto; left:-20px; top:10px; z-index:900; width: 10em; } They work fine in Firefox (for the most part...feels a little unstable), but in IE6 (and 7, I believe), the dropdowns are all jacked. Can anyone shed any light on this? I've played with it, but I'm not making any progress. My client is freaking out because this is overdue and my css guy is MIA and I'm about to rip my hair out. Any insight at all would be welcome... (URL address blocked: See forum rules) (dropdowns for 'About Us' and 'Projects / Clients') On a sidenote: how do you guys do this? I'm a PHP developer and CSS is like black magic to me :-) I can usually get things working fine in non-IE browsers, but then I pull up the site in IE and I'm completely mystified. Kudos to you all... I'm a bit stumped as far as what I'm doing wrong. Big surprise, eh? Basically, I made a dropdown navigation menu (tested in FF 3.6.8 and IE 8)...works great. I used an unordered list to do so (and jquery). Well, the problem is, when I add another list to the page, it adopts some of the same properties as my menu I do have an ID for the navigation menu, so I'm not sure what's going on here. Any help, thoughts, or ideas would be DEEPLY appreciated! You can find the sample at: http://www.myztacia.com/animated-menu2.html I figured it was easier to post the link than force you to create the webpage yourself So for a long time I've seen that widths for dropdown menus must be fixed for one reason or another. Trying to make it so that the width of the dropdown was dynamic worked in IE, not Firefox, or vice versa. For instance, you had a horizontal nav menu (<ul>), with two items (<li>s), "cars" and "trucks". Under cars you have dropdown links for "Focus" and "Sky" (so the width could be very short) but for trucks you have "Chevrolet 510 Extended Cab" and "Ford Yadda Yadda Yad" (so a long width). The widths of these dropdowns would have to be specified, meaning that 1.) it wouldn't be perfect padding unless you define the perfect width and 2.) unless you want to define a different width for each dropdown, the width would have to be the same for all and you might have a buttload more padding for one (like the first item) than another (the second item). So I'm wondering, if I force my users to CSS3 (which luckily I'm working on a project where I can), does it allow us to ditch this convention, and dynamically size the width of the dropdown based on content? Maybe through display:table-cell? I've looked around and even the fanciest CSS3 dropdowns still appear to have fixed widths: http://webdesignerwall.com/tutorials/css3-dropdown-menu Novice at CSS. I have a Blogger website. I'm trying to put a CSS dropdown menu. In Safari, it works fine. Don't have access to Firefox, so I don't know, but in IE (6&7) the dropdowns are hidden behind any other widgets on the page. I've seen plenty of forum posts regarding this issue with flash player, but none specifically addressing IE and Blogger widgets. I've tried adjusting z-index in each li, ul. I'm still really new at this, so I'd appreciate any help and specific guidance you can offer. Website: crossfit-hr.com CSS code (source from CSS MENU MAKER): .menu{ width:945px; border:none; border:0px; margin:0px; padding:0px; font-family:verdana,geneva,arial,helvetica,sans-serif; font-size:12px; font-weight:bold; font-color:#FF0000; z-index:200; } .menu ul{ background:url(removed for thread) top left repeat-x; height:43px; list-style:none; margin:0; padding:0; } .menu li{ float:left; padding:0px 8px 0px 8px; z-index:200; } .menu li a{ color:#000000; display:block; font-weight:bold; line-height:43px; padding:0px 10px; text-align:center; text-decoration:none; } .menu li a:hover{ color:#FF0000; text-decoration:none; } .menu li ul{ background:#e0e0e0; border-left:2px solid #0079b2; border-right:2px solid #0079b2; border-bottom:2px solid #0079b2; display:none; height:auto; filter:alpha(opacity=95); opacity:0.95; position:absolute; width:150px; z-index:10000; /*top:.5em; /*left:0;*/ } .menu li:hover ul{ display:block; } .menu li li { display:block; float:none; padding:0px; width:150px; z-index:200; } .menu li ul a{ display:block; font-size:12px; font-style:normal; padding:0px 8px 0px 8px; text-align:left; } .menu li ul a:hover{ background:#949494; color:#FF0000; opacity:1.0; filter:alpha(opacity=100); } .menu p{ clear:left; z-index:200; } .menu #current{ background:url(removed for thread) top left repeat-x; color:#FFFFFF; } ========================= HTML code for Widget: <div class="menu"> <ul> <li><a id="current" href="(removed for thread)" target="_self" >Home</a> </li> <li><a href="" target="_self" >Methods & Results</a> <ul> <li><a href="(removed for thread)" target="_self">Our Methods</a></li> <li><a href="(removed for thread)" target="_self">See the Results</a></li> </ul> </li> <li><a href="" target="_self" >How to Start</a> <ul> <li><a href="(removed for thread)" target="_self">Starting Options</a></li> <li><a href="(removed for thread)" target="_self">Sign-Up Form</a></li> </ul> </li> <li><a href="" target="_self" >Schedule & Prices</a> <ul> <li><a href="(removed for thread)=dctrh782_10dsmgnqhq" target="_self">Class Schedule</a></li> <li><a href="(removed for thread)" target="_self">Prices</a></li> </ul> </li> <li><a href="(removed for thread)" target="_self" >Coaches</a> </li> <li><a href="" target="_self" >Admin & Media</a> <ul> <li><a href="(removed for thread)" target="_self">Online Payments</a></li> <li><a href="(removed for thread)=0" target="_self">Release Form</a></li> <li><a href="(removed for thread)" target="_self">CFHR Photos</a></li> <li><a href="(removed for thread)" target="_self">CFHR Videos</a></li> </ul> </li> <li><a href="(removed for thread)" target="_self" >Contact</a> </li> </ul> </div> =================== hi, Im making a menu that looks like: link1 link2 link3 link4 and then wen you hover over link a dropdown may appear i have the problem that when they appear, they lay on top of each other. ANy idea how to make they display under each other. (it doesnt even work in IE at the mo, but i gues ill laft2 sort that later) thanks this is the html: PHP Code: <ul> <li><a href="index.php?action=home">home</a></li> <li><a href="index.php?action=whatnew">what's new</a></li> <li><a href="index.php?action=offers">special offers</a></li> <li><a href="#">collections</a> <ul><a href="#">drop1</a></ul> <ul><a href="#">drop2</a></ul> <!--when looping thru categories, do a WHERE cat_status >= 2--> </li> <li><a href="index.php?action=sBask">shopping basket</a></li> <li><a href="index.php?action=contact">contact us</a></li> </ul> this is the relevant css: PHP Code: #nav ul li { position: relative; margin: 0; padding: 0 10px 0 10px; list-style: none; display: inline; } #nav ul li ul { position: absolute; display: none; } #nav ul li:hover ul { display: block; left: 0; top: 10px; } #nav ul li:hover ul li { height: 20px; } Can anyone tell me why the navigation does not align with the logo on the left? I would like the bottom of each element to be along the same line. I can't figure out what is pushing it up. Thanks |