I've got a div with a background image that's a link and for some reason it's showing on top of a layer that it shouldn't be. I've set the z-index of the div that contains that div to -1 and this works for everything else on the page, but not this one element. If I set the div that's a link to -1 it does what I want it to in IE except it's not a link anymore and the hover no longer works. In FireFox the div disappears all together if I do it this way.
I know this is probably really confusing so here's a link to the page I'm talking about. The div I'm talking about is the Subscribe button and if you put your mouse over the Resources and Support button you'll see that the drop down menu falls behind the subscribe button and on top of everything else.
<!-- m --><a class="postlink" href="http://www.keiger.com/news2">http://www.keiger.com/news2</a><!-- m -->
Here's the code for the page. I took out parts to make it shorter, but left all the important parts.
HTML Code:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>News Releases & Newsletters from Keiger Printing Company</title>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.keiger.com/screen.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<!-- #include file="Header.html" -->
<div align="center">
<div id="Container">
<div id="NewsLeft"></div>
<div id="NewsRight">
<span class="SectionHeaders">Newsletters</span><br>
<hr color="00305C">
<div class="ColumnText">
<div id="ButtonBox">
<div class="Subscribe">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://direct.keiger.com/xmpiesite/keiger.com/email/createemail.asp?strValue=sub" target="_Blank"></a>
</div>
</div>
<hr>
<hr class="Clear">
</div>
</div>
<div id="CenterLine"></div>
<div class="Clear"></div>
</div>
</div>
<!-- #include file="Footer.html" -->
</body>
</html>
CSS Code:
#Container {
text-align: left;
margin-top: 40px;
margin-bottom: 40px;
z-index: -1;
width: 760px }
.SectionHeaders {
color: #00305c;
font-size: 24px;
text-align: center }
#NewsLeft {
text-align: center;
width: 350px;
float: left }
#NewsRight {
text-align: center;
width: 350px;
float: right }
#CenterLine {
background-color: #00305c;
margin-right: 376px;
margin-left: 376px;
width: 2px;
height: 850px }
.ColumnText {
text-align: left }
#ButtonBox {
width: 350px;
height: 50px }
.Subscribe a:link {
font-size: 32px;
line-height: 32px;
text-decoration: none;
background-image: url(WebImages/Buttons/subscribe.gif);
background-repeat: no-repeat;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 110px;
position: absolute;
width: 129px;
height: 32px }
.Subscribe a:visited {
font-size: 32px;
line-height: 32px;
text-decoration: none;
background-image: url(WebImages/Buttons/subscribe.gif);
background-repeat: no-repeat;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 110px;
position: absolute;
width: 129px;
height: 32px }
.Subscribe a:hover {
font-size: 32px;
line-height: 32px;
text-decoration: none;
background-image: url(WebImages/Buttons/subscribe-over.gif);
background-repeat: no-repeat;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 110px;
position: absolute;
width: 129px;
height: 32px }
Thanks for your help!To get negative Z indexes to work in FF, give the body tag the following style elements:
z-index:0;
position:relative;
top:0;
left:0;
top:0;
bottom:0;The negative z-index is already working in FireFox, but I tried it anyway and It still doesn't work. I get the same problem as before plus the drop down menus in FireFox are moved down about 5 pixels.6 body tags! Validate (<!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http%3A//www.keiger.com/news2">http://validator.w3.org/check?verbose=1 ... .com/news2</a><!-- m -->) your document, then come back if the problem persists.
I know this is probably really confusing so here's a link to the page I'm talking about. The div I'm talking about is the Subscribe button and if you put your mouse over the Resources and Support button you'll see that the drop down menu falls behind the subscribe button and on top of everything else.
<!-- m --><a class="postlink" href="http://www.keiger.com/news2">http://www.keiger.com/news2</a><!-- m -->
Here's the code for the page. I took out parts to make it shorter, but left all the important parts.
HTML Code:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>News Releases & Newsletters from Keiger Printing Company</title>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.keiger.com/screen.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<!-- #include file="Header.html" -->
<div align="center">
<div id="Container">
<div id="NewsLeft"></div>
<div id="NewsRight">
<span class="SectionHeaders">Newsletters</span><br>
<hr color="00305C">
<div class="ColumnText">
<div id="ButtonBox">
<div class="Subscribe">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://direct.keiger.com/xmpiesite/keiger.com/email/createemail.asp?strValue=sub" target="_Blank"></a>
</div>
</div>
<hr>
<hr class="Clear">
</div>
</div>
<div id="CenterLine"></div>
<div class="Clear"></div>
</div>
</div>
<!-- #include file="Footer.html" -->
</body>
</html>
CSS Code:
#Container {
text-align: left;
margin-top: 40px;
margin-bottom: 40px;
z-index: -1;
width: 760px }
.SectionHeaders {
color: #00305c;
font-size: 24px;
text-align: center }
#NewsLeft {
text-align: center;
width: 350px;
float: left }
#NewsRight {
text-align: center;
width: 350px;
float: right }
#CenterLine {
background-color: #00305c;
margin-right: 376px;
margin-left: 376px;
width: 2px;
height: 850px }
.ColumnText {
text-align: left }
#ButtonBox {
width: 350px;
height: 50px }
.Subscribe a:link {
font-size: 32px;
line-height: 32px;
text-decoration: none;
background-image: url(WebImages/Buttons/subscribe.gif);
background-repeat: no-repeat;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 110px;
position: absolute;
width: 129px;
height: 32px }
.Subscribe a:visited {
font-size: 32px;
line-height: 32px;
text-decoration: none;
background-image: url(WebImages/Buttons/subscribe.gif);
background-repeat: no-repeat;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 110px;
position: absolute;
width: 129px;
height: 32px }
.Subscribe a:hover {
font-size: 32px;
line-height: 32px;
text-decoration: none;
background-image: url(WebImages/Buttons/subscribe-over.gif);
background-repeat: no-repeat;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 110px;
position: absolute;
width: 129px;
height: 32px }
Thanks for your help!To get negative Z indexes to work in FF, give the body tag the following style elements:
z-index:0;
position:relative;
top:0;
left:0;
top:0;
bottom:0;The negative z-index is already working in FireFox, but I tried it anyway and It still doesn't work. I get the same problem as before plus the drop down menus in FireFox are moved down about 5 pixels.6 body tags! Validate (<!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http%3A//www.keiger.com/news2">http://validator.w3.org/check?verbose=1 ... .com/news2</a><!-- m -->) your document, then come back if the problem persists.