|
CSS - Z-index Problems Please Help!!
Dear all,
Please could anyone help me some issues I am having. I am having problems with an Z-index issue in IE. Please see the website at the following http:// www. pollardsprint .co . uk/PROOF/test_site/index.html On the index.html page there is an Enquiry tab, once clicked, the form goes behind the movie. Also on the history.html, the same thing happens, its goes behind the history timeline. Also on the history page, the Plant List and Art work contents once clicked also go behind the timeline and the drop down navigation menu. Please find the css for the enquiry form, navigation and History container ENQUIRY FORM CSS Code: #zenbox_overlay { top:0; left:0; width: 100%; height: 100%; position: absolute; _position: absolute; z-index: 2; } #zenbox_overlay * { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-style:normal; font-variant:normal; font-size: 12px; color:#333;} #zenbox_main { width: 670px; height: 620px; margin: 0 auto; z-index:2; position:relative; } #zenbox_main div { padding: 5px 20px 0 20px; margin:0; background: #EEE; overflow:none; border-right: solid 2px #000; border-left: solid 2px #000; } #zenbox_main #overlay_header { padding: 0.5em 0.5em 4px 0.5em; background-color:#333; font-weight: bold; height:18px; border: solid 2px #000; border-bottom-width: 0; } #zenbox_main #overlay_header span { float:right; height:20px; padding-right:20px; background: transparent url('/external/zenbox/images/close.png') no-repeat 33px 0; text-decoration:underline; font-size:11px; cursor:pointer; color: #fff; } #zenbox_main #overlay_loading, #zenbox_main #zenbox_iframe { border: solid 2px #000; border-top-width: 0; } #zenbox_main #overlay_loading { font-size: 2em; padding: 1em; text-align: center; } #zenbox_iframe { width: 100%; height: 100%; z-index:2; } #zenbox_screen { top:0; left:0; z-index:1; width: 100%; position: absolute; background-color: #000; opacity: 0.42; filter:alpha(opacity=42); -moz-opacity: 0.42;} #zenbox_tab { top: 33%; width: 120px; height: 84px; cursor:pointer; text-indent:-5000px; position: fixed; z-index: 10000; overflow:hidden; } /* IE won't read ID-and-class selectors like #zenbox_tab.left, so we use just a class: */ .ZenboxTabLeft { left: 0; background-position: right 0; } .ZenboxTabRight { right: 0; background-position: left 0; } #zenbox_tab:hover {background-color: #444;}
NAVIGATION MENU CSS Code: #nav{ float:left; width:1000px; list-style:none; font-weight:bold; background:#55B947; padding-left:20px; height:45px; background:url(../images/nav_bg.jpg) repeat; } #nav li{ float:left; xmargin-right:10px; xmargin-left:20px; position:relative; display:block; padding-top: 10px; padding-right: 5px; border-right: 1px solid #fff; } #nav li a{ display:block; padding:5px; color:#fff; background:#55B947; text-decoration:none; text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Text shadow to lift it a little */ -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; } #nav li a:hover{ color:#fff; background:#0E3D7C; /* Solid colour fall-back */ background:rgba(107,12,54,0.75); /* It'll look nice semi-transparent */ text-decoration:underline; } /*--- DROPDOWN ---*/ #nav ul{ position:absolute; z-index:10; list-style:none; left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */ opacity:0; /* Set initial state to transparent */ -webkit-transition:0.25s linear opacity; /* Make the dropdown fade-in in Webkit */ } #nav ul li{ position:relative; z-index: 99999; padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */ float:none; background:#55B947; } #nav ul a{ white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */ display:block; } #nav li:hover ul{ /* Display the dropdown on hover */ left:0; /* Bring back on-screen when needed */ opacity:1; /* Fade to opaque */ } #nav li:hover a{ /* Set styles for top level when dropdown is hovered */ background:#55B947; /* Solid colour fall-back */ e semi-transparent */ text-decoration:underline; } #nav li:hover ul a{ /* Override some top level styles when dropdown is hovered */ text-decoration:none; -webkit-transition:-webkit-transform 0.075s linear; } #nav li:hover ul li a:hover{ /* Set styles for dropdown when items are hovered */ background:#333; /* Solid colour fall-back */ background:rgba(51,51,51,0.75); /* It'll look nice semi-transparent */ text-decoration:underline; -moz-transform:scale(1.05); -webkit-transform:scale(1.05); }
CSS CODE FOR THE HISTORY TIMELINE CONTAINER Code: position:relative; width:960px; text-align:center; margin-bottom: 30px; z-index:1000; Similar TutorialsHi, I thought this would be a no brainer, but for some reason my z-indexes aren't working. I have a wrapper div, and inside this div I have about 3 other divs. Each div has to be layered in a specific order. I thought that the lower the z-index, the lower the stacking order? But for some reason, Here's my CSS:: Code: #header {
z-index:300; position:absolute; margin;0, 0, 0, 167px;
float:right;
background-image:url("images/common/Catsheader.gif"); }
#footer {
margin-top:315px;
z-index:998;
height: 87px;}
.push { height:87px; clear:both; }
#content{
z-index:1;
position:absolute;
margin: 0 0 0 0;
padding:0 0 0 0;
width: 770px;
height: 602px; }
Here's the site so far :: link The flash movie should be behind the footer and header, but it is showing up on top. Please tell me what I am doing wrong. thanks I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
I'm wanting to put three items together with different z-indexes. The first div contains another div and a paragraph, all are positioned absolutely. I want the 2nd div to be higher than the p. The html is as follows: Code: <div id="sticker"> <div></div> <p>Text</p> The css is as follows: Code:
div#sticker {width:146px; height:140px; background:url("stickerbase.png") no-repeat top left; position:absolute; top:20px; left:20px; z-index:10;}
div#sticker div {width:115px; height:67px; background:url("stickerflap.png") no-repeat top left; z-index:20;}
div#sticker p {position:absolute; top:40px; left:20px; z-index:15; background-color:#06c;}
An example is at www.wattersisere.co.uk/devshed I want the text with the blue background to be behind the flap of the sticker! I even tried it out with an online z-index checker and couldn't get their code to do it. Thanks, Watters I worked it out, I had missed the position:absolute off the 2nd div. 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 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 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? 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? 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. 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 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>
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 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. 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 I am making a list of arrangements, and want a div containing further info to pop up, when you click the arrangement. To make sure the info-box is on top of the other DIVs, i have set z-index to 1. But i have a couple of scripts on the page, and they are allways places on top. I there a way to go around this? + Is it possible with a few simple changes to this script: Code: <script type="text/javascript"><!--
function showHide(boxName) {
theBox = document.getElementById(boxName);
if (theBox.className == "boxVisible") {
theBox.className = "boxHidden";
} else {
theBox.className = "boxVisible";
}
}
//-->
</script>
<body>
<a href="news" onclick="showHide('news'); return false;">News</a>
</body>
So the target changes back, when the link is inactive. I've tried this: Code: <body> <a href="news" onmouseover="showHide('news'); return false;">News</a> </body>
But then i have to pass the link again, to close the window again. [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? http://www.concrete-creative.com/test/recipe.html When you hover over PRINT RECIPE, the text of the link below shows through the popup menu... I have tried everything I can think of in terms of adding z-index to different elements and I just can't get it working on IE6 (works fine elsewhere) What am I missing? The HTML is he Code:
<div id="navig2"><table width="150" border="0" cellspacing="0">
<tr>
<td>
<ul id="pop-out-nav2">
<li><a href="#">PRINT RECIPE</a>
<ul>
<li><a href="javascript:openAWindowRecipe3x5('print_recipe3x5.html','newWin1',420,700,1)"><img src="images/spacer.gif" alt="" width="40" height="1" border="0">print 3x5</a></li>
<li><a href="javascript:openAWindowRecipe4x6('print_recipe4x6.html','newWin1',493,700,1)"><img src="images/spacer.gif" alt="" width="40" height="1" border="0">print 4x6</a></li>
<li class="last"><a href="javascript:openAWindowRecipeFull('print_recipefull.html','newWin1',650,700,1)"><img src="images/spacer.gif" alt="" width="30" height="1" border="0">print full page</a></li>
</ul>
</li>
<li><a href="recipecomments.html">VIEW COMMENTS (0)</a></li>
<li><a href="javascript:openAWindowEmails('add_comment.html','newWin1',420,220,1)">ADD A COMMENT</a></li>
<li><a href="javascript:openAWindowEmails('add_personalnote.html','newWin1',420,220,1)">ADD A PERSONAL NOTE</a></li><!-- would say EDIT PERSONAL NOTE if you already have one there -->
<li><a href="#">FLAG RECIPE</a>
<ul>
<li><a href="#" class="radio"><input type="radio" name="flag" value="red" selected><img src="images/icon_flag-red_sm.jpg" alt="" width="13" height="13" border="0"><input type="radio" name="flag" value="green"><img src="images/icon_flag-green_sm.jpg" alt="" width="13" height="13" border="0"><input type="radio" name="flag" value="yellow"><img src="images/icon_flag-yellow_sm.jpg" alt="" width="13" height="13" border="0"><br><input type="radio" name="flag" value="none"><img src="images/no-flag.gif" alt="" width="30" height="13" border="0"></a></li>
<li class="last"><a href="javascript:openAWindowHelp('help_flag.html','newWin1',430,380,1)"><img src="images/spacer.gif" alt="" width="45" height="1" border="0">help?</a></li>
</ul>
</li>
</li>
</ul>
</td>
</tr>
</table>
</div>
And the CSS code: Code:
/* RIGHT HAND NAV BOX */
#navig2 {
float: right;
display: block;
width: 150px;
/* height: 32px; */
border : 2px dashed #b0b080;
background-color : #d1d9d1;
z-index : 0;
}
#pop-out-nav2 {
z-index : 3;
}
#navig2 ul {
float: left;
margin: 0 0 0 0;
padding: 0;
list-style: none;
font: 9px verdana, arial, sans-serif;
font-weight: bold;
}
#navig2 ul li {
float: left;
position: relative;
text-decoration: none;
margin: 0;
padding: 0;
border-bottom: 0;
}
#navig2 ul li a {
display: block;
text-decoration: none;
font-weight: bold;
padding: 8px;
color: #666633;
}
#navig2 ul li a:hover {
text-decoration: underline;
font-weight: bold;
padding: 8px;
color: #666633;
}
#navig2 ul li.active {
padding: 8px;
background-color : #d1d9d1;
font-weight: bold;
color: #666633;
}
#navig2 li ul {
position: absolute;
float: right;
left: 0;
display: none;
width: 110px;
z-index:100;
}
/* subnav padding & size */
#navig2 li ul li a {
position: relative;
width: 120px;
padding: 3px;
}
#navig2 li:hover ul, #navig2 li.over ul {
display: block;
left: 50;
top : 20;
}
/* topnav color when dropdown is showing */
#navig2 li:hover a, #navig2 li.over a, #navig2 li ul li:hover a, #navig2 li ul li.over a {
background-color : #d1d9d1;
color: #666633;
}
/* subnav default link */
#navig2 li:hover ul a, #navig2 li.over ul a {
font-family: verdana, arial, sans-serif;
font-size: 9px;
padding: 3px;
font-weight: normal;
background-color: #FFFFFF;
color: #666633;
border-top : 1px solid #b0b080;
border-left : 1px solid #b0b080;
border-right : 1px solid #b0b080;
text-align : left;
}
#navig2 ul li ul li.last a {
border-bottom : 1px solid #b0b080;
}
/* subnav default link under active */
#navig2 li.active:hover ul a, #navig2 li.active ul a {
background-color: #FFFFFF;
color: #666633;
padding: 3px;
font-weight: normal;
text-decoration: none;
}
/* subnav hover link */
#navig2 li:hover ul li:hover a, #navig2 li ul li a:hover {
/* background-image: url(images/nav_bg_transp.png); */
padding: 3px;
background-color: #FFFFFF;
color: #666633;
font-weight: normal;
text-decoration: underline;
}
/* subnav hover link under active */
#navig2 li.active:hover ul li:hover a, #navig2 li.active ul li a:hover {
/* background-image: url(images/nav_bg_transp.png); */
padding: 3px;
background-color: #FFFFFF;
color: #666633;
font-weight: normal;
text-decoration: underline;
}
In my website i have used a minus value for three div tags with absolute positions contained in a parent div. i have done this to allow me to use multiple background images in an automatically heighten content wrapper. image on top, image below and repeating image between. you can see for yourself at imatechi.co.uk, its the writen block inside the box. apparently using neg values in the z-index causes problems with various browsers, so im wondering if there is another way to do this. thank you flos i have 2 menus on my page. one is a vertical sliding menu & other is a floating menu. i want the vertical sliding menu to slide over the floating menu. i tried giving the floating menu a z-index of -2 since the vertical menu has z-index of -1. but it doesn't work coz the floating menu disappears. the vertical menu is written with tables while the floating menu has a div tag around it. this is the style for the vertical menu Code:
table.topnav
{position: relative;
top: 0;
left: 0;
padding-left: 2px;
}
table.menu
{position: absolute;
bottom: 0;
z-index: -1;
}
.pad{padding-top: 2px;}
.banner{z-index: 1;
position: relative;}
and this is the style for the floating menu Code:
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>
thank you xia |
|||||||