PDA

Click to See Complete Forum and Search --> : IE6 & IE7 display padding in nested spans incorrectly

matt_b
07-27-2009, 03:31 PM
Hi all,

I've been banging my head off the desk for what seems like ages now, and need some help!

I've created a nav bar with rounded corners, which works perfectly in all the latest browsers (FF3/Opera 9/Chrome2/IE8), but in IE6/7 there is something odd going on with padding. I've attached screenshots of the navbar, both working in FF3 and broken in IE7.

The code is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Nav Testing</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
</head>
<body>
<ul id="navigation">
<li><a href="#"><span><span>Home</span></span></a></li>
<li><a href="#"><span><span>Services</span></span></a></li>
<li><a href="#"><span><span>Take a tour</span></span></a></li>
<li><a href="#"><span><span>About us</span></span></a></li>
<li><a href="#"><span><span>Contact us</span></span></a></li>
</ul>
</body>
</html>

*
{
padding: 0;
margin: 0;
border: 0;
}

#navigation li
{
list-style: none;
float: left;
display: block;
padding-top: 20px;
}

#navigation a
{
font-family: "Arial";
text-decoration: none;
font-weight: bold;
color: white;
background: url(tab-left.jpg) left top no-repeat;
padding-left: 9px;
padding-top: 7px;
padding-bottom: 4px;
position: relative;
float: none;
}

#navigation a span
{
background: url(tab-tile.jpg) top repeat-x;
padding-top: 7px;
padding-bottom: 4px;
position: relative;
float: none;
}

#navigation a span span
{
background: url(tab-right.jpg) right top no-repeat;
padding-right: 9px;
position: relative;
float: none;
}

#navigation a:hover
{
background: url(tab-left-orange.jpg) left top no-repeat;
}

#navigation a:hover span
{
background: url(tab-tile-orange.jpg) top repeat-x;
}

#navigation a:hover span span
{
background: url(tab-right-orange.jpg) right top no-repeat;
}

For some reason in IE6/7, the padding seems to be cumulative, such that the images for the a and the two spans are all on the wrong level rather than aligned correctly.

Can someone point me in the right direction? I think the problem is down to Internet Explorer badness, but don't know which "hack" to apply to fix it!

Thanks
Matt
Andyram2k
07-27-2009, 03:48 PM
Hi matt_b,
Do you have a live version of this at all? It would be good to see it with images, to see exactly whats going wrong. Cheers.
criterion9
07-27-2009, 03:54 PM
Have you tried explicitly set the body tag to 0 out the margins and padding? Sometimes wildcard selectors have issues on older browsers.

example:

body{
margin:0px;
padding:0px;
}
matt_b
07-27-2009, 04:05 PM
Hi,

I've made it available online here (http://87.194.132.4:81/navtesting/test.html). Excuse the speed, it's being hosted on a server that's not got much bandwidth.

Thanks
Matt
Andyram2k
07-27-2009, 04:22 PM
Hi matt_b,
I think this is what you're looking for...

http://www.sitepoint.com/article/accessible-menu-tabs/

Also, just on a side note, check the filesize of the graphics you're using. 60kb+ for a tiny image can be re-saved to get down to a few kb, and will load a lot faster than it currently is. Hope this helps :)
matt_b
07-27-2009, 04:22 PM
I tried setting the body to zero padding / zero margin but it had no effect. This problem is very odd..!
Andyram2k
07-27-2009, 04:25 PM
See above, we posted at the same time :)
matt_b
07-27-2009, 04:27 PM
Hi Andy,

That article is where my original code came from, but I've added an extra span element because I need to have a tiled image as a background, rather than a solid colour. I don't see how adding an extra span can cause so many problems though, as it seems to have affected the alignment on all elements?

Matt
matt_b
07-27-2009, 04:47 PM
I've narrowed it down and the selectors that I've added that cause the problem are the padding-top: 7px; and padding-bottom: 4px; in both the #navigation a and #navigation a span.

