/    Sign up×
Community /Pin to ProfileBookmark

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[/URL]

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 &amp; 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>[/code]

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 }[/code]

Thanks for your help!

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@invertedpandaAug 15.2005 — To get negative Z indexes to work in FF, give the body tag the following style elements:

<i>
</i> z-index:0;
position:relative;
top:0;
left:0;
top:0;
bottom:0;
Copy linkTweet thisAlerts:
@nbcrockettauthorAug 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.
Copy linkTweet thisAlerts:
@FangAug 17.2005 — 6 body tags! [URL=http://validator.w3.org/check?verbose=1&uri=http%3A//www.keiger.com/news2]Validate[/URL] your document, then come back if the problem persists.
×

Success!

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

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 2.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,

tipper: @neststayhome,
tipped: article
amount: 1000 SATS,
)...