PDA

View Full Version : Padding problem in IE6



htcilt
Feb 23rd, 2010, 09:18 PM
Hi,

I have 3 hyperlinks with rollovers applied. When rolled over, the background changes to dark grey and the text to white. There is a 20px padding around the link.

This works fine in Firefox - I get a the 20px all the way around the text. However, in IE6 I only get 20px padding to the left and right - not the top and bottom.

Here is my code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.nav {
text-decoration:none;
padding:20px;

}
.nav:link {
color:#000000;
}
.nav:visited {
color:#ffffff;
}
.nav:hover {
background:none repeat scroll 0 0 #666666;
color:#FFFFFF;
}
.nav:active {
background:none repeat scroll 0 0 #666666;
color:#FFFFFF;
}

</style>
</head>

<body><p>
<a class="nav" href="test1.html">Link 1</a>
<a class="nav" href="test2.html">Link 2</a>
<a class="nav" href="test3.html">Link 3</a></p>
</body>
</html>


does anyone know of a fix for IE6?

VIPStephan
Feb 24th, 2010, 12:18 AM
Vertical margin and padding is problematic on inline elements. You’ll never get a cross-browser compatible display like that.

Also, using a paragraph with a few links inside isn’t proper markup for a navigation. After all, it’s not a paragraph of text but a few links which would ideally be marked up as a list:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.nav li, .nav a {float: left;}
.nav a {
text-decoration:none;
padding:20px;
}
.nav a:link {
color:#000;
}
.nav a:visited {
color:#fff;
}
.nav a:hover, .nav a:active {
background: #666;
color:#FFF;
}
</style>
</head>

<body>
<ul class="nav">
<li><a href="test1.html">Link 1</a></li>
<li><a href="test2.html">Link 2</a></li>
<li><a href="test3.html">Link 3</a></li>
</ul>
</body>
</html>

htcilt
Feb 24th, 2010, 08:12 PM
Thats excellent Stephan, thank you :)

I'm now trying to add vertical pipes to separate each list item. I thought it would be a good solution to use border-right to acheive this. I then added a margin to the left and right of the list item.

The problem now is that when highlightted I dont a gap to the right, after the highlight - the highlight (background color change) goes all the way to the pipe (border-right).

Here is a diagram to better explain:
http://img.photobucket.com/albums/v368/flemmo/list.gif

Is this possible?

here is my slightly modified code (as in diagram above)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.nav li, .nav a {float: left;list-style-type:none}
.nav a {
text-decoration:none;
padding:5px;
border-right:1px solid #000;
margin-right:4px;
margi-left:4px;

}
.nav a:link {
color:#000;
}
.nav a:visited {
color:#fff;
}
.nav a:hover, .nav a:active {
background:#dd0000;
color:#FFF;
}
</style>
</head>

<body>
<ul class="nav">
<li><a href="test1.html">Link 1</a></li>
<li><a href="test2.html">Link 2</a></li>
<li><a href="test3.html">Link 3</a></li>
</ul>
</body>
</html>

VIPStephan
Feb 24th, 2010, 08:30 PM
You can’t have a border that’s a few pixels away from its element. You need to apply the border to the list item, not the anchor. And then fix the typo in your left margin rule.

htcilt
Feb 24th, 2010, 08:50 PM
of course!
Thanks again Stephan.

Here's the final (well, final for an early test) version:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.nav li, .nav a {float: left;list-style-type:none;}
.nav li{border-right:1px solid #000;}
.nav a {
text-decoration:none;
padding:5px;
margin-right:4px;
margin-left:4px;

}
.nav a:link {
color:#000;
}
.nav a:visited {
color:#fff;
}
.nav a:hover, .nav a:active {
background:#dd0000;
color:#FFF;
}
</style>
</head>

<body>
<ul class="nav">
<li><a href="test1.html">Link 1</a></li>
<li><a href="test2.html">Link 2</a></li>
<li><a href="test3.html">Link 3</a></li>
</ul>
</body>
</html>