CSS Float Incompatability with Firefox, IE6, Netscape

float, browsers

[trex2]

Hello.

I have a positioning problem between browsers.

This site uses default positioning on the main div container, which looks fine on IE6 and Firefox, but fails on Netscape. The combination which messes up Netscape seems to be:

overflow: hidden;
and default positioning on the div

So, in effort to fix Netscape, I changed the css to:

positioning: relative

This allows Netscape to view the page now, but the problem now is:

-The top navigation drop down positioning is now wrong, and I don't know how to change
-There's now extra space at the bottom

If I remove overflow: hidden; tag, it displays fine in IE6, but doesn't display the background correctly in Firefox or Netscape.

Any ideas?

[edited by: jatar_k at 4:09 pm (utc) on April 6, 2006]
[edit reason] no urls thanks [/edit]

[doodlebee]

First off, you should validate. (Yes, it's that important.) If you don't, it'll throw your site in to "quirks" mode, and chances are, display things incorrectly. Validation also helps you find little mistakes - like a forgotten closing tag, or a missing semicolon in your stylehseet that could be throwing things off.

I ran your pags through the W3C validator, and your HTML has 36 errors. (Mostly missing ", unclosed tags and stuff like that - possib;y it *won't* make it view improperly, but the fact that it has so many errors is probably throwing into "quirks" and is displaying things incorrectly anyway.)

As for your CSS - there aren't any errors in it - but you *do* have several elements within your stylsheet that have multiple definitions. A biggie is your #container div - your margins for it are redefined several times. It will always take the last definition and ignore the ones before it.

All that aside, I see lots of "float:left"s but I see nothing whatsoever clearing the floats. This will cause your outer container to collapse - which is what it's doing in NN7. I'm amazed it's not doing it anywhere else, in all honesty.

[trex2]

Thank you doodlebee!

That helped. But now I have a final IE Bug that wraps the footer text. See the following link. There should be no gray bar across the bottom or text that says 'inc' on the far bottom left- it seems to duplicate the last few characters of the last line. (This is in IE only; it will look normal in Firefox and Netscape).

Is there a workaround for this text wrapping IE bug?

[edited by: jatar_k at 4:09 pm (utc) on April 6, 2006]
[edit reason] no urls thanks [/edit]

[adamsfather]

It happens when you haven't cleared floats or child element is floated and parent is not or vice versa. Try to clear last float.

In css #clearing {clear:both is missing closing }
for multiple float clearing purposes use class instead of id.

I hope this would help you.

[trex2]

Hmm... still having the text wrap. You can test the link just above for the latest page. I added the end tag for clearing and also tried making it a class, but doesn't seem to fix the problem. Anything else I can try?