Forum Moderators: not2easy
1) Why IE does adds in an extra line?
2) and how to get rid of it?
Thanks!
(p.s. the image is the WebmasterWorld one, not one of mine)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
a { float: right; }
li { clear: right; border: 1px solid red; }
h3 { margin: 0; }
</style>
</head>
<body>
<ul>
<li>
<a href="#"><img src="http://showcase.netins.net/web/phdss/WebmasterWorldgfx/dlogo.png" alt="" /></a>
<h3>Test</h3>
</li>
<li>
<a href="#"><img src="http://showcase.netins.net/web/phdss/WebmasterWorldgfx/dlogo.png" alt="" /></a>
<h3>Test</h3>
</li>
<li>
<a href="#"><img src="http://showcase.netins.net/web/phdss/WebmasterWorldgfx/dlogo.png" alt="" /></a>
<h3>Test</h3>
</li>
</body>
</html>
Float your <h3> tag left, as well. For standards-compatible browsers, this'll cause your border to snap up to one line, so you need to remove the "clear:right" from your <li> tag, and add in soemthing else to clear both floats *within* the <li>...my personal preference is the invisible <hr> tag, placed right before the closing <li>. That will force the border to wrap around the <h3> and the image. In IE, you have to make the <hr> tag smaller by defining the height as "0" and "margin:-3px"
You might have to play with margins and paddings and stuff, but that's pretty much all there is to it.
The bug fix is to set the LI to display:inline, but this does funky things to this particular layout, primarily because you're nesting a floated element in a non-floated element. Once the LI goes inline, it no longer contains the float. Float the LI instead, however, and the height of the LIs is determined by the image, with everything displaying more or less identically between browsers.
cEM
a { float: right; }
ul{margin:0;padding:0;}
li { float:right;border: 1px solid red; }
h3 { margin: 0; }