Any ideas why?

Thanks :)
Matt
Andyram2k
07-27-2009, 06:28 PM
Hi matt_b,
Luckily, i'm use to working with IE6 and its little quirks...

Give this a go:

* {
BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px
}
#navigation LI {
LIST-STYLE-TYPE: none; DISPLAY: block; FLOAT: left; LIST-STYLE-IMAGE: none; PADDING-TOP: 20px
}
* html #navigation LI { /* IE Only */
PADDING-TOP: 13px
}
#navigation A {
POSITION: relative; PADDING-BOTTOM: 4px; PADDING-LEFT: 9px; FONT-FAMILY: "Arial"; BACKGROUND: url(tab-left.jpg) no-repeat left top; FLOAT: none; COLOR: white; FONT-WEIGHT: bold; TEXT-DECORATION: none; PADDING-TOP: 7px;
}
* html #navigation A { /* IE Only */
padding-top: 4px;
}
#navigation A SPAN {
POSITION: relative; PADDING-BOTTOM: 4px; BACKGROUND: url(tab-tile.jpg); background-repeat: repeat-x; FLOAT: none; PADDING-TOP: 7px
}
* html #navigation A SPAN { /* IE Only */
padding-top: 0px;
}
#navigation A SPAN SPAN {
POSITION: relative; PADDING-RIGHT: 9px; BACKGROUND: url(tab-right.jpg) no-repeat right top; FLOAT: none; background-repeat: no-repeat;
}
* html #navigation A SPAN SPAN { /* IE Only */
padding-top: 5px;
}
#navigation A:hover {
BACKGROUND: url(tab-left-orange.jpg) no-repeat left top
}
#navigation A:hover SPAN {
BACKGROUND: url(tab-tile-orange.jpg) repeat-x 50% top
}
#navigation A:hover SPAN SPAN {
BACKGROUND: url(tab-right-orange.jpg) no-repeat right top
}

That should correct your issues in IE6, using IE specific CSS.

Don't forget to resize your graphics down to the smallest size they will go in future, and your users will get a faster load, and your menu doesnt appear *jumpy*. I've done this for you, and i've got the sizes down from 60kb to just under 1kb each.

Hope this helps :)
Andyram2k
07-27-2009, 06:29 PM
It only let me attach 5 images, 6th resized attached.
matt_b
07-28-2009, 04:46 AM
Excellent, thanks for your help - it's now working in IE6 and IE7 :)

Out of interest, how did you work out the padding px values (13px/4px/0px/5px) to use?

* html #navigation LI { /* IE Only */
PADDING-TOP: 13px
}

* html #navigation A { /* IE Only */
padding-top: 4px;
}

* html #navigation A SPAN { /* IE Only */
padding-top: 0px;
}

* html #navigation A SPAN SPAN { /* IE Only */
padding-top: 5px;
}
Andyram2k
07-28-2009, 07:37 AM
Just a matter of trial and error to see what gets the best fit. Glad you got it sorted :)
matt_b
07-28-2009, 08:56 AM
What is it about IE6 that makes "trial and error" the only option :mad:

I thought there was some logic to the numbers, and was trying to work out how you'd worked them out for future reference!

Many, many thanks for your help :D
yobert
02-09-2012, 01:23 PM
I've figured out why this happens. In IE6/7, nested spans will cumulate padding. So in FF3, etc:

<span class="a"><span class="b">test</span></span>
.a { padding: 3px; }
.b { padding: 2px; }

will show 1px padding on .a, since the rest is overlapped with .b's 2px of padding.

However, the same spans in IE6/7 will cumulate, showing 5px of padding on the .a span, making it be larger than the inner span. So a way to work around this is:

.a {
padding: 3px;
*padding: 1px; /* IE7 only: b's padding minus a's padding */
}

.b { padding: 2px; }

I hope that helps! Remember a *property will only show in IE6/7, while a _property will only show in IE6.