|
CSS - Z-index Nightmare In Firefox
Dear all,
I have the following in a web page: A menu (let's call it Menu1) with several links and by its side another menu (Menu2) with some links also. Menu2 is a drop down menu that drops down on top of Menu1 when you click the Menu2 button. Well, it works for Internet Explorer but not for Firefox. The problem: when I try to click on Menu1's links they are not clickeable .............. My divs: #divMenu1 {position:relative; left:701px; top:58px; width:234px; height:485px; z-index:1;} #divMenu2 {position:absolute; width:242px; height:218px; top:76px; left:705px; z-index:2;} Obviously if I do: #divMenu1 {position:relative; left:701px; top:58px; width:234px; height:485px; z-index:2;} #divMenu2 {position:absolute; width:242px; height:218px; top:76px; left:705px; z-index:1;} I cannot click on Menu2's links because the drop down disappears behind Menu1. How can I solve it?? Below, the code. Thanks a lot in advance! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
html {background-color:transparent;}
body {
background-color:transparent;
margin-left: 0px;
margin-top: 0px;
}
#Menu1 {position:relative; left:701px; top:58px; width:234px; height:485px; z-index:1; background-color:yellow;}
#Menu2 {position:absolute; width:0px; height:0px; top:76px; left:705px; z-index:2;}
-->
</style>
</head>
<body>
<div id="Menu1">
<a href="http://www.yahoo.es" target="_blank">Can click this link in FF0</a><br>
<a href="http://www.yahoo.it" target="_blank">CANNOT click this link in FF0</a><br>
<a href="http://www.yahoo.fr" target="_blank">CANNOT click this link in FF1</a><br>
<a href="http://www.yahoo.se" target="_blank">CANNOT click this link in FF2</a><br>
<a href="http://www.yahoo.es" target="_blank">CANNOT click this link in FF3</a><br>
<a href="http://www.yahoo.it" target="_blank">CANNOT click this link in FF4</a><br>
<a href="http://www.yahoo.fr" target="_blank">CANNOT click this link in FF5</a><br>
<a href="http://www.yahoo.se" target="_blank">CANNOT click this link in FF6</a><br>
<a href="http://www.yahoo.es" target="_blank">CANNOT click this link in FF7</a><br>
<a href="http://www.yahoo.it" target="_blank">CANNOT click this link in FF8</a><br>
<a href="http://www.yahoo.fr" target="_blank">CANNOT click this link in FF9</a><br>
<a href="http://www.yahoo.se" target="_blank">Can click this link in FF1</a><br>
<a href="http://www.yahoo.es" target="_blank">Can click this link in FF2</a><br>
<a href="http://www.yahoo.it" target="_blank">Can click this link in FF3</a><br>
<a href="http://www.yahoo.fr" target="_blank">Can click this link in FF4</a><br>
<a href="http://www.yahoo.se" target="_blank">Can click this link in FF5</a><br>
<a href="http://www.yahoo.es" target="_blank">Can click this link in FF6</a><br>
<a href="http://www.yahoo.it" target="_blank">Can click this link in FF7</a><br>
<a href="http://www.yahoo.fr" target="_blank">Can click this link in FF8</a><br>
<a href="http://www.yahoo.se" target="_blank">Can click this link in FF9</a><br>
<a href="http://www.yahoo.es" target="_blank">Can click this link in FF10</a><br>
<a href="http://www.yahoo.it" target="_blank">Can click this link in FF11</a><br>
<a href="http://www.yahoo.fr" target="_blank">Can click this link in FF12</a><br>
<a href="http://www.yahoo.se" target="_blank">Can click this link in FF13</a><br>
</div>
<div id="Menu2">
<iframe src="http://www.vlogplaza.com/test/flash/menu.html" id="ifrmenu2" name="ifrmenu2" scrolling="no" width="262px"
height="218px" frameborder="0" allowtransparency="yes">
</iframe>
</div>
</body>
</html>
Similar TutorialsHave been bashing my head against the wall now for a few hours trying to solve this, as it's "the last piece of the puzzle" at the moment. Here is the issue: Code: http://img5.imageshack.us/my.php?image=iebugtj3.jpg (Sorry about this, had to put it in code to post the link) As you can see, it works perfectly in "all" other browsers, but... yeah... you know... >.> Nore sure how much of the code is needed to fix this, but here is the most relative code... HTML Code: <style type="text/css" media="screen">
#selectedTab
{
background: url("./images/layout/tabSelected.png") no-repeat;
height: 66px;
width: 129px;
position: relative;
top: -89px;
left: <?PHP echo $tabPos ?>px;
z-index: 5;
}
#selectedTab a
{
position: relative;
/* Special fix for the "ISO-sertifikat" string */
<?php
if ($_GET['nav'] == "isosert")
echo "top: 10px;";
else
echo "top: 15px;";
?>
left: <?PHP echo $tabTxtPos ?>px;
}
</style>
<!-- END CUSTOM MENU STYLE -->
<body>
<div id="pattern">
<!-- START HEADER -->
<div id="bg_layer2_header">
<div id="banner">
<div id="menu">
<div id="subtabs">
<ul class="menuTabText">
<li class="menuNudge"><a href="home.phtml?nav=omoss">Om Oss</a></li>
<li class="menuNudge"><a href="home.phtml?nav=nyheter">Nyheter</a></li>
<li class="menuNudge"><a href="home.phtml?nav=tjenester">Tjenester</a></li>
<li class="menuNudge"><a href="home.phtml?nav=kurs">Kurs</a></li>
<li class="menuNudge"><a href="home.phtml?nav=isosert">ISO-sertifisering</a></li>
<li class="menuNudge"><a href="home.phtml?nav=kunder">Kunder</a></li>
<li class="menuNudge"><a href="home.phtml?nav=forhandlere">Forhandlere</a></li>
<li class="menuNudge"><a href="home.phtml?nav=referanser">Referanser</a></li>
<li><a href="home.phtml?nav=jobb">Jobb</a></li>
</ul>
</div>
<div id="selectedTab"><a href="home.phtml?nav=<?PHP echo $_GET['nav'] ?>"><?PHP echo $linkName ?></a></div>
</div>
</div>
</div>
<!-- END HEADER -->
CSS Code: /**==--__ Global __--==**/
*
{
margin: 0;
padding: 0;
}
/**==--__ Layout __--==**/
body
{
background: #636363 url("../images/layout/bg_layer1.png") repeat-x;
height: 100%;
}
#pattern
{
background: url("../images/layout/bg_pattern.png") repeat;
position: absolute;
top: 0px;
left: 0px;
height: auto;
min-height: 100%;
width: 100%;
z-index: -3;
}
/* START HEADER */
#bg_layer2_header
{
background: url("../images/layout/bg_layer2_header.png") no-repeat;
height: 216px;
width: 980px;
margin: 0 auto;
position: relative;
z-index: -4;
}
#banner
{
background: url("../images/layout/banner.png") no-repeat;
height: 184px;
width: 909px;
margin: 0 auto;
position: relative;
top: 32px;
z-index: -2;
}
#menu
{
background: #000 no-repeat;
height: 25px;
width: 877px;
border-top: 1px solid #cbcbcb;
margin: 0 auto;
position: relative;
top: 158px;
}
#subtabs
{
background: url("../images/layout/bg_subMenu.png") no-repeat;
height: 48px;
width: 812px;
position: relative;
top: -28px;
margin: 0 auto;
z-index: -1;
}
#subtabs .menuTabText li
{
list-style: none;
display: inline;
}
.menuTabText /* Subtab links positioning */
{
position: relative;
top: 5px;
left: 16px;
}
.menuNudge
{
margin-right: 44px;
}
/* END HEADER */
I have an image and a popover when the mouse hovers over that image. I want the popover to show under the image. My code works in IE but not firefox. I've been trying to fix this for a couple hours but with no luck. Any help is greatly appreciated Code: #prefButton
{
font-size: 0.7em;
display: inline;
float: right;
margin: 0.4em;
margin-right: 1.0em;
display: block;
height: 30px;
width: 30px;
overflow: hidden;
}
#prefButton .title *
{
display: block;
height: 30px;
width: 30px;
overflow: hidden;
}
#prefButton .title .image
{
background-image: url(pref.gif);
background-repeat: no-repeat;
background-position: top right;
position: relative;
top: -30px;
z-index: 15;
}
#prefPopup
{
display: none;
}
#prefPopup span
{
display: block;
margin: 0.5em 0;
}
#prefPopup.showPopup
{
font-size: 1em;
border-style: solid;
border-width: 1px;
overflow: hidden;
position: absolute;
width: 10.0em;
padding: 0.5em;
display: block;
z-index: 10;
}
<div id="prefButton">
<span class="title"><p></p><span class="image"></span></span>
<div id="prefPopup">Some text goes here</div>
</div>
Hi All, I'm new to the forum and hoping someone can help me. This is the first page I have done using CSS for defining my layout so some patience would be appreciated. I also apologize if this has been discussed somewhere else on the board - I'm not entirely sure what to search for. On the page I have a background set - a nifty little drop shadow effect to frame the main content. Everything works until I try a lower screen resolution - the effect gets cut off depending on the size of the browser window even though the content goes well beyond. I have tried everything I can think of to solve this! Please tell me there is a fix! If not - maybe a fellow web devloper could offer an alternative solution? The website is: iconoclast-band.com/new I've posted a screen of the problem: iconoclast-band.com/new/iconoclast-argh.jpg Stylesheet is at: iconoclast-band.com/new/css/style.css Positioning css is: html, body { min-height: 100%; height: 100%; } body { font: 11px/1.6 Arial, sans-serif; background: url(../images/bg2.png) top center repeat-x !important; background: url(../images/bg2.gif) top center repeat-x; /*stoopid ie*/ padding-left: 1px; margin: 0 auto; overflow: -moz-scrollbars-vertical; } body, h1, h3, p { padding: 0; margin: 0; } #container { background: url(../images/container2.png) top center repeat-y !important; background: url(../images/container2.gif) top center repeat-y; /*stoopid ie*/ width: 791px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; /*stoopid ie*/ } #left { float:left; width: 200px; padding-top: 91px; background: url(images/bg2.png) top center repeat-x !important; background: url(images/bg2.gif) top center repeat-x; /*stoopid ie*/ } #header { background: url(../images/headbg.png) top center no-repeat; background: url(../images/headbg.gif) top center no-repeat; /*stoopid ie*/ height: 91px; width: 361px; padding-left: 30px; margin-bottom: 0 !important; } #content { width: 361px; padding-left: 15px; } #footer { text-align: center; width: 361px; padding-bottom: 20px; } #right { float:left; width:200; margin-top: 81px; } So I'm working on this site. deborahgunn-interiors dot com (new user issue) my problem is that everything works acceptably well in most browsers. IE on the other hand is a freaking nightmare, throwing everything out of position and even things outside of my div container making me scroll considerably just to view the content. If anyone could take a look and give me some pointers that would be great. I have a menu bar that is positioned by css. It works exactly as it should on all browsers, except IE7 http://www.firstpokertips.co.uk/ In IE7 the menu is offset up and to the right of where it should be. Can anyone help. I have been trying for many many hours but just cant work out what is wrong. Alright, here we go again. The page in question... Various screenshots I'm working up a sample for a job I came across. The scenario: He wants a simple layout: top header, left column, mid (main), right column, and bottom header. The width of the body should be no more than 650 pixels and centered. However, he wants the html flow to be in order of: main, top header, left column, bottom header, right column. Obviously is going to require absolute positioning, right? So, using Win XP, I got it to look descent in IE 6, Net 7, and FF 1. Those are the three browser brands he's concerned about; the last two versions of each (didn't specify operating system). Basically, I'm just asking for someone to look at the source code and tell me if there's a simpler way. The way it's set up now, it renders poorly on several different versions of IE, Net, and Moz under other operating systems (which you can view in the screenshots URL above). Plus, the heights are not constant. Meaning that he will always be adding/changing content meaning he'll always have to mess with the positioning. Is this absolutely worthless? Problem is I don't want to give up because it is fun to learn (plus there's two other potential jobs behind it). It's starting to seem, however, that there will be no easy fix and perhaps the answer is unachievable in this situation. Any advice? im using this currently for internet explorer on a mouse over but it doesnt do anything.. the mozilla one works just fine IE Code: filter.progid:DXImageTransform.Microsoft.Alpha(opacity=70); progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310) progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3); Firefox Code: -moz-opacity: 0.7; I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it. The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox? You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html). css Code: Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; } #main-nav html4strict Code: Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div> <div id="main-nav"> The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers. Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem. 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 I am not sure why this is not working but I am trying to nest a div and overlay them. Code:
<style>
.txtImg {
posistion: relative;
z-index: 99;
height: 72px;
width: 100%;
background: url(../../images/roycity-gpl-01.png) no-repeat left;
}
.logo {
position: relative;
z-index: 1;
height: 72px;
width: 100%;
background: no-repeat right;
}
</style>
<div id="txt" class="txtImg" align="left">
<div id="bg-img" class="logo" align="right"></div>
</div>
Does IE not support z-index attributes? I set some z-indexes and it seems to have fixed my issues in firefox, but not in IE. 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? 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. 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 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 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 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 Having an issue with a drop down menu in firefox. I have a nav bar with drop down menus. Just below that is an embedded video. Everything works fine except for the drop down menu is behind the video on firefox. Looks fine in IE. I adjusted the z-index properties to make sure that the nav bar sits on top, but it still sits behind. ??? Is it a glitch of some sort? [sorry for any duplication... I just submitted this to the HTML list but suddenly realized it's really a CSS problem] I have a couple web pages that include relatively long pop-up "help" fields... implemented with the display and index style elements. With Netscape or Safari they look fine, but with IE or Opera, some underlying elements "bleed through"; that is, some elements from a div with a lower z-index, which should be behind, seem to float off the rear document and appear in front of the front document. All of the problem elements seem to be within forms and (probably more importantly) they all seem to be in a DIV other than the DIV containing the pop up. That is each structure looks something like: <div> <div> ... the pop up </div> <div> the rest of this section </div> </div> <div> ... some more stuff </div> the proplems are in the area in which the pop up overlaps later divisons. (not all items so conflict) ... any ideas? Hi, I am trying to position a logo at the foot of http://www.root.lamtha2.co.uk/cssproblem/ If you look at the source it shows, <div id="footer" class="navTextBottom"> <br /> <!-- #BeginLibraryItem "/Library/bottom_nav_bar.lbi" --><a href="index.html">Home</a> | <a href="#">Terms & Conditions</a> | <a href="#">Links</a> | <a href="#">Contact Us</a><!-- #EndLibraryItem --><br /> <span class="copyrightText">Copyright Apex Verhicle Rentals 2006</span><br /> <div id="lamtha2logo"><a href="http://www.lamtha2.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Lamtha2logo','','index_images/designed_by_l2_on.jpg',1)"><img src="index_images/designed_by_l2_off.jpg" alt="Lamtha2 Web Design" name="Lamtha2logo" width="89" height="29" border="0" id="Lamtha2logo" /></a> </div> <!-- end lamtha2logo --> </div> <!-- end footer --> Here is the css #footer { width:760px; font-size:12px; background-image: url(index_images/footer.gif); text-align: center; background-repeat: no-repeat; z-index: -2; } #lamtha2logo { height: 29px; width: 89px; background-repeat: no-repeat; z-index: 2; float: left; padding-left: 10px; margin-bottom: -35px; } Can anyone help me resolve why div #lamtha2logo is beneath div #footer thanks |
|||||||