Check out this image...
<!-- m --><a class="postlink" href="http://www.mididelight.com/new/images/midinewlayout2.gif">http://www.mididelight.com/new/images/m ... ayout2.gif</a><!-- m -->
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?Not unless we see the HTML and CSS
Very true.
Each CSS code is SO different. You could honestly do many things several different ways. Probably should give us a basis.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.Originally posted by mididelight
...I just need to know a fix to allow IE6 to use z-index correctly. It already does...which is why everyone would like to see your code. The problem is elsewhere.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.
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 headerOriginally posted by BeachSide
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 That's probably true but who's to say without seeing the code.I agree. We all could make blind guesses.Originally posted by Triumph
That's probably true but who's to say without seeing the code.
I agree and as you said I am taking a shot in the dark but I was just going with the info providedwell 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.Originally posted by mididelight
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. Well, that's just it, in this case I'm not so sure there is a bug.To illustrate the IE 6 can handle z-index, here's an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Content-Style-Type" content="text/css">
<title>Test Page</title>
<style type="text/css">
<!--
#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;
}
-->
</style>
</head>
<body>
<h1 id="a">Website Header</h1>
<div id="b">A Sidebar</div>
</body>
</html>Originally posted by MstrBob
To illustrate the IE 6 can handle z-index, here's an example: Then we're done here, right? Right.
Moving on.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;
}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;
}Originally posted by toicontien
Not unless we see the HTML and CSS
<div id="header"><img src=http://www.webdeveloper.com/forum/archive/index.php/"img/logo.gif" width="271" height="54" alt="MIDI Delight | Home" /></div>
<!-- ================== Navigation ===================== -->
<div id="nav">
<ul>
<li /><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="">classic rock</a> |
<li /><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="">country</a> |
<li /><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="">modern rock</a> |
<li /><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="">pop / r&b</a> |
<li /><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="">rap / hip-hop</a> |
</ul>
</div>A link to a working page would be just keen.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:
/* -------------- 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;
}Of course you could fix your list items:
<div id="nav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="">classic rock</a> |</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="">country</a> |</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="">modern rock</a> |</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="">pop / r&b</a> |</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="">rap / hip-hop</a> |</li>
</ul>Originally posted by MstrBob
First off, I recommend that you do NOT do that with your li tags. Yeah, we said the same thing.
ok thanks, i will try that.
<!-- m --><a class="postlink" href="http://www.mididelight.com/new/images/midinewlayout2.gif">http://www.mididelight.com/new/images/m ... ayout2.gif</a><!-- m -->
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?Not unless we see the HTML and CSS
Very true.Each CSS code is SO different. You could honestly do many things several different ways. Probably should give us a basis.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.Originally posted by mididelight
...I just need to know a fix to allow IE6 to use z-index correctly. It already does...which is why everyone would like to see your code. The problem is elsewhere.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.
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 headerOriginally posted by BeachSide
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 That's probably true but who's to say without seeing the code.I agree. We all could make blind guesses.Originally posted by Triumph
That's probably true but who's to say without seeing the code.
I agree and as you said I am taking a shot in the dark but I was just going with the info provided
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.Originally posted by mididelight
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. Well, that's just it, in this case I'm not so sure there is a bug.To illustrate the IE 6 can handle z-index, here's an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Content-Style-Type" content="text/css">
<title>Test Page</title>
<style type="text/css">
<!--
#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;
}
-->
</style>
</head>
<body>
<h1 id="a">Website Header</h1>
<div id="b">A Sidebar</div>
</body>
</html>Originally posted by MstrBob
To illustrate the IE 6 can handle z-index, here's an example: Then we're done here, right? Right.
Moving on.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;
}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;
}Originally posted by toicontien
Not unless we see the HTML and CSS
<div id="header"><img src=http://www.webdeveloper.com/forum/archive/index.php/"img/logo.gif" width="271" height="54" alt="MIDI Delight | Home" /></div><!-- ================== Navigation ===================== -->
<div id="nav">
<ul>
<li /><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="">classic rock</a> |
<li /><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="">country</a> |
<li /><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="">modern rock</a> |
<li /><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="">pop / r&b</a> |
<li /><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="">rap / hip-hop</a> |
</ul>
</div>A link to a working page would be just keen.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:
/* -------------- 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;
}Of course you could fix your list items:
<div id="nav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="">classic rock</a> |</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="">country</a> |</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="">modern rock</a> |</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="">pop / r&b</a> |</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="">rap / hip-hop</a> |</li>
</ul>Originally posted by MstrBob
First off, I recommend that you do NOT do that with your li tags. Yeah, we said the same thing.
ok thanks, i will try that.