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. I have checked that everything is validating fine.

A screenshot of the proper Firefox design: http://homeweb.mah.se/~m11K5727/css/ff.png
A screenshot of the IE mess: http://homeweb.mah.se/~m11K5727/css/ie.png

The page online: http://homeweb.mah.se/~m11K5727/css/index.htm
Its CSS: http://homeweb.mah.se/~m11K5727/css/main.css

(Sorry, I can't use live links as a new member.)

Thanks in advance.

Johanna

 

I don't see anything different.

 

You don't? I see the difference in IE, and the screenshots I linked to show the difference. And My teacher won't approve it the way it is now.

 

So you know what to look for: It's the form fields in the header that line up on one line i IE. Everything else looks more or less the same in FF and IE; it's just the form fields in the header that are the problem.

 

I see absolutely no difference at all. Identical.

 

Weird. Thanks for trying to help, though.

Here's another screenshot I took just now showing the differences in FF (top), Chrome (middle), and IE8 (bottom): http://homeweb.mah.se/~m11K5727/css/differences.png

I'm on a Mac using Parallells to run IE, but I also tested it in IE on a Windows machine with the same result.

Maybe someone else could take a look at it? I'd be very grateful!

 

By giving it a quick look, I would say it's a positioning problem. As you see, it floats one onto another like absolute divs in relative parent containers. Try to change the positions of the divs in questions, as well as their margins and paddings. You'll find a solution

 

1) Float the logo first, as it is bigger (so than the other right side WILL stack. Note that If you have enough 'space' for a float to land next to something, it will, so maybe adding padding to the labels for the login is necessary to have them on separate rows.

2) The same goes for the navigation, padd that, or give it a width (100% or auto) in order to allow it to take up the whole space and not be able to shorten itself and get pushed up. That's probably why your having problems.

Think of it like this, floats are like objects wanting to go into space, if you give them enough room, they will squeeze their way up (and to w/e direction you send them). If you dont, they get 'trapped' and can't move up like a fat person can't fit in a chair or through a door.

Also note that when combing floats with normal elements, your normal elements don't "read" the float very well, so this causes the normal elements to slip under the floats (as if they weren't there, or are above them) which is probably really not what you want. So after a group of float elements - to save you confusion in the near future, you need to 'clear' the float elements (google will turn up tons of links).

 

[h=2]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. [/h]

 

I still don't see any difference between the pages at all.

 

Identically. I see absolutely no difference.................

 

Sorry, I thought I had already posted a thanks notice here, but apparently not. I worked it out with the excellent advice I received from several posters above. Thanks for all your help!

 

u should not disappoint u will make it good .you should carry on

 

I think it's a positioning problem.

 

I also think it's a positioning problem. I have similar issues where it looks okay in either Google Chrome and I.E. and slightly different in FireFox. I like to test in at least those three browsers. Sometimes, all you need to do is trying by trial and error.

 

I think it's a floating problem.

 

why not just use firefox?

 

I think Firefox is the best browser.