FREE THOUGHT · FREE SOFTWARE · FREE WORLD

Home » Software » CSS Cross-Browser Compatibility Tip

by 8 comments

AskApache.com ScreenShot - Epiphany 2.18

I've been trying to master CSS for a number of years, and rely on it heavily for every web design project I am involved in. An issue that was more important in the past but still huge today is the difference between how the various browser rendering engines and DOM engines process CSS. Basically, an WHTML Strict (the only way I code) web page can look dramatically different depending on which browser is viewing it.

Just last week I finished up an online Webinar Registration form for one of regular clients, and proceeded to send an invitation to register out to hundreds of qualified leads. I received feedback from a couple of the leads using the registration form that they were having problems seeing the submission button/image to complete the registration. I instantly realized that the problem could only be occuring because of CSS issues. These particular leads were using old versions of Apples' Safari web browser and even a version of Internet Explorer dating from the stone-age. The problem was how floated elements, cleared elements, and block level vs. inline elements are displayed in those browsers. The fix was very simple and only took me a minute or 2, but it highlighted that I have become a little to confident in my CSS cross-browser-compatibility skills.

What I used to do when I was still learning CSS was to check the web page in each of the various problematic browsers to make sure the display stayed the same. I have several actual machines and several vmware virtual machines running various browers but I decided to skip all that extra time and effort and just use an online tool to do it for me. The tool views my page in all the various browsers and generates a screenshot image from each browser so that I can see if there are issues with my CSS.

Contents [hide]

Browsershots

Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.

Below are the actual screenshots generated from Browsershots, and so this tool is incredibly helpful in verifying my sites as cross-browser compatible.

AskApache.com ScreenShot - Safari 3.0.3

Safari 3.0.3
Windows 2000

AskApache.com ScreenShot - Opera 9.24

Opera 9.24
Windows 2000

CSS Cross-Browser Compatibility TipAskApache.com ScreenShot - Epiphany 2.18

Firefox 2.0.0.9
Windows 2000

AskApache.com ScreenShot - Konqueror 3.5

Konqueror 3.5
Ubuntu 6.06

AskApache.com ScreenShot - Firefox 1.5.0.13

Firefox 1.5.0.13
Ubuntu 6.06

AskApache.com ScreenShot - Opera 9.24

Opera 9.24
Ubuntu 6.06

AskApache.com ScreenShot - MSIE 7.0

MSIE 7.0
Windows 2003

AskApache.com ScreenShot - MSIE 6.0

MSIE 6.0
Windows XP

AskApache.com ScreenShot - Firefox 1.5

Firefox 1.5
Windows XP

AskApache.com ScreenShot - Opera 9.50

Opera 9.50
Ubuntu 7.10

AskApache.com ScreenShot - Firefox 2.0.0.11

Firefox 2.0.0.11
Ubuntu 7.10

AskApache.com ScreenShot - MSIE 5.5

MSIE 5.5
Windows 2000

AskApache.com ScreenShot - Safari 1.3.2

Safari 1.3.2
Mac OS X 10.3

AskApache.com ScreenShot - Safari 3.0.4

Safari 3.0.4
Mac OS X 10.4

AskApache.com ScreenShot - Safari 2.0.4

Safari 2.0.4
Mac OS X 10.4

AskApache.com ScreenShot - Firefox 2.0.0.1

Firefox 2.0.0.1
Mac OS X 10.4

AskApache.com ScreenShot - NetFront 3.2

NetFront 3.2
Ubuntu 7.10

AskApache.com ScreenShot - Epiphany 2.18

Epiphany 2.18
Ubuntu 7.04


Tags

Comments Welcome

Information is freedom. Freedom is non-negotiable. So please feel free to modify, copy, republish, sell, or use anything on this site in any way at any time ;)

My Online Tools

Popular Articles
Hacking and Hackers

The use of "hacker" to mean "security breaker" is a confusion on the part of the mass media. We hackers refuse to recognize that meaning, and continue using the word to mean someone who loves to program, someone who enjoys playful cleverness, or the combination of the two.
-- Richard M. Stallman


It's very simple - you read the protocol and write the code. -Bill Joy

Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License, just credit with a link.
This site is not supported or endorsed by The Apache Software Foundation (ASF). All software and documentation produced by The ASF is licensed. "Apache" is a trademark of The ASF. NCSA HTTPd.
UNIX ® is a registered Trademark of The Open Group. POSIX ® is a registered Trademark of The IEEE.

+Askapache | htaccess.io | htaccess.guru

Site Map | Contact Webmaster | License and Disclaimer | Terms of Service | @Htaccess

↑ TOPMain