|
CSS - Dropdowns, Selects, Z-index And Ie6
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. Similar TutorialsHi all. I'm experiencing a strange error. I have a central content div acting as a wrapper for content to sit central to the page. The start of my CSS file is as follows: Code:
*
{
padding: 0;
margin: 0;
}
html
{
height: 100%;
margin: 0 0 1px 0;
}
body
{
height: 100%;
text-align: center;
}
#wrapper
{
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
width: 750px;
margin: 0 auto;
text-align: left;
padding: 200px 0 50px 0 !important;
padding: 200px 0 0 0;
}
Now, whenever I click to the right of this central wrapper div in Firefox, the whole of the content is selected. Anybody know why this is or how I can stop it? 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. 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... 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 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 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; } 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> =================== 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 I have an object on my page with the following settings: Code:
#myEmail {
position:absolute;
left:400px;
top:50px;
z-index:2;
display:none;
}
and i have a video player in my form that looks like this: Code:
<object id="Player" height="400" style="border:solid 1px black; z-index:1;" width="500" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="URL" value="<% =GetPlayerUrl() %>" />
<param name="autoPlay" value="true" />
</object>
Problem is, when the video starts to play, it moves to the top layer. What am i doing wrong? Hi everyone, I'm currently busy on a website which is viewable here The problem is the 'Top' image on the right side. It's supposed to be below the #shadow div (look at my source code) I tried changing the z-indexes to different levels but the top div keeps staying on top. If I turn it into a negative z-index, the mouseover doesn't work anymore.. Hope anyone can help Wouter Hi all, I've got a little request. Does anybody know how I could solve this issue: I want to have a menu hover on the left, and a menu hover at the top, while visitors can move the google map around in the background. I do this by setting my map div to z-index: -1, and it works good. Except it won't let people click on the map and move it around, even though there isn't a div ontop of it. http://pw.mmogm.com/0.0.5/frame.html The only other way I can think of it set the menu's to z-index: 1, but that would cause them to lag, and they're position would be fixed so when I "toggle" the menu, the top menu won't slide left. It's much nicer the first way, besides the clicking problem. http://pw.mmogm.com/0.0.5/frame2.html I greatly greatly any advice you might be able to shed on this issue. Thanks in advance if you can On a site I'm trying to setup I have a header arrangement with a centrally placed image/logo (it's a png8). 1. It looks a bit decimated in IE6. Anyone know why? 2. The image is supposed to be absolute and on top but in fact the menu bar stays on top. All a problem in IE but not firefox. I'm obviously missing something basic! Help appreciated. I have two elements. One has a z-index of 9999 and the other has 9000. Both elements are positioned. It is a modal popup window. When I open it, the element with a poistion of 9000 is on top of the one with 9999. I even checked to confirm that the z-index properties were the same once the popup completed. What could cause this? hi, i've been reading extensively about the z-index issue that IE 7 suffers from (when using the "position" property) but i cannot for the life of me fix my problem. Basically i have a #menu that is positioned relative to a #wrapper. The dropdown menu works fine in all browsers except that in IE 7, the grey shadow that should appear behind the dropdown menu itself appears on top of the actual dropdown menu. If you view the same page using Firefox, the dropdown menu appears above the grey shadow as it should do. This is the EXACT behaviour i need. I need the dropdown menu and its shadow to appear above the "#content .box" below it, but i also need the shadow to appear behind the dropdown menu. I just need to replicate this exact behaviour you see in Firefox in IE 7. I need to keep the IE7 compatibility mode and the DOCTYPE as they are otherwise the other styles on my site will be affected. Please find the attached folder with all necessary code contained in it. Ignore the jquery.js file as its merely used for effects and is not causing the issue. BTW: its essential that the #menu is positioned relative to the #wrapper as i want it to appear further down in the HTML code for SEO purposes. Thanks in advance An old site, http://www.naausa.org, doesn't work properly in IE7 as the hover links don't go over the changing image. It seems to be because of the IE bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html The site and code is ugly (inline CSS, tables, etc.), but I don't want to reinvent the wheel; I just want to solve the problem and get it over with. I've tried several things with no luck. Can anyone take a gander at the source code and give me a hint? Thanks, Jeremy |
|||||||