I have a site merely using CSS layout (table-less). If browsed using Internet Explorer (I'm using 6.0) the layout problem will not occured but when browsed using Firefox (I'm using 1.5.0.12 version) the problem sometimes does occured, I mean it looks allright once but at later visit it may look not right (I push the refresh button repeatedly to find the incorrect layout) ! This is the page I'm talking about http://www.rajakscripts.com/project.php


Please see the image with CORRECT layout as intended as below



As contrary, the image below is showing unintended result of layout, it's being put on the downside instead of the rightside.


So, does anyone here have any idea why this is occured in Firefox ? Remember that, it's occured 'sometime' not 'always', that's why I said unstable. I have no idea of the reason why, so I just take an easy way by asking anyone who may has the same experience with me and finally found the reason. Please let me know and thanks in advance.

I wish all kind of browser can treat CSS the same way.

First of all, using IE6, the LEAST standards compliant browser out there, as your measure of what's being rendered correctly and what's not is the wrong way to go. Even that very old version of Firefox was far more standards compliant than IE6 and FF is showing you the correct rendering - and IE6 is not.

1 - I suggest you upgrade your Firefox to the current version - 3.0.
2 - remove the clear:left on the left floats, and the clear:right on the right floats as that really isn't the proper way to clear floats.

Hi Lady, thanks for the input.

I know there are so many bugs for IE but as long as my counter record it still being used globally so I have to fit the page to those top 3 browsers (IE, Firefox, Opera).

Why is the 'clear' not the proper way? Do you mean to use 'display:inline' to replace such positioning instead of using 'clear'?

Again, thanks for your input, I will check it out, because 'clear' is stated useful for CSS for positioning but perhap now it's changed, if what you said is true.

Why is the 'clear' not the proper way? Do you mean to use 'display:inline' to replace such positioning instead of using 'clear'?

No, but you cannot "tell" an element to "float" past elements on the left hand side AND to clear elements on the left hand side as well.

I know there are so many bugs for IE but as long as my counter record it still being used globally so I have to fit the page to those top 3 browsers (IE, Firefox, Opera).

Yep, we all agree with that (whether we like the IEx behaviour or not) but what LadynRed is saying is NOT to use IE as your development preview browser, but use FireFox for testing and development, then test and tweak for IE periodically.

Originally Posted by chrishirst

No, but you cannot "tell" an element to "float" past elements on the left hand side AND to clear elements on the left hand side as well.

It's needed for Opera browser. Have you try Opera? If you browse using Opera then the right side section will be put on the down side not on the right side as intended, this is occured if 'float:left;' is not provided.

Originally Posted by chrishirst

Yep, we all agree with that (whether we like the IEx behaviour or not) but what LadynRed is saying is NOT to use IE as your development preview browser, but use FireFox for testing and development, then test and tweak for IE periodically.

I do always browse using those 3 browsers for development preview not just Firefox alone So, if the page has similar appearance if browsed by those 3 browsers then I deem the CSS code is already sufficient and leave it as it is.


The strange one for Firefox is sometime it's appear correctly as intended but at any other time is not correct. If there is something wrong with my CSS code then it must not appear correctly since the beginning. This may leads me to conclude that Firefox -for certain CSS code- is not stable in handling the CSS.

Anyway, thanks for your respond, I appreciate it.

IT IS NOT something "wrong" with FireFox! Unless of course you happen to be right and the rest of the CSS designer world who are wrong!!!!

The problems are with IE and it's sometimes "wannabee cousin" Opera

You can be pretty sure that FireFox will be rendering the code as it should be.

It's needed for Opera browser. Have you try Opera? If you browse using Opera then the right side section will be put on the down side not on the right side as intended, this is occured if 'float:left;' is not provided.

Using the float is correct BUT IT IS YOUR USE OF clear on the same element that is at fault!!!

I just noticed that you are using Firefox 1.5. In my opinion, anything prior to Firefox 2 does not need to be supported.

Firefox 3 passes the ACID 2 test. Firefox 2 does not, though it comes close. Explorer, predictably, botches it terribly.

I agree 100% with that, using FF 1.5 is not the best solution at all.

99% of the time Opera will render a page EXACTLY the same way as Firefox 3 will (or even 2). IE6 will almost always botch things up.

You fix your code so it's right in Firefox, Opera should be pretty much the same as FF, THEN you go back and put in the fixes you need to make IE6 behave. You do that with a separate CSS file JUST for IE and you use conditional comments to call that separate CSS file (which ONLY contains the "fixes" needed) for IE6.

I suggest you try reading this about clearing floats:
http://css-discuss.incutio.com/?page=ClearingSpace

Then start reading here about IE's bug and the solutions: www.positioniseverything.net

Originally Posted by LadynRed

1 - I suggest you upgrade your Firefox to the current version - 3.0.

Upgrading the webmasters browser isn't upgrading the visitor's browser on the other side of the planet. It should work with older versions too.
If you just upgrade your own browser, you're not making any solution for the other's visiting your website with older browsers.

Firefox 1.5 represents such a tiny proportion of browser usage, that it does not even make Yahoo's list for A-grade browser support: http://developer.yahoo.com/yui/articles/gbs/

This is a list developed by Yahoo to show the browsers that they fully support. Other browsers prior to these receive only HTML, with no JavaScript or CSS. Yahoo also gives A-grade support to any browser they don't recognize, though they don't promise their site will function in unknown browsers.

Note that Firefox 3 receives the most support, across multiple system platforms.

Originally Posted by Bulevardi

If you just upgrade your own browser, you're not making any solution for the other's visiting your website with older browsers.

I do agree with this, however, major web design companies only code for the current versions of FF, Opera and IE. They do not worry about the other versions at all which makes their work much easier. They also put a small statement on their sites "This page is best viewed in Firefox 3...etc.." and then they also include a link to upgrade. This is usually on the first fold of the page to the left near the navigation. It's pretty small so not to interfere with the design. There isn't more than .80% using that old of a version of FF. If you are web designing it makes no sense to be testing on an old version of anything. You as a designer are in this line of work and really should be up to date yourself.

My opinion for what it's worth..

If you are web designing it makes no sense to be testing on an old version of anything.

So by that logic you shouldn't support IE6??

One more thing - if a person is a Firefox user, chances are that they have the latest version of the browser, or perhaps just one minor revision behind. Firefox users are not at all like IE users who only use what comes with their pc and rarely upgrade - so they are more likely to be using an outdated version. IE also does not automatically update to the latest version as Firefox and Opera do.

To ostracize so many people still using IE6 is just foolish, especially if you're trying to make money.