homepage Welcome to WebmasterWorld Guest from 54.237.213.31
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Why do my floats look bad in IE?
zhouhana



 
Msg#: 4405822 posted 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]

 

Paul_o_b

10+ Year Member



 
Msg#: 4405822 posted 10:01 am on Jan 12, 2012 (gmt 0)

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.

zhouhana



 
Msg#: 4405822 posted 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!

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