Browsershots -Test web page design in various browsers

Recommended Videos

How To Test Your Website In Different Browsers and Mobile Devices - Google Chrome & Firefox DevTools
How To Test Your Website In Different Browsers and Mobile Devices - Google Chrome & Firefox DevTools
Browsershots -Test Your Site With Different Web Browsers
Browsershots -Test Your Site With Different Web Browsers
Test your Website in all the popular browsers!!
Test your Website in all the popular browsers!!
What is Browser Compatibility? (Browser Testing)
What is Browser Compatibility? (Browser Testing)
How to check website for responsive working in different browsers - Test Responsive Website
How to check website for responsive working in different browsers - Test Responsive Website

Most CSS developers, including wordpress theme developers and web page designers, would like to see how the different browser rendering engines and DOM engines process their CSS.An XHTML Strict web page can look dramatically different depending on the browser used to view it.

How to test web page design in various browsers?

Testing web page layouts and design in varied browsers is made easy by Browsershots.Browsershots is a free open-source online service that takes screenshots of your web page design in different browsers.

Go to Browsershots and submit your web page address.Browsershots will add it to the job queue.Bookmark this page or keep this page open in your browser.A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server.Return to the bookmarked browsershots page and you will be presented with the screenshots from the central server.

Thilak reported me a bug on Techblissonline.com.This is what he said:

BTW, the comment text area is a bit buggy for me. I guess, comment preview is to be blamed for this.

He was right, but it was not a bug with comment preview.Rather it was a CSS issue.The footer of this blog has a container div that holds four child divs.These child divs had the CSS float property set on it.Initially i fixed it for Firefox by commenting out the position property for these divs.Earlier I had assigned position property as “relative” for these child divs.

But the issue persisted in IE(version 6.0.2800).The fact that IE has issues in rendering floats(known popularly as “escaping floats bug”) is well known.IE 6 does not fully comply with W3C standards.

How did i fix the floats problem/bug in IE?

The container div had no height set on it.This caused the floating child divs to escape.I resolved this issue by giving a height to the containing div.But many do not prefer this solution, as it would give a fixed height to the container.PIE has the solution.

Related Videos

How To Test Your Website In Different Browsers and Mobile Devices - Google Chrome & Firefox DevTools
How To Test Your Website In Different Browsers and Mobile Devices - Google Chrome & Firefox DevTools
Browsershots -Test Your Site With Different Web Browsers
Browsershots -Test Your Site With Different Web Browsers
Test your Website in all the popular browsers!!
Test your Website in all the popular browsers!!
What is Browser Compatibility? (Browser Testing)
What is Browser Compatibility? (Browser Testing)
How to check website for responsive working in different browsers - Test Responsive Website
How to check website for responsive working in different browsers - Test Responsive Website
4 comments on “Browsershots -Test web page design in various browsers
  1. I tested browser shots some time back while designing my theme. It asked me to wait for 30 mins and after that gave the error about unable to produce screenshots. It really bugged me, I hope things are bit fast now … πŸ™‚ ..

    and hey .. did you get my email ?? πŸ™‚

    kanak’s last blog post..Jan 6th’2008 : And the new year winners are ……

  2. yep it was good for me…gave me all the screenshots…

    yes kanak …just checked it…thanks buddy…

  3. Browser shots is definitely a good option to check the design in multiple browsers, but sometimes, it takes lot of time as mentioned by Kanak.

    Nirmal’s last blog post..Sony Ericsson Latest Model: K850i 5MP Camera Phone Review

  4. That is nice tool

Leave a Reply

Your email address will not be published. Required fields are marked *

*