Entry
Aug29
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> </ul>
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;
padding:0;
background:#333;
border:1px solid #333}
August 29, 2006 08:59 PM HTML and CSS
