z-index IE6 problem

@mididelightFeb 03.2005

Check out this image…

~~[url]~~http://www.mididelight.com/new/images/midinewlayout2.gif[/url]

I am not trying to code this, which is farely easy, except one part. I have the logo image at the top which overlaps the nav menu. I want to make it do that with CSS.

So I set the z-index of the header div to z-index: 2; and I set the nav z-index to 1. I position the image so that it is in the correct space about the nav menu.

In firefox it looks great but in IE6. The nav menu is pushed down to accomdate the “g” over hang. Which isnt supposed to happen if I am using z-index.

Does anyone know how to remedy this?

to post a comment

CSS

21 Comments(s) _↴

@toicontienFeb 03.2005 — #Not unless we see the HTML and CSS ?

@gumbystationFeb 03.2005 — #Very true.

Each CSS code is SO different. You could honestly do many things several different ways. Probably should give us a basis.

@mididelightauthorFeb 03.2005 — #well thats the thing, it is really basic and I though didnt really need the code. I just need to know a fix to allow IE6 to use z-index correctly.

@TriumphFeb 03.2005 — #[i]Originally posted by mididelight [/i]

[B]...I just need to know a fix to allow IE6 to use z-index correctly. [/B][/QUOTE] It already does...which is why everyone would like to see your code. The problem is elsewhere.

@BeachSideFeb 04.2005 — #So I set the z-index of the header div to z-index: 2; and I set the nav z-index to 1. I position the image so that it is in the correct space about the nav menu. [/QUOTE]

Looks to me like you need to set the Header z-index to 1 and the navigation z-index to 2 so that the nav is on top of the header

@TriumphFeb 04.2005 — #[i]Originally posted by BeachSide [/i]

[B]Looks to me like you need to set the Header z-index to 1 and the navigation z-index to 2 so that the nav is on top of the header [/B][/QUOTE] That's probably true but who's to say without seeing the code.

@gumbystationFeb 04.2005 — #I agree. We all could make blind guesses.

@BeachSideFeb 04.2005 — #[i]Originally posted by Triumph [/i]

[B]That's probably true but who's to say without seeing the code. [/B][/QUOTE]

I agree and as you said I am taking a shot in the dark but I was just going with the info provided ?

@mididelightauthorFeb 04.2005 — #well i need the header to overlapp the navigation. i will get code for all of you to check. but its really no different then what was previously said as a shot in the dark.

I just wanted to know if there was a fix for this IE6 bug.

@TriumphFeb 04.2005 — #[i]Originally posted by mididelight [/i]

[B]well i need the header to overlapp the navigation. i will get code for all of you to check. but its really no different then what was previously said as a shot in the dark. [/B][/QUOTE] Well, that's just it, in this case I'm not so sure there is a bug.

@MstrBobFeb 05.2005 — #[font=trebuchet ms][COLOR=royalblue]To illustrate the IE 6 can handle z-index, here's an example:

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en" dir="ltr"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 &lt;meta name="Content-Style-Type" content="text/css"&gt;
 &lt;title&gt;Test Page&lt;/title&gt;
 &lt;style type="text/css"&gt;
 &lt;!-- 
 #a {
 width:7em;
 background:#d3d3d3;
 margin:0;
 padding:0;
 position:relative;
 z-index:2;
 } 
 
 #b {
 background:#008000;
 width:100%;
 margin:0;padding:1em 0 1em 0;
 position:relative;
 top:-1em;
 z-index:1;
 }
 --&gt;
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;h1 id="a"&gt;Website Header&lt;/h1&gt;
 &lt;div id="b"&gt;A Sidebar&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

[/COLOR][/font]

@TriumphFeb 05.2005 — #[i]Originally posted by MstrBob [/i]

[B][font=trebuchet ms][COLOR=royalblue]To illustrate the IE 6 can handle z-index, here's an example:[/COLOR][/font] [/B][/QUOTE] Then we're done here, right? Right.

Moving on.

@mididelightauthorFeb 05.2005 — #Heres your code that I did.

#header {

width: 764px;

height: 71px;

background: #ccc url(../img/title_bkgd.gif) no-repeat;

z-index: 2;

}

/* -------------- Nav ----------------- */

#nav {

clear: both;

width: 764px;

height: 27px;

background: #99CC99 url(../img/nav_bkgd.gif) repeat-x;

z-index: 1;

}/* -------------- Header ----------------- */

#header {

width: 764px;

height: 71px;

background: #ccc url(../img/title_bkgd.gif) no-repeat;

z-index: 2;

}

#header img {

margin-top: 35px;

margin-left: 10px;

}

/* -------------- Nav ----------------- */

#nav {

clear: both;

width: 764px;

height: 27px;

background: #99CC99 url(../img/nav_bkgd.gif) repeat-x;

z-index: 1;

}

@mididelightauthorFeb 05.2005 — #damn it, maybe i should have checked it first...

Here it is again:

/* -------------- Header ----------------- */

#header {

width: 764px;

height: 71px;

background: #ccc url(../img/title_bkgd.gif) no-repeat;

z-index: 2;

}

#header img {

margin-top: 35px;

margin-left: 10px;

}

/* -------------- Nav ----------------- */

#nav {

clear: both;

width: 764px;

height: 27px;

background: #99CC99 url(../img/nav_bkgd.gif) repeat-x;

z-index: 1;

}

@TriumphFeb 05.2005 — #[i]Originally posted by toicontien [/i]

[B]Not unless we see the [SIZE=4]HTML[/SIZE] and CSS ? [/B][/QUOTE]

?

@mididelightauthorFeb 05.2005 — #<div id="header"><img src="img/logo.gif" width="271" height="54" alt="MIDI Delight | Home" /></div>



<div id="nav">

<ul>

<li /><a href="" title="">classic rock</a> |

<li /><a href="" title="">country</a> |

<li /><a href="" title="">modern rock</a> |

<li /><a href="" title="">pop / r&b</a> |

<li /><a href="" title="">rap / hip-hop</a> |

</ul>

</div>

@TriumphFeb 05.2005 — #A link to a working page would be just keen.

@MstrBobFeb 05.2005 — #[font=trebuchet ms][COLOR=royalblue]First off, I recommend that you do NOT do that with your li tags. What is the point of an empty list? And some browsers have issues with tags closed like that that aren't defined as EMPTY in the DTD.

Elements have to be positioned for the z-index to be of use. If you just want the letters of an image over hanging, I suggest something like this:

<i>
 </i>/* -------------- Header ----------------- */
 
 #header {
 width: 764px;
 height: 71px;
 background: #ccc url(../img/title_bkgd.gif) no-repeat;
 }
 
 #header img {
 margin-top: 35px;
 margin-left: 10px;
 position:relative;
 top:5px;
 z-index: 2;
 }
 
 
 /* -------------- Nav ----------------- */
 
 #nav {
 clear: both;
 width: 764px;
 height: 27px;
 background: #99CC99 url(../img/nav_bkgd.gif) repeat-x;
 position:relative;
 z-index: 1;
 }

[/COLOR][/font]

@TriumphFeb 05.2005 — #Of course you could fix your list items:

[code]<div id="nav">
 <ul>
 <li><a href="" title="">classic rock</a> |</li>
 <li><a href="" title="">country</a> |</li>
 <li><a href="" title="">modern rock</a> |</li>
 <li><a href="" title="">pop / r&b</a> |</li>
 <li><a href="" title="">rap / hip-hop</a> |</li>
 </ul>[/codE]

@TriumphFeb 05.2005 — #[i]Originally posted by MstrBob [/i]

[B][font=trebuchet ms][COLOR=royalblue]First off, I recommend that you do NOT do that with your li tags.[/COLOR][/font] [/B][/QUOTE] Yeah, we said the same thing. ?

@mididelightauthorFeb 07.2005 — #ok thanks, i will try that.

Also in #CSS _↴

Contact form layout Need help badly scrollbars and cursor

Success!

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

Tweet This

z-index IE6 problem

21 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

z-index IE6 problem

21 Comments(s) ↴

Also in #CSS ↴

Success!

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

Social

Version

21 Comments(s) _↴

Also in #CSS _↴