Forum Moderators: not2easy
I have searched and searched and searched for details about what I am experiencing, but I can't find a reference anywhere. I know IE has some interesting bugs regarding floats - many of which the insane "display: inline" will fix - but this one us a real stumper.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page</title>
<style type="text/css" media="screen">
body {
background-color: #E0E0E0;
margin: 0;
font-family: lucida grande, lucida sans unicode, lucida sans, trebuchet ms, trebuchet, sans-serif;
font-size: 12px;
line-height: 1.25em;
}.App {
margin: 10px 5px 12px 5px;
background-color: white;
padding: 0px 0px 5px 0px;
}.App h2 {
color: #FFDA49;
width: 640px;
background-color: #5E1000;
font-size: 18px;
margin: 0;
padding: 6px 0 6px 10px;
float: left;
}.AppMeta {
float: right;
padding-top: 5px;
padding-bottom: 12px;
width: 130px;
min-height: 22px;
text-align: left;
}.App h3 {
color: #A11B00;
font-size: 14px;
margin: 0 10px .5em 10px;
clear: left;
}.App p {
margin: 0 10px 1em 10px;
}
</style>
</head>
<body>
<div class="App" id="Albert">
<h2>Heading</h2>
<div class="AppMeta">Text</div>
<h3>Heading</h3>
<p>Text</p>
</div>
</body>
</html>
...in IE6 - and then in any other modern browser - and you will see that the left-floated element has space above and below it (margin space, essentially) that IE insists on displaying. No amount of work - apart from disabling the left float completely - seems to affect this.
Any help with this would be greatly appreciated. Thanks!
Drew
[edited by: SuzyUK at 2:03 pm (utc) on Nov. 9, 2005]
[edit reason] URL's snipped - code added [/edit]
It should do the space at the top now on all browsers.
I hope this solution helps.
any element without dimensions in IE has a hard job drawing (or laying out) display:block; elements inside itself
Suzy
