A concrete resource for cross browser css

HTML & CSS
1

Hello,

I have been developing with CSS for some time and I find it hard to get a site that will render perfectly across all browsers.

This has shocked me even more when we developed the following site: http://www.torontowebdesignexperts.ca/clients/hbpa/

It looks great across all but in IE6 looks horrible… viewer discretion is advised…

I would like to know why css is rendered differently and what resource can I use when we implement our next website to ensure that it is consistent across all browsers…

Thank you for your help,

Alexander

2

Not tested.

I suspect that the {overflow: hidden;} is, um, hiding those float elements as the parent element collapses. To each parent of a float that does not contain a width or height declaration, add {zoom: 1;}.

IEs 6 & 7 do not properly support the overflow property as a cause for a new block formatting context. IE7 added an internal hack* to cause it to trigger hasLayout (IE’s buggy version of the same), so it can enclose floats. Using {zoom: 1;} is a safe proprietary property/value pair for triggering hasLayout.

hth,

gary