homepage Welcome to WebmasterWorld Guest from 54.211.201.65
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
IE's extra lines with floats
Robin_reala




msg:1218141
 12:49 pm on May 17, 2006 (gmt 0)

Given the following simple testcase, does anyway know:

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>

 

Robin_reala




msg:1218142
 12:14 pm on May 19, 2006 (gmt 0)

No-one? I would have thought that this problem is simple enough for other people to have bumped into it...

doodlebee




msg:1218143
 3:43 pm on May 19, 2006 (gmt 0)

It's because you're floating your <a> tag right, and nothing else. When you float things riight, and there's no specific width for things (which you have none) they default to 100%. So your <h3> tag is taking up 100% of the space, and then your image is over there - and since it *adds* to the 100%, it drops.

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.

createErrorMsg




msg:1218144
 6:06 pm on May 19, 2006 (gmt 0)

Floating the anchor turns it into a block level element (see float specs [w3.org]), which then results in a block level anchor nested in a list item...the primary trigger for IE's whitespace in lists bug. In otherwords, IE is adding an extra line because the LI contains a block level anchor.

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; }

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved