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. http://www.firefuel.co.uk/a

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
  • 114 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by spookies
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.