Member Avatar for spookies

Hi

I cannot seem to get a div to sit above a parent div for my top nav - it works in FF and Safari but not IE.

I have adjusted z-index and also tried various positioning but no joy.

Any advice welcome.

CSS
====

#topnavbg {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:34px;
	z-index:100;
	background-image: url(images/bg-topnav.gif);
}
#serv1 {
	position: absolute;
	height: 134px;
	width: 200px;
	left: 47px;
	top: 85px;
	margin-top: 10px;
}
#serv2 {
	position: absolute;
	height: 134px;
	width: 200px;
	left: 298px;
	top: 85px;
	margin-top: 10px;
}
#serv3 {
	position: absolute;
	height: 134px;
	width: 200px;
	left: 549px;
	top: 85px;
	margin-top: 10px;
}
#serv4 {
	position: absolute;
	height: 134px;
	width: 200px;
	left: 47px;
	top: 235px;
	margin-top: 10px;
}
#serv5 {
	position: absolute;
	height: 134px;
	width: 200px;
	left: 298px;
	top: 235px;
	margin-top: 10px;
}
#serv6 {
	position: absolute;
	height: 134px;
	width: 200px;
	left: 549px;
	top: 235px;
	margin-top: 10px;
}
#topnav {
	position:relative;
	left:0px;
	top:0px;
	width:990px;
	height:34px;
	z-index:1000;
	background-image: url(images/bg2-topnav.gif);
}

#topnav1 {
	position:absolute;
	left:677px;
	width:40px;
	margin-top: 8px;
	z-index:2000;

}

#header {
	position:relative;
	left:0px;
	width:990px;
	height:418px;
	z-index:1;
	background-image: url(images/bg-head-home-main.jpg);
}
#services {
	position:relative;
	left:0px;
	width:990px;
	height:392px;
	z-index:2;
	background-image: url(images/bg-services.gif);
}
#contact {
	position:relative;
	left:0px;
	width:990px;
	height:313px;
	z-index:3;
	background-image: url(images/bg-contact.gif);
}
body {
	font-family:Helvetica,Arial,sans-serif;
	text-align: center;
	background-image:url(images/bg-head-home.gif);
	background-repeat:repeat-x;
	margin-top: 0px;
}

html {
	font-family:Helvetica,Arial,sans-serif;
}

h1 {
	color:#FFFFFF;
	font-family:Georgia,serif;
	font-size:24px;
	font-weight:normal;
	line-height:36px;
	margin-top: 0px;
}

h2 {
	color:#458ecb;
	font-family:Arial,serif;
	font-size:14px;
	font-weight:normal;
	line-height:18px;
	margin-top: 0px;
	text-align: left;
}

p {
	font-family:Arial,Helvetica,sans-serif;
	font-size:12px;
	font-weight:normal;
	line-height:16px;
	text-align: left;
	color:#838383;
	margin-top: 0px;
	margin-bottom: 0px;
}


a {
	font-family:Arial,Helvetica,sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align: left;
	color:#3e81c5;
	text-decoration: none;
}

.homehead {
color:#959595;
}
.h2white {
color:#ffffff;
font-weight: bold;
}

.pwhite {
	color:#ffffff;
	font-size: 12px;
}

.more {
	line-height:8px;

}

#container {
	padding: 0px;
	width: 990px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	position: relative;
	left: 0px;
	top: 0px;
}
#footer {
	position:relative;
	left:0;
	width:100%;
	height:auto;
	z-index:1;
	background-color: #3e81c5;
}
#logo {
	position:absolute;
	left:76px;
	top:57px;
	width:198px;
	height:116px;
	z-index:101;
}
#introtextbox {
	position:absolute;
	width:380px;
	height:246px;
	left: 49px;
	top: 172px;
	text-align: left;
	margin-top: 0px;
	border-color: #FFFFFF;
	border: 1px;
}
#phone {
	position:absolute;
	width:225px;
	height:25px;
	left: 0px;
	top: 197px;
	z-index:101;
	margin-top: 0px;
}
#package1 {
	position:absolute;
	left:794px;
	top:85px;
	width:155px;
	height:134px;
	z-index:101;
}
#package2 {
	position:absolute;
	left:794px;
	top:225px;
	width:155px;
	height:134px;
	z-index:101;
}

HTML
=====

<body>	
<div id="topnavbg"></div>
<div id="container">
<div id="logo"><img src="images/logo.gif" alt="firefuel - web solutions devon web design" width="198" height="116" /></div>
    <div id="topnav">
    	<div id="topnav1"><a href="#">home</a></div>
    
    </div>

	<div id="header">
      <div id="introtextbox">
      <h1>Affordable  & friendly, web design & internet services for you and your business.</h1>
      <p class="homehead">Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem</p>
		<!--<h1>Call 9022765726zgf</h1>-->
        <div id="phone"><img src="images/phone.gif" alt="Phone number devon web designer" /></div>
      </div>
    </div>
    
    <div id="services">
      <div id="serv1">
      <h2>Web Design & Development</h2>
      <p>
      <a>We design attractive, usable websites to communicate your message effectively.</a></p>
      
      </div>
      <div id="serv2">
      <h2>Content Management</h2>
      <p>If you need to make regular<br />
        changes, you may invest in a<br />
        system that gives you control.</p>
        
      </div>
      <div id="serv3">
      <h2>E-Commerce</h2>
      <p>Want to sell your products<br />
        online? Call us to discuss your<br />
        ideas and needs.</p>
        
      </div>
      <div id="serv4">
      <h2>Website Hosting</h2>
      <p>Let us take care of your annual<br />
        hosting and email needs with <br />
        servers based in UK data centres.</p>
        
      </div>
      <div id="serv5">
      <h2>Search Engine Optimisation</h2>
      <p>We can advise and act on all<br />
        aspects of SEO to help people<br />
        find your website.</p>
        
      </div>
      <div id="serv6">
      <h2>Also...</h2>
      <p>- Logo design<br />
        - Statistics integration<br />
        - Web Master service</p>
        
      </div>
      <div id="package1"><h2 class="h2white">Small Business<br />
		Starter Package</h2>
		<p class="pwhite">
         - Custom Design<br />
        - FREE yr1 hosting<br />
        - FREE yr1 domain name<br />
        ...plus more
        </p>
        </div>
       <div id="package2"><h2 class="h2white">Bespoke Websites</h2>
		<p class="pwhite">
         Add more to a standard site & customise to meet your own and your clients needs. </p>
        
        
       
        
       </div>
  </div>
    
    <div id="contact"></div>
</div>
<div id="footer">
<p>&nbsp;</p>
<p><a href="page.php">page</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>


</body>
  • 3 Contributors
  • 5 Replies
  • 123 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by spookies

Dani AI

Generated

This is a classic IE stacking-context issue rather than a simple numeric z-index bug. Firefox and WebKit will often let a positioned child render above other ancestors, but older IE versions create separate stacking contexts for positioned ancestors (and sometimes when "hasLayout" is involved). That makes a child’s high z-index powerless if one of its positioned ancestors sits behind another positioned sibling.

Practical steps to try (quick, in-order):

  • Give the nav its explicit vertical placement instead of using margin-top (use top: ... on the absolutely positioned nav item).
  • Remove or temporarily zero out the z-index on the overlapping ancestor (the header) to see if the nav then appears. If that fixes it, fix the stacking by moving the higher z-index to the nearest common ancestor (for example give #container a higher z-index) so the nav’s stacking context is above the header.
  • For IE6/7 test, add zoom:1; to the positioned ancestor to force hasLayout — that often fixes mysterious stacking issues.
  • If none of the above works, take the nav out of the problematic stacking context (place it as a sibling higher in the DOM and overlay it with negative margin or absolute positioning). That reliably sidesteps IE’s quirks.

Notes tied to earlier replies: ’s float idea can work if you refactor the nav into normal flow, but that changes layout and may not suit the visual design. ’s suggestion to simplify backgrounds (move them onto body/container) is good because fewer positioned background layers reduce stacking surprises.

Debug/testing tips: temporarily add opaque background colors and borders to the suspects, use IE’s developer tools to inspect computed position/z-index, and toggling/removing z-index values one at a time will quickly show which ancestor is creating the stacking context to fix.

Recommended Answers

All 5 Replies

Member Avatar for ko ko

Did you validate your HTML? DTD is important for HTML while using with css. You used many absolute position properties. That cause many issues for the browsers. If you want to make a column, you can use 'float', that would help you more than absolute position.

Member Avatar for macneato

Hey spookies,

What i would suggest is, removing #topnavbg and adding it to your body background (at the top). Will get the same effect wouldnt you? another little tip, make your body background width 1px; since you wrapping it horizontally. Went with JPG cause its smaller than a gif :)

Check out attached

bg-head-home.jpg 0.6 KB
Edited by macneato because: typo - as always
Member Avatar for spookies

Hi - Sorry Macneato - im still not explaining myself well enough in these threads - what im trying to do is see my nav items "home" "services" etc appear above my topnav div in IE

<div id="topnav">

<div id="topnav1"><a href="#">home</a></div>

</div>
Member Avatar for ko ko

Did you want to appear 'topnav1' at the right side of it's parent 'topnav' DIV? Use float instead of absolute position. Here is example:

#topnav1 {
        float: right;
        margin-right: -em;
        width: -px
                }

This is easiest way to place 'topnav1' div to the right side of it's parent DIV. Good luck..

Member Avatar for spookies

Hi there

Ive just managed to pick up your replies and experiment, thankyou both for taking the time to have a look. However It's not working for me. Gutted!

I thought about your suggestion Macneato but i couldn't work it out as the home tag deals with the overall BG repeating gif, then there is the div that deals with the gif that has the vertical separators for the top nav and then the div that handles the text links for the topnav.

I just cant get the text items to show above all other divs in IE - Im not sure if it has anything to the z-index.
I have it how i want it in Firefox and just need some guidance to get it sweet in IE:

http://www.firefuel.co.uk/a/

All help very much appreciated.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.