CSS and Browser Testing 3

[Quehay]

(I'm not a regular in this forum, so I did a keyword search first and didn't find a good treatment of this topic.)

If I write a page that relies heavily upon CSS for layout (I can do tables no problem but CSS is so much better if you can count on faithful browser rendering), and I'm wondering how much cross-browser testing should be done before release.

I've validated with W3C validator before, but it returns some bogus stuff, it would seem, just because the CSS code is formatted thus:

[tt]
div.header
{
position: absolute;
left: 0;
} [/tt] , etc.

How many well-known browser problems are lurking out there that those of you who do web front ends full-time are aware of? Obviously a broad topic, but some general proofing guidelines and gotcha alerts would be much appreciated!



Jeffrey R. Roberts
Insight Data Consulting
Access, SQL Server, & Oracle Development

http://www.InsightDataConsulting.com

 

[Quehay]

To clarify: Just browser problems with compliant CSS, not all the Javascript bugs, testing and workarounds...

Jeffrey R. Roberts
Insight Data Consulting
Access, SQL Server, & Oracle Development

http://www.InsightDataConsulting.com

 

[petey]

That would be a long list, but here's some search term combinations to use in Google that would help you find what you're looking for:

CSS bugs and workarounds
CSS box model bugs
CSS browser support

For general rules of thumb, float is error-prone, and be aware of the right (and wrong) way browsers calculate the width and height of elements that have padding, margins and borders. See

http://www.tantek.com/CSS/Examples/boxmodelhack.html

for details on that.

http://www.drpeterjones.com/

News and views of some obscure guy

 

[Quehay]

What I'm looking for is anecdotal advice (and I offer it elsewhere where I'm qualified) to the effect of "I test it with IE5, IE6, and NS6, and if it looks OK I go with it.", "Netscape doesn't recognize nested DIV's", or your box and float advice (Thank you). (I don't read, post queries, or offer submissions in TekTips about, for, or of Google tips.)

Jeffrey R. Roberts
Insight Data Consulting
Access, SQL Server, & Oracle Development

http://www.InsightDataConsulting.com

 

[Vragabond]

I maintain a CSS only site at work and I regularly test it on Mozilla 1.4+, Opera 7 and IE6. Sometimes IE5.5. There's an excellent page (

http://www.danvine.com/icapture/)

which allows you to see your page through Safari browser for Mac.

If proper methods are used, Opera na Mozilla will give the same result but I have seen them render a page completely differently. But this happened because of a wrong solution people used.

One great thing to do is to specify a doctype on all the docs (I use xhtml 1.0 strict, but transitional works fine as well), because it cancels a myriad of IE quirks.

Usually things look ok at first in Mozilla and Opera (and Safari) and then I have to employ a box model hack to adjust the size of the boxes for IE. IE for MAC is another problem but I usually ignore it since I don't own a Mac and cannot test it properly and because its CSS support is so bad that it might not be worth it. This said, the page still looks ok on that browser, I just don't bother with the details to make it look perfect.

Oh, another thing, my pages always validate as xhtml 1.0 strict and css validates as well. I've never had any problems with validator showing bogus stuff.

 

[Quehay]

Thanks!! I need to go to W3C and read on the xhtml standard, as this is unfamiliar to me. Is there a significant difference between declaring 4.01 Trans vs. xhtml 1.0 strict?

It's funny, since the Mac world is so self-righteous about their graphics WYSIWIG, why wouldn't Mac be up to W3C compliance?

Jeffrey R. Roberts
Insight Data Consulting
Access, SQL Server, & Oracle Development

http://www.InsightDataConsulting.com

 

[Vragabond]

Actually, the problem is only IE5 on Mac. I think it is a pretty old browser, IE never had a good CSS support (doesn't even have it now) and I do believe the work on this browser has been discontinued. Safari for Mac is fully W3C compliant and renders pages beautifully.

On the 4.01 trans and xhtml 1.0 strict I am not sure if there is any difference when it comes to shutting down the browser quirks. What you need to do is correctly apply the Doctype (like stated at the w3c website) so that it points to a existing DTD on their page so that the browser can use that definitions instead of its own to render the page. I just checked one of my sites with HTML4.01T DTD instead of XHTML1.0S and it looks the same in IE, so I guess it does not really matter. The difference between the two is the strictness of the language (XHTML strict needs every tag closed, all tag names and attributes must be lower-case, all attribute values must be in double-quotes, etc.).

 

[BillyRayPreachersSon]

Great tip about the Safari site, Vragabond... Thanks!

Dan