Practical CSS tab lesson and IE7

HTML & CSS
1

Hi,
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:

#header{
width:100%;
background-color:#000;
float:left;
position: relative;
}

This is the navigation:

.primary-nav{
background:#fff;
}

.primary-nav li{
display:inline;
}

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

}

.primary-nav span{
padding:7px 15px;
display:block;
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.

2

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.

3

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.

4

Here’s the page with html and css:

http://privat.bahnhof.se/wb846624/TEST/

5

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

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

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

7

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

8

I have updated it now.

9

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:

10

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

11

Ah, I forgot to mention to remove this:

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

Remove? Cant fint that in the css file.

13

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

14

This is what I find at line 43:

.primary-nav{
background:#fff;

}

15

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

16

Delete what? Now I am confused :slight_smile:

17

Delete this from your CSS file:

.primary-nav{
background:#fff;
}
18

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

19

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.

20

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