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:
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.
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 */}