Firefox can't float long lines?

Long lines cause floats to clear

[dzarn]

I'm trying to get a basic 2 column (left nav, right content) layout. It works fine in IE no matter what, and in FF as long as the content isn't too long. However, long lines in the content cause it to appear underneath the nav column, rather than next to it. If I insert line breaks so every line is shorter than the window width, it fixes it, but this obsiously won't work.

Thanks for your help!

<Sorry, no personal URLs or example pages.
See Forum Charter [webmasterworld.com]>

[edited by: tedster at 6:41 pm (utc) on Jan. 15, 2006]

[JAB Creations]

Welcome to WebmasterWorld dzarn,

This is a box model issue caused by improper rendering by Internet Explorer. You're stuck in "MS sets the standards mode" as you think IE is rendering it correctly and Firefox is not -- just the opposite.

Reduce whatever element to make it work correctly in Firefox. I can tell it's a box model issue in IE because the same thing in Firefox also happens in Opera.

The answer to your problem is IECCSS. Internet Explorer Conditional Comments Style Sheet.

The most important rule for testing W3C compliant pages out is to test them in W3C compliant browsers, IE is not. Once your site is working in W3C complaint browsers such as Firefox 1.5 and Opera 8.51 then to get IE to render it correctly take the code you modifed which worked in IE and throw it inside this...

<!--[if IE]><link href="quirks-ie.css" media="screen" rel="stylesheet" title="city" type="text/css" /><![endif]-->

You only have to modify the specific specs in this IE quirks stylesheet. Keep in mind that this will still keep your page compliant, only IE looks inside comments and it will override your normal CSS only with specs you use in your IECCSS.

So with Firefox and Opera working, edit your IECCSS until IE works. Don't worry about the IECCSS editing to change Firefox, Opera or anything else. Just concentrate on IE when modding that file.

IECC page...
[msdn.microsoft.com...]

You can throw in custom scrollbars inside this SS while you're at it.

Be careful about posting URLs unless they are absolutely essential to your posts.

I commend you for using Web Developer toolbar, it's essential to much of what I work on.

Hope this helps!

John

[dzarn]

Thanks for your help. I figured IE might have it wrong, but it still ends up broken. What would you suggest I change to get it to render correctly? Currently the left column is set to 164px width, but the right has no width specified.

If I set the right width low enough (say 50%) to work on an 800x600 screen, it ends up being way too narrow on larger resolutions. Any suggestions to get around this?

[jessejump]

Remove float on right column.
Floats need a width

[dzarn]

It works fine without a width, as long as the content isn't wider than the available space (i.e. as long as the line doesn't wrap). So I don't think it's the fact that it doesn't have a width.

[jessejump]

>>>>>(i.e. as long as the line doesn't wrap).

Is that what you want?

(remove float on right.)