Why do my floats look bad in IE?

Hey guys,

I'm slowly learning how floats work, but am not quite there yet. Could you please help me get a header right? It looks the way I want it to in the latest Firefox, but not in IE7 or 8. It's for a school assignment, so I'll be happy if you just explain the problem and what I should think about in this case rather than serve me a finished code solution. If you think I should rebuild the entire thing differently, please tell how you think it should be done.

My code stripped down and edited into one file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<style type="text/css">
// my CSS files in loading order:

// reset.css:

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}

ol {
margin-left: 1.4em; list-style: decimal;
}

ul {
margin-left: 1.4em; list-style:square;
}

img {
border: 0;
}

// main.css:

body {
background-color: #fff;
font-family: Times, "Times New Roman", serif;
padding: 10px;
}

div#wrapper {
margin: auto;
width: 960px;
}

div#newsletterbox {
background-color: green;
float: right;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.8em;
margin-bottom: 0;
}

div#newsletterbox label {
float: left;
 height: 22px;
 text-align: right;
 width: 100px;
margin-right: 4px;
}

div#newsletterbox input {
width: 200px;
height: 14px;
float: right;
}

div#newsletterbox input[type="submit"] {
width: 80px;
height: 18px;
}

div#logoplaceholder {
background-color: red;
width: 418px;
height: 42px;
background-repeat: no-repeat;
background-position: top left;
}

div#date {
background-color: teal;
}

div#date p {
font-size: .8em;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-top: 5px;
margin-bottom: 10px;
}

div#buttonsmenu {
margin-bottom: 20px;
background: #000;
color: #fff;
}

div#buttonsmenu:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}

div#buttonsmenu ul {
margin: 0;
padding: 0;
}

div#buttonsmenu ul li {
text-transform: uppercase;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}

div#buttonsmenu ul li a {
display: block;
background-color: #003;
color: #fff;
padding: 10px;
text-decoration: none;
}

<!--[if lt IE 8]>
div#buttonsmenu {
zoom: 1; /* Causes element to have layout. For clearing to work. */
}
<![endif]-->

</style>

</head>
<body>

<div id="wrapper">

<div id="newsletterbox">
<form name="signupform" method="post" enctype="text/plain" action="mailto:example@example.com">
<p><label for="namn">Your name: </label><input type="text" name="namn" id="namn"></p>
<p><label for="epost">Your e-mail: </label><input type="text" name="epost" id="epost"></p>
<p><input type="submit" value="Send"></p>
</form>
</div>

<div id="logoplaceholder">
</div>

<div id="date">
<p>Wednesday, January 11, 2012</p>
</div>

<div id="buttonsmenu">
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
<li><a href="">Link 6</a></li>
</ul>
</div>

</div>

</body>
</html>

[edited by: alt131 at 8:47 am (utc) on Jan 12, 2012]
[edit reason] Thread Tidy [/edit]

Why do my floats look bad in IE?

zhouhana

Paul_o_b

zhouhana

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week