Log in

View Full Version : 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.



<!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:


<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