IE8 Clear float issue

views:

answers:

IE8 Clear float issue

My situation looked just like the problem discussed here:

http://stackoverflow.com/questions/2511304/clear-float-issue

That is:

"I have a page with the standard navigation bar on the left and the content area taking up the rest of the horizontal area to its side. …

This works fine except when the content area itself has floated elements and I try to use clear. My goal is to displayed the clear element right after the content area floats but instead it gets shoved down below the nav area."

but the solution given there didn't work for me. I've read about the issue; the following page seems to discuss most of the solutions:

http://css-discuss.incutio.com/wiki/Clearing_Space#Clearing_space_beneath_floated_elements

but none of these solutions worked for me either.

In IE8 only, I get a large gap above the table, all other browsers that I tested are fine. I'd really appreciate another set of eyes.

The page is at:

http://www.diabetesgoaltracker.com/home.html

Thanks.

Your webpage is now served in quirks mode, meaning the browser renders it not according to the spec. Add a doctype, such as <!DOCTYPE HTML> to the top and that should resolve it.

meder 2010-09-20 21:06:34

I had removed the DOCTYPE because it wasn't rendering correctly in Chrome. So I put it back and IE8 looks great but Chrome not so good. Is there a different DOCTYPE that I should be using?

Matt Winters 2010-09-20 21:12:45

ALWAYS use a DOCTYPE. Not using one is like going blind. Just adjust Chrome because Chrome usually is more adhering to the spec.

meder 2010-09-20 21:17:32

Understood. Safari and Chrome don't seem to be respecting elements of the CSS while now IE8 and FireFox are fine. Any direction appreciated.

Matt Winters 2010-09-20 21:21:40

I don't see any DOCTYPE. I see whitespace prepended to the link you pasted.

meder 2010-09-20 21:31:13

Thanks meder. I removed it again because it looks worse with it there than without it. With it, Safari and Chrome don't use the CSS without it I had a big space in IE8. My question was basically how do I get it to work in IE8 and your solution worked, add a DOCTYPE. I now have to figure out how to get it working in Chrome and Safari.

Matt Winters 2010-09-20 22:05:17

ansaurus

tags:

views:

answers:

IE8 Clear float issue

related questions