Absolute position problem in IE7/8

HTML & CSS
1

So I am working on my new portfolio site and everything looks great in Firefox, Safari, Chrome etc. IE 7/8 is what is the issue for me right now.

The issue is I have a header and a nav section that is getting pushed down the page. All the other elements on the page look great, just these 2 things. I am pulling my hair out trying to solve it. I have created an IE only style sheet to deal with it, but I am having no luck. I will post the code as it stands now for the problem areas:

Here is the HTML code:


<h1><a href="index.php">Arteye</a></h1>
<div id="navdad">
<div id="lnav">
<ul id="leftnav">
	<li><a href="projects.php" id="proj">Projects</a></li>
	<li><a href="about.php" id="about">About Me</a></li>
	<li><a href="devotion.php" id="dev">Devotion</a></li>
</ul>
</div>
<div id="rnav">
<ul id="rightnav">
	<li><a href="thoughts.php" id="brain">Thoughts</a></li>
	<li><a href="respect.php" id="resp">Respect</a></li>
	<li><a href="contact.php" id="intouch">Contact</a></li>
</ul>
</div>
</div>

The current CSS for these problem items:


h1 {  background: url(imgs/ae_top_logo.png) no-repeat; position:absolute; display: inline; float: left; left: 50%; margin: 12px 0 0 -385px; width: 769px; height: 210px; z-index:1; text-indent: -10000px; }
h1 a { display: block; height: 131px; overflow: hidden; text-indent: -10000px; width: 100%; }
#navdad { position:absolute; height: 43px; left: 50%; margin: 158px 0 0 -413px; width: 826px; z-index:3; display:inline; }

If anyone has any suggestions, I would be most grateful. I don’t want to not address IE users coming to my site as much as we all dislike the browser!

Thanks!

2

header and a nav section is getting pushed down the page. All the other elements on the page look great,
Hi,
We need to see the page to see what is going on. Please post a link if you have it online.

Running the posted code by itself renders the same in FF and IE.

For starters though you can take that inline display and float off the H1 because the absolute position wins out.

3

sure thing on the link. Here it is: http://www.arteye.com/client/csspost/

4

Hi,
Let’s get rid of that absolute positioning on the H1 & #navdad div and let everything from there down be static blocks. Then center them with auto margins and lift that navdad div up with a negative top margin.

These changes get it working for me in FF and IE -


h1 {  
background: url(imgs/ae_top_logo.png) no-repeat;   
[B]margin: 12px auto 0; [/B]
width: 769px; 
height: 210px; 
text-indent: -10000px; 
}
#navdad {
height: 43px;  
[B]margin: -64px auto 0; [/B]
width: 826px; 
}
#lnav { 
position:relative; 
float: left; 
[B]margin:0; [/B]
width: 297px; 
height: 43px; 
z-index:8; 
}
#rnav { 
position:relative; 
float: right; 
[B]margin:0; [/B]
width: 291px; 
height: 43px; 
z-index:9; 
}

#container {  
[B]margin: 0 auto; [/B]
width: 960px; 
text-align: left; 
[B]overflow:hidden;/*contain floats*/[/B]
}
#hpf {  
background: url(imgs/hp_feature.png) no-repeat; 
[B]float: left; 
margin: 20px 0 0 0; [/B]
width: 960px; 
height: 26px;
}
#hpfeature {  
background: url(imgs/hp_feature_pama.jpg) no-repeat;  
[B]float: left; 
margin: 6px 0 0 0; [/B]
width: 960px; 
height: 457px; 
}
5

That worked as far as keeping it in tact for Firefox, it still looks messed up for me in IE. I added in your code as you mentioned. I get what you mean here but don’t understand why it is still being crazy in IE… I tried 7 and 8.

6

Wait! It does work. I forgot to take out all the stuff I was forcing in the IE only style sheet! Thanks for your advice. This worked nicely and makes sense over how I was doing it. I think I was making it more difficult than it needed to be.

7

Glad it worked out for you! :slight_smile:

Yeah, I forgot about that IE stylesheet you were using, I did not even use it when I was testing your code on my local machine.

There were a lot of other things that could have been cleaned up in your css but I will leave that to you. Just remember that when you set a float on an element or if it is a div there is no need to declare display;block; since they are block levels by default.

No need to set floats along with absolute positioning either, position:absolute; carries more weight and negates the float.

Cheers