Menu
Community /Pin to ProfileBookmark
@nbcrockettAug 16.2005 — #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.
z-index not working
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.
[URL=http://www.keiger.com/news2]http://www.keiger.com/news2
Here’s the code for the page. I took out parts to make it shorter, but left all the important parts.
HTML Code:
[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.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://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:
[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!
Sign in
to post a comment3 Comments(s) ↴
0
@nbcrockettAug 16.2005 — #