Practical CSS tab lesson and IE7

I have been following Russ Weaklys course Practical CSS and tried to create a main navigation with tabs. It works just fine for every browser except IE 7 and IE 6.

I have put the nav in the header and it is supposed to be at the very bottom of the header. In IE7 and 6 it will “jump” up maybe 10 pixels or so.

This is my CSS:

position: relative;

This is the navigation:


.primary-nav li{

.primary-nav a{
margin:0 2px 0 0;
background:white url(images/xxx.png) no-repeat left top;


.primary-nav span{
padding:7px 15px;
background: url(images/xxx.png) no-repeat right top;


Check out the attached images too se what I mean. I guess I need some CSS rule to make it work, but I cant figure out which one.

Hi razzel. Could you post your full CSS and HTML? There’s something missing in your CSS, as something must be pushing the nav down to the bottom of the header.

Hi and thanks for answering!

I want the nav to be at the bottom of the header. The problem is IE6, 7. They will show the nav a little bit up from the bottom.

Here’s the page with html and css:

Looks like it might be the default margin on the UL. Try adding this to your style sheet:

.primary-nav {margin: 0; overflow: hidden;}

That fixed the problem for IE7, but IE 6 is still showing the same problem.

Cool. Could you update the page you linked to above?

I have updated it now.

Oops, sorry; my original code had a typo in it and I edited it, but incorrectly. It was meant to be this:

.primary-nav ul {margin: 0; overflow: hidden;}

Sorry. :slight_smile:

No problem. Changed it, but this really breaks the navigation. Maybe its the overflow that is causing the problem?

Ah, I forgot to mention to remove this:

.primary-nav {
  background: none repeat scroll 0 0 #[COLOR="Red"]FFFFFF[/COLOR];

Remove? Cant fint that in the css file.

It’s in style.css, line 43. :slight_smile:

This is what I find at line 43:



Ah, yes, sorry: Firefox was expanding it for me. OK, delete that line.

Delete what? Now I am confused :slight_smile:

Delete this from your CSS file:


Shouldnt make any difference? Its only a backgroundcolor. I tried the tip. Works on IE 7, not on IE 6 though.

It was needed on good browsers, as that bg color was messing things up.

I dunno about IE Sicks. Maybe see what happens by adding this to your style sheet:

* html #header {height: 150px;}

Or, if that doesn’t work, you could perhaps try

* html #header {display: inline;}

I’m not very good with IE6, and am so over that browser it’s not funny.

Yeah, to bad people are using it. Except for IE9, which is really good.