Background Color and Italics sets off Internet Explorer 7 bug

StackOverflow https://stackoverflow.com/questions/1186571

Question

The following code demonstrates the issue I'm encountering:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style>

p
{
    background-color:#FFF;
}


</style>
</head>
<body>

  <img src="http://www.google.com/intl/en_ALL/images/logo.gif" style='float:left;'>
  <p><em>This is an italic sentence.</em></p>
  <p><strong>This is a bold sentence.</strong></p>
  <p>This is a normal sentence.</p>

</body>
</html>

When this code is viewed in IE7, the Google logo will be displayed to the left with 'white horizontal bars' running through it lined up with each paragraph, displayed on the right.

Removing the first line with the <em> tags causes the lines to disappear. Try it yourself. Remove each of the three lines and see how the bug changes.

What in the world is going on with this?

--

Resolution: hasLayout issue. Adding zoom: 1 attribute to em corrects the issue.

Was it helpful?

Solution

Not sure why it's happening, but there are many ways of making sure it doesn't, including adding display: inline-block to the em.

OTHER TIPS

This is happening because of the floated image.

When an image is floated it technically does not have any layout of its own. The white bars are the <p> tags, since in CSS you gave them a background of #FFF.

For IE7 is thinks the <p> tags are actually starting at the start of the page on the far left, so it starts them there, but simply bumps the content past the floated image, leaving funny white bars overtop of the floated image.

I would try getting around it by giving your <p> tags left margin. If you make enough left margin to get past the image you shouldn't get those bars anymore.

So try something like...

p{ background-color: #fff; margin-left: 300px; }

You can adjust the left margin but something along those lines should get rid of the white bars for you.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top