IE7 CSS Bug: Adding ‘padding-top’ Value Twice at chriskarcher.net

April 2, 2008 1 Comment

IE7 CSS Bug: Adding ‘padding-top’ Value Twice

I’ve spent some time at work trying to figure out why a <div> after our menu (where the menu is “float: left“) was showing up with more top padding than we were specifying. The extra padding only showed up in Internet Explorer 7:

Here is the CSS and HTML that will exhibit the behavior in IE7:

CSS:

body
{
 font-family: Arial, Verdana, Sans-Serif;
 font-size: 100%;
 color: #000;
 background-color: #fff;
}

.bodycontainer
{
 width: 100%;
 font-size: 0.8em;
}

.menu
{
 width: 100%;
 background: #404040;
 float: left;
}

.menu ul
{
 margin: 0;
 padding: 0;
 list-style-type: none;
}

.menu li
{
 margin: 0px;
 padding: 0.25% .5%;
 float: left;
 background: #404040;
 border-style: solid;
 border-width: 0px 1px 0px 0px;
 border-color: #fff;
}

.menu a
{
 font-weight: bold;
 color: #fff;
}

div.clsBreadCrumbTrail
{
 clear:both;
 padding: 10px 5px;
 border-bottom: solid 1px #999;
 border-top: solid 1px #999;
 font-family: Tahoma;
 font-weight: normal;
 text-align: left;
 background-color: #eaeaea;
 color: #000;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 <div id="someid" class="bodycontainer">
 	<div id="NavMenuPage" class="menu">
 		<ul id="menuitems">
 			<li><a id="foo" href="somelink">Some Menu Item</a></li>
 		</ul>
 	</div>
 	<div id="bct" class="clsBreadCrumbTrail">
 			<a href="somelnk">Home</a> > <span class="clsCurrentPage">Job Board</span>
 	</div>
 </div>
</body>
</html>

It turns out that Internet Explorer 7 has a bug where a float followed by a clear that has a background specified causes IE7 to add the padding-top value twice. IE6, Firefox, and Safari all work correctly.

There are several ways to work around this bug and get rid of the extra padding, you’ll have to see which works best for you:

Specify the <div> as “display: inline-block” (credit)
Nest the <div> that specifies a background inside a <div> that specifies the clear

I went with the second work-around because although the first worked in IE7, it caused the background to be cut off in Firefox. You could also use conditional comments to give specific CSS to Internet Explorer 7, but it’s best to avoid that whenever possible.

You may Leave a comment or Subscribe to Comments RSS or Trackback this entry.

1 comment so far

Jimi Youngs October 1, 2008 7:50 am

Hi there,

Interesting points, unfortunately it didn’t work for me.

The thing that frustrates me is that the or is now a depreciated tag.
So to create paragraphs the easiest thing is to add padding to the bottom of the p tag’s to seperate paragraphs.

e.g
p{
padding: 0 0 10px 0;
}

Again IE7 is adding padding between tags as well as the area contained with in the .

Adding a margin actually works in IE7 but not in FF. Here rolls the conditional statements !