BillyRayPreachersSon
Programmer
I've run into a nasty problem with CSS and IE 6 (and possibly other versions), and was wondering if anyone could tell me why I'm seeing what I'm seeing.
Run the code below:
Now, modify the code, and remove the background colour - and watch how line 2 is pushed down the page.
Has anyone else seen this behaviour before, or have any idea why IE is does this?
Incidentally, IE also exhibits the same behaviour with an HTML 4.01 Loose DOCTYPE and no DOCTYPE.
Thanks!
Dan
[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
![[banghead]](/data/assets/smilies/banghead.gif "[banghead] [banghead]")
Run the code below:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="en" />
<title>IE CSS Bug?</title>
<style type="text/css">
#line1 {
float: left;
}
#line2 {
margin-top: 50px;
clear: left;
background-color: #FF0000;
}
</style>
</head>
<body>
<div>
<span id="line1">Line 1</span>
<div id="line2">Line 2</div>
</div>
</body>
</html>Now, modify the code, and remove the background colour - and watch how line 2 is pushed down the page.
Has anyone else seen this behaviour before, or have any idea why IE is does this?
Incidentally, IE also exhibits the same behaviour with an HTML 4.01 Loose DOCTYPE and no DOCTYPE.
Thanks!
Dan
[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]