setting margin and padding anchor block in IE6.

**since** · 12-04-2009, 04:02 AM

I am debugging some css drop down menus and I have noticed that IE6 is adding extra margin space for it's anchor tag when the css "display" property is set to "block". The menus look fine in IE8 and firefox. I have an example below.

Question.
How do you get IE6 to remove or set the margin correctly for an anchor that is a display block?

In the following case I am just trying to remove the margin between "li" and "a" tags.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
</head>
<body>
<div style="display:block;background:red;">
<ul style="LIST-STYLE-TYPE: none;background:black;margin:0;padding:0;">
<li style="margin:0;padding:0;">
<a style="display:block;background:green;">hello</a>
</li>
</ul>
</div>
</body>
</html>

**jscheuer1** · 12-04-2009, 08:02 AM

Get rid of two line breaks in your code by moving the closing </li> and </ul> tags as shown:

Code:

<html>
<head>
</head>
<body>
<div style="display:block;background:red;">
<ul style="LIST-STYLE-TYPE: none;background:black;margin:0;padding:0;">
<li style="margin:0;padding:0;">
<a style="display:block;background:green;">hello</a></li></ul>
</div>
</body>
</html>

Note This works, I guess because those line breaks are interpreted as spaces by IE 6, and one or more spaces following a block level element would produce an additional line.

**since** · 12-08-2009, 09:29 AM

John,
Thx a million that solved the problem.

Steve

Thread: setting margin and padding anchor block in IE6.

Thread Tools

Search Thread

setting margin and padding anchor block in IE6.

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions