Home > Website Design Tips > Test Your Web Design In Different Browsers With Browsershots.org – It’s Supa-Kool

Test Your Web Design In Different Browsers With Browsershots.org – It’s Supa-Kool

Test Your Web Design In Different Browsers With BrowserShots.org Or Else!

If you’re styling your website with CSS (who isn’t?) then you will probably be aware of some problems your styling will display on certain browsers, IE 6 and IE 5 in particular. Most designers perfect their styling in Firefox and IE 7. But how does your site look on a Mac running Safari 1.3 or Linux Opera 9.50 or WindowsXP Internet Explorer 6?

“Who cares?” says you, and that’s fine if that’s your line. Chill.

I’m not the browser police or anything, but maybe take a quick look at your website analytics. Chances are you’re getting at least half of your traffic from visitors running Internet Explorer. And chances are about half of them are still using IE 6 to view your site.

Do you know what your site looks like on IE 6?

Well lets hope it looks supa-kool but there is a likely hood that your CSS looks shi… is not displaying as you and God had intended (for reasons to do with how IE 6 renders the CSS Box model that I’m not getting into right now).

Anyway for a free or cheap solution to your browser blues check out www.browsershots.org, it’s supa-kool!

What is Browsershots?

From the horse’s mouth…

“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.”

Now the free services is fine if you have time to write your novel between loads of your screenshots but it might be best to splash out 10 or 15 notes and register for the paid service for a month at a go, it is well worth the money.

You Will Need To Know How To Target CSS for IE 6 (or other browsers) Of Course, Here’s How

In your <head></head> tags you’ll need to target your CSS for IE 6 or lower IE browser. So very quickly (because I’m late for dinner and my wife will kill me this time) add the following to the head tags:

<!–[if lte IE 6]>
<link href=”css/ie_hacks.css” rel=”stylesheet” type=”text/css” />
<![endif]–>

This will display the ie_hacks.css stylesheet for IE 6 and lower browsers. You can do this for any browser. You will of course also link or import a stylesheet for IE 7 and Firefox as normal.

I better get going!

Just keep blogging

  1. carrierpigeon24
    January 19, 2008 at 10:08 pm

    great tip, thanks!

    from TV’s Mary

  1. January 30, 2008 at 2:57 pm

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: