Adding Padding on Blocked Anchors

I’ve been running into this problem on IE7 where by a list item with an blocked anchor will have top and bottom padding around the anchor element even though none has been added to the list item. Consider the following styles:

#ieproblem li{margin:1px 0;padding:0;background:#333;}
#ieproblem li a{display:block;padding:5px;}

For the following HTML:

<ul id="ieproblem">
   <li><a href="javascript:;>Link Text 1</a></li>
   <li><a href="javascript:;>Link Text 2</a></li>
   <li><a href="javascript:;>Link Text 3</a></li>

What you would see would be three gray list items with a pixel in between and the entire list item area being a clickable anchor link. In Firefox the padding of the anchor would 5 pixels, but in IE7 and additional padding is added outside of the anchor, creating even thicker lines. I haven’t had a chance to see exactly what is going on here and what are the specifics that will make this happen. But I’m starting to see it more and more.

At least I’ve found a solution to this. Borders! Adding a 1 pixel border to the containing LI tends to fix the added padding issue. This does add an extra pixel around the whole thing. So it may or may not be useful to people, but at least it’s effective. Just add the following and you should be ok:

#ieproblem li{
   margin:1px 0;
   border:1px solid #333}

August 29, 2006 08:59 PM HTML and CSS


Leave a comment of your own

If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.

Use of HTML for comments is not available.

In an effort to combat spam, you will be able to post your comment after you preview.

Powered by Movable Type 3.2 Creative Commons License: Some Rights Reserved © 2000-2005

Site feeds. Hofully valid XHTML and CSS. No kitties were harmed in the making of this website.