z-index ie

@toshogJul 22.2006

hi all…

can somebody point the obvious please…

in the url below why is the z-index for the <li>s not working in ie?!
~~[url]~~http://guey.el.net/k/tests/wtab.html[/url]

i know it looks bad in firefox but for now i’d just like to know why the red border on <li>s is not above the content box.
i have set up a z-index for the div that has the ul in it, for the ul itself and also for the <li>s but it’s still not showing on top….

thanks…

to post a comment

CSS

3 Comments(s) _↴

@WebJoelJul 22.2006 — #I think that z-index is meant more for content (e.g., images), not for layout (borders with colors, etc.).

There is probably another way to acheive this. I'll try a few things.

(back)

the biggest thing probably is to get a valid !doctype in there. I know that you have something that says "!doctype" ("<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN",>"), but it looks incomplete. You need a 'flavor' ("loose", "transitional" or "strict"), and a URL from which to draw that data from when there [I]is [/I]a question...

By just changing that, (below), I'm getting a totally different page now in both IE and Fx... before I start changing things with the code, -try this and is it getting closer to what you are after? ?

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
 <head>
 
 <style type="text/css">
 #center {
 margin: 20px 0;
 padding:0;
 float: left;
 width: 429px;
 border-right: 1px dotted #999;
 border-left: 1px dotted #999;
 }
 #right {
 margin: 20px 0;
 padding:0;
 float: left;
 width: 320px;
 /*border: 1px solid red;*/
 }
 #tab-container {
 margin:-17px 10px 20px 10px;
 padding:0;
 }
 
 #tab-nav {
 margin:0;
 padding:0;
 z-index:7;
 width:100%;
 }
 
 #tab-nav ul {
 z-index:9;
 display:block;
 clear:both;
 margin:0;
 padding: 0 10px;
 float: right;
 list-style:none;
 }
 
 #tab-nav ul li {
 z-index:11;
 display:inline;
 float:left;
 margin:0 2px;
 padding: 5px;
 border:1px solid red;
 background: #fff;
 }
 
 #tab-content {
 margin:-1px 0 0 0;
 font: normal 1.3em/1.2 georgia;
 border: 1px solid #ccc;
 background: #f1f1f1;
 padding: 7px 7px 0;
 }
 
 #tab-content div {
 position: relative;
 display: none;
 /*border:1px solid red;*/
 margin:0;
 padding:0;
 /*height:100%;*/
 }
 
 #tab-content p {
 padding:0;
 margin:5px 0 20px;
 font: 1em/1.2 times;
 height:100%;
 }
 
 #tab-content p a {
 font: 1.3em/1.1 georgia;
 text-decoration:none; 
 color:#235ab6;
 }
 
 #tab-content ul li {
 margin: 4px;
 width: 100%;
 }
 
 #tab-content ul li a {
 text-decoration:none; 
 color:#235ab6;
 }
 
 </style>
 
 <title></title>
 </head>
 <body>
 <div id="center">
 <h1 style=
 "margin:0 10px;border-top:1px dotted #ccc;font:1.9em georgia;background:#F6F6F6;padding:5px; color:#000">
 Film</h1>
 <div>
 <div id="tab-container">
 <div id="tab-nav">
 
 <ul>
 <li id="li0" style=
 "background: #f1f1f1;border-bottom: 1px solid #f1f1f1"><a onclick=
 "doStuff('37','li0');" style=
 "font:normal 1.3em verdana;color:#6489A5;">interviews</a></li>
 <li id="li1"><a onclick="doStuff('40','li1');" style=
 "font:normal 1.3em verdana;color:#6489A5;">news</a></li>
 <li id="li2"><a onclick="doStuff('31','li2');" style=
 "font:normal 1.3em verdana;color:#6489A5;">reviews</a></li>
 </ul>
 </div>
 <div id="tab-content">
 <div id="37" style="display:block">
 <p><img src="images/movies/actors/redford/main.jpg" height="90"
 style="float:right;margin:0 0 0 10px"> <a href="#">Robert Redford
 Bears Another life In His Latest</a><br>
 In "An Unfinished Life," legendary actor Robert Redford tackles a
 character he's wrestled with before, a massive bear. Though, in
 this film he plays co-star Jennifer Lopez's father in law...</p>
 <p><img src="images/movies/actors/herzog/herzog_w.jpg" height="90"
 style="float:right;margin:0 0 0 10px"> <a href="#">Werner Herzog-
 Into The Wild</a><br>
 Although veteran German director Werner Herzog solidly established
 his reputation on hardnosed arthouse ...</p>
 &nbsp;<span style="font-size:.9em">more interviews:</span><br>
 <ul>
 <li><a href="#">Jessica Alba Steps Into The Blue...</a></li>
 <li><a href="#">Dakota Fanning Lives Out Her Dreams</a></li>
 <li><a href="#">Israeli Director Eran Riklis' Global
 Honeymoon</a></li>
 </ul>
 </div>
 </div>
 </div>
 </div>
 </div>
 
 </body>
 </html>[/code]

@toicontienJul 22.2006 — #No, z-index support in Internet Explorer is just plain janked. By default, IE-Win layers elements according to where they appear in the HTML document, with elements appearing later in the HTML file having a higher "natural z-index" than preceding elements. A quick example may be in order:

[code=html]
 <div class="layer" style="z-index: 1000;"></div>
 <div class="layer" style="z-index: 1;"></div>
 [/code]

We're going to assume the .layer class positions both DIVs absolutely, and in the same spot on the page. The second DIV has a z-index of 1, so in Standards Browsers the second DIV appears below the first. IE-Win does just the opposite. The second DIV, since it comes later in the HTML file than the first DIV, appears on top of the DIV with a z-index of 1000.

The only way to fix this behavior is to assign a z-index value using JavaScript and the .zIndex DOM property. This is a viable solution if this quirk is caused by positioning for a DHTML menu, but if no javascript is involved at all, then JS is not the answer. You many have to do some hacking.

@toshogauthorJul 22.2006 — #I think that z-index is meant more for content (e.g., images), not for layout (borders with colors, etc.)[/QUOTE]

thanks... but if you look at:

http://guey.el.net/k/tests/tabs1.html

the styles are pretty much the same and it seems to show up fine on windows' ie too... ideas?!

Also in #CSS _↴

same old story... IE6 messing up format How can I build that in CSS?reCaptcha not centering

Success!

Help @toshog spread the word by sharing this article on Twitter...

Tweet This

z-index ie

3 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

z-index ie

3 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #CSS _↴