extra vertical space within <li> in IE7
Posted
by powerboy
on Stack Overflow
See other posts from Stack Overflow
or by powerboy
Published on 2010-06-05T23:44:35Z
Indexed on
2010/06/05
23:52 UTC
Read the original article
Hit count: 341
Filed under:
css
|cross-browser
The test case is in below. Or you can view it in jsbin: http://jsbin.com/uxagi.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {margin: 20px; }
#main {border: 1px solid red;}
img {float: left; height: 100px; padding: 0 10px 10px 0;}
ul {margin: 0; padding: 0; list-style-type: none;}
</style>
</head>
<body>
<div id="main">
<ul>
<li>
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/0/07/CranebyLinson1894.jpg/100px-CranebyLinson1894.jpg" />
<div class="content">"The Open Boat" is a short story by American author Stephen Crane. First published in 1897, it was based on Crane's experience of having survived a shipwreck off the coast of Florida earlier that year while traveling to Cuba to work as a newspaper correspondent. Crane was stranded at sea for thirty hours when his ship, the SS Commodore, sank after hitting a sandbar. He and three other men were forced to navigate their way to shore in a small boat; one of the men, an oiler named Billie Higgins, drowned. Crane subsequently adapted his report into narrative form, and the short story "The Open Boat" was published in Scribner's Magazine. The story is told from the point of view of an anonymous correspondent, Crane's fictional doppelgänger, and the action closely resembles the author's experiences after the shipwreck. A volume titled The Open Boat and Other Tales of Adventure was published in the United States in 1898. Praised for its innovation by contemporary critics, the story is considered an exemplary work of literary Naturalism. One of the most frequently discussed works in Crane's canon, it is notable for its use of imagery, irony, symbolism, and exploration of themes including survival, solidarity, and the conflict between man and nature. H. G. Wells considered "The Open Boat" to be "beyond all question, the crown of all [Crane's] work".</div>
</li>
</ul>
</div>
</body>
</html>
Note that in standards-compliant browsers and IE8, there is no vertical space between the red border and the text. But there is vertical space in IE7 (haven't tested in IE6).
© Stack Overflow or respective owner
