Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


CSS behavior in different browsers

Posted on 2011-04-20
Medium Priority
Last Modified: 2012-05-11
Maybe this is pie in the sky, but are there any tools for free or for under $50 that will tell you or help you write CSS that is cross-browser compatible, or help you identify CSS properties that are likely to work in some browsers and break in others?
Question by:Tom Knowlton
  • 2
LVL 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 400 total points
ID: 35437738
No.  The reason is that CSS on a page depends on the other things on the page just like HTML does.  Something that might work well by itself may not work so well if it has to depend on previous CSS declarations on the page.  The only thing to do is get all the browsers and check your pages in each one of them.
LVL 22

Accepted Solution

remorina earned 1600 total points
ID: 35437790
Unfortunately it's always a bit tricky when it comes to cross-browser CSS, so far I'm not aware of any tools that pinpoints CSS incompatibilities with specific browsers unless you're looking at CSS3 or HTML 5, if this was the case then you might be interested in looking at the below links which provides extensive information about specific CSS rules and their browser/version support.


Where if you're not after HTML5 and CSS3, the best you could do is ensure you have a validated markup and css, this would be more than 50% of achieveing cross-browser compatibility.
A good reference and links can be found here

Also as a personal experience I always say "Design and code for FireFox, troubleshoot for IE"
When coding for FireFox you're most likely to get very similar results with other brosers such as Chrome and Safari where the most likely browser to give issues is IE, so by doing so you save yourself most of the pain of troubleshooting for each browser individually when you write for IE.

I hope this helps!

Author Closing Comment

by:Tom Knowlton
ID: 35476664
LVL 84

Expert Comment

by:Dave Baldwin
ID: 35477003
The site http://www.quirksmode.org/compatibility.html has tables that show differences in browser implementations.  It doesn't directly address 'compatibility' for reasons above but you can often find out if a particular element is not supported by a particular browser.

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses
Course of the Month14 days, 8 hours left to enroll

577 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question