CSS Mysteries Revealed

Can pages look the same across all browsers? Is it really possible? Almost! For the most part, if you stick to the CSS standards (W3Schools), then with the exception of some very minor variations, your pages will look the same. I know at times it seems almost impossible, but its not. The key to cross-browser design is knowing what objects do what in each browser. For example, nested floating divs will not make the parent div expand in Firefox, however in IE, the div will inherit the child's properties. Why? who knows, but there are solutions to each issue.

I always make good practice of making sure that the div which will contain the most information (be the biggest in size), is not floating. This way, the parent divs will always inherit the size. Otherwise, you just have a bunch of stuff floating around your page.

Typically, I focus on designing in IE6 and Firefox 2, and for the most part, if it looks good in these 2 browsers, then it will display correctly in the rest......EXCEPT for IE7 or the NEW IE8. I'm not sure what Microsoft was thinking on this one. You would hope that with the new browsers, they would be more compatible to css. Unfortunately, this is not the case. But, like I said, if you stick to the rules, you will usually be okay.

If you are desperate and have tried everything, email me and I will try to help. I have pretty much uncovered every css mystery.

Here are some links to sites that will display a screen print of what your pages look like in different browsers. They are really cool and have saved me a lot of time and headaches with clients. If you find some more please let me know!

http://ipinfo.info/netrenderer/index.php
http://browsershots.org/
http://www.iecapture.com/

P.S. If anyone has the IE8 Beta installed, can you let me know how this page is displaying? The rendering engines have made a mess of it, so I am hoping that Microsoft did not go backwards, and it is just a rendering error. Thanks for your help!

Happy Designing!

Sol