Welcome to WebmasterWorld Guest from 54.196.94.176

Forum Moderators: not2easy

Message Too Old, No Replies

Why do my floats look bad in IE?

     
9:24 am on Jan 11, 2012 (gmt 0)



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]

10:01 am on Jan 12, 2012 (gmt 0)

10+ Year Member



Hi

In ie6 and 7 when you float elements left and right in a widthless float then the float will (in most cases) stretch to 100% of its parent width which is why the elements are in one line in IE7 and under.

If you first float right and then only float left inside the float then it does not stretch but can be awkward to make the design behave like you want. Therefore the simplest anser os to giv ethe parent float a width that will accommodate its child floats nicely.

In your case we can float the p element instead and give it a width.

#newsletterbox p{float:left;clear:left;width:25em}


You can either give that to IE7 and under only but it should actually help all browsers get straight.

Note that Conditional comments are html and must go in the head of the document and not in the stylesheet.


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

They are just basically normal html comments and will hide whatever is inside from other browsers just like normal html comments would.

It's only IE that looks inside comments to find the specific IE constructs and then acts accordingly with whatever html is inside.

Also make sure you only put css comments in your file/* */ and not // or <!-- -->.

Lastly there is no need to qualify every rule with the type selector e.g. Don't do this "div#buttonsmenu".

It makes the css more bloated and actually harder to read as everything begins with div. IDs are unique anyway so why make the browser find the element and then go find it again to see if its a div. Only qualify rules when you need to know what they are and things like ul#nav are occasionally useful because they let you know that it's a ul and not a div.
2:44 am on Jan 16, 2012 (gmt 0)



Thanks Paul_o_b. I've fixed it now and learned a lot from your reply!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month