Header position crazy in internet explorer v7

Get Started
1

Hi everyone,

I’ve been trying to design a job board theme for wordpress so that it looks as similar as possible to the rest of my website. I’m fairly happy with it, the only problem I have is that the design only works in chrome and firefox. Here is the website:
http://careers.smsusyd.com/

As you can see, the header stuffs up in internet explorer. I’m quite a novice at CSS and the way I’ve positioned the header is through:

position: 34px; top: 50px; etc…

Any help appreciated!

Kind regards,
Ronnie

2

Hi welcome to sitepoint. To which IE version are you referring?

3

Hi, wow such a speedy reply!

Anyway, I just figured it out. I used position:absolute instead and it is working fine now in internet explorer version 7. I’ll now test it in ie 6 and 8.

Cheers,
Ronnie

4

Good for you :slight_smile: I didn’t see any problems so you must have just fixed it when I was looking.

5

Ok The problem is back. I updated the theme, and the header is looking crazy again. I’m using a child theme, and the css for the header is:

.navi_list {
clear: both;
position: relative;
right: 175px;
top:0px;

}

Works fine in chrome and firefox. But stuffs up in ie 7 :frowning:

Any help appreciated! The link is http://careers.smsusyd.com/

Kind regards,
Ronnie

6

The best advice I could give you is to avoid using position relative and absolute if not necessary. Your header would be easily done with only this syntax (see below) and positioned with margin.

<!-- Header + View -->
<div id="header">
	<a href="#">Your logo here</a>
    <ul>
		<li><a href="#">Job Seeker</a></li>
		<li><a href="#">Employer</a></li>
    </ul>
</div><!-- Header + View end -->


<!-- First Nav -->
<ul class="menu-header">
	<li><a href="#">Register</a></li>
	<li><a href="#">Login</a></li>
</ul><!-- First Nav end -->


<!-- Second Nav -->
<ul class="menu-header">
	<li><a href="#">Home</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">About Us</a></li>
	<li><a href="#">Events</a></li>
	<li><a href="#">Careers</a></li>
	<li><a href="#">Sponsorship</a></li>
	<li><a href="#">Join</a></li>
	<li><a href="#">Forum</a></li>
	<li><a href="#">Contact Us</a></li>
</ul><!-- Second Nav end -->

	#header { margin: 10px 0 0 0; position: relative;}
	#header a { ... }
	#header ul { position: absolute; right: 0;}
	
	.menu-header { margin: 10px 0;}
	.menu-header li { display: inline; margin: 0 10px 0 0; /* Some margin to space out your links */}
	.menu-header li.last { margin: 0 0 0 0; /* Apply .last to the last link so no margin is applied */}