padding-top not being "displayed" in IE6

[Wuhtzu]

Hey

 

I'm construction a navigation / menu and have problems with IE6 (and IE7, but I'll deal with those later).

 

This is the navigation pulled out of context to simplify the problem:

http://wuhtzu.dk/sandbox/navigation/navigation.html (The problem only shows in IE6)

 

The problem is that in IE6 I can't get proper spacing between the text and the top of the tab as show in #1 and #2. It's like IE6 ignores the padding-top part of padding property:

 

* html #navigation ul li a {
padding: 6px 7px 6px 12px;

#navigation ul li {
padding: 6px 5px 6px 0;

 

#1: Navigation

 

#2: Navigation - marked text

 

#3: Navigation - square tabs

 

I can set the padding-top value to what ever i want: 0, 6px, 50px 100px without the spacing between text and top of the tab changes. However something does change with the padding-top value - it seems to "push" the background images (the ones making the tab slope) upwards. So padding-top: 60px; will make the tabs completely square since the sloping background images are push upwards as shown in #3. So the "element" seems to be extending out of the box some how.

 

Also notice the "height of the li or a element" as shown in #2 where the text has been marked.

 

This is the code:

 

<div id="navigation">
<ul>
	<li><a href="#">Forside</a></li>
	<li id="current">T-Shirts</li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">Information</a></li>
	<li><a href="#">Til kassen</a></li>
</ul>
</div>

 

* html #navigation {
width: 630px;
padding: 0 0 10px 20px;
float: left;
background: #FFFFFF;
font-size: 80%;
}

* html #navigation ul {
text-align: left;
padding: 0 0 20px 0;
}

* html #navigation ul li {
padding: 0 7px 0 0;
border-bottom: none;
display: inline;
background: #FF0068 url("tab_right_norm.gif") no-repeat right top;
}

* html #navigation ul li a {
padding: 6px 7px 6px 12px;
text-decoration: none;
color: #FFFFFF;
background: url("tab_left_norm.gif") no-repeat left top;
font-weight: bold;
}

* html #navigation ul li#current {	
padding: 6px 7px 6px 12px;
background: #FFFFFF;
font-weight: bold;
}

* html #navigation ul li a:hover {
background: url("tab_left_highlight.gif") no-repeat left top;
}

* html #navigation ul li:hover {	
background: #FF0068 url("tab_right_highlight.gif") no-repeat right top;
}

 

Can any of you think of a solution to this problem?

 

Any suggestions will be much appreciated

Wuhtzu

[bronzemonkey]

The problem is that your li and a elements are being displayed inline and not accepting the padding. You need to display them as block elements and so you'll also need to float the li elements left.

[Wuhtzu]

Is it then a "fault" that it is being displayed properly in firefox - accepting the padding even though it is display: inline?

 

http://www.humlebo.org/sleek/alpha_markup/