Cross Browser CSS Fixes, Tools, and Hacks

Cross Browser CSS Fixes, Tools, and Hacks

October 9th, 2008

As designers and developers we are all responsible for the product we produce, and cross browser testing is a must in our line of work. Although the W3C statistics show about 7 browsers that people tend to use most, in my opinion, two of them are the most important and should be given special attention to perfecting (Firefox and Internet Explorer).

Below are some commonly used browsers, tools, solutions, and hacks to overcome your daily issues.

Commonly Used Browsers

• Firefox - (Download)
• Internet Explorer - (Download)
• Safari - (Download)
• Google Chrome - (Download)
• Opera - (Download)

Want to find more? Checkout Smashing Magazine’s article.

Cross Browsing Tools

Sometimes its not possible to have a running browser with multiple versions (example: IE7 + IE6 on Same PC) so its useful to have standalone browsers to help you debug and test. Here are some tools below that may be helpful for you.

• IE Tester
• Browser Camp
• Browser Shots

Want to find more? Checkout Smashing Magazine’s article.

Great Articles For Your Everyday CSS Fix

• Using CSS to Fix Anything 20 Common Bugs and Fixes
• IE CSS Bugs That’ll Get You Every Time
• Solving 5 Common CSS Headaches
• Using Javascript to Fix 12 Common Browser Headaches

CSS Hacks

I hesitate sharing these hacks, because most beginners have tendencies to want to hack everything up, which leads to a nightmare in the long run. I have come a cross a few of them which I would like to share, but please use them wisely. With good XHTML/CSS structure, hacks are not needed. If all else fails, go ahead and check some of the options below.

IE Conditional Tags

<!--[if IE ]>
  <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

Checkout Site Point’s Article on conditional tags for IE

IE 6 Hack

*html .classname {}

IE 6 ‘!important’ Hack

.classname {
float: left;
margin: 200px !important; /*--The !important; hack tells IE6 to skip this line.--*/
margin: 220px;
}

IE 7 Hack

*+html .classname {}

Safari Hack

html:lang(en)>body  .classname {}

Opera 7 Hack

@media all and (min-width: 0px){
.classname {}
}

CSS Hack Resources

• Opera CSS Hack
• Google Chrome Hack
• http://www.stylegala.com/resources/css_hacks.htm
• http://www.centricle.com/ref/css/filters/
• http://www.sitepoint.com/article/browser-specific-css-hacks/
• http://www.w3schools.com/browsers/browsers_stats.asp
• http://www.webdevout.net/css-hacks

Conclusion

As you can see, testing and making your design work in all browsers can be a pain at times, but the more you get the hang of this the smoother your work flow will be. If you have any other solutions, tools, or tricks of your own, I would love to hear about it!

Did You Enjoy This Post?

Subscribe via RSS ,by email, or by twitter to get all upcoming
tutorials and articles delivered straight to you.

Bookmark or Share this Post!

Tags: Browser, CSS Bugs, Downloads, hacks, tools

This entry was posted on Thursday, October 9th, 2008 at 8:36 am and is filed under CSS/XHTML, Resources & Tools. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

17 Responses to “Cross Browser CSS Fixes, Tools, and Hacks”

1. Oct 10th, 2008 @ 6:11 am Danh ba web 2.0

   Nice blog ! Thanks for great tutorial

2. Oct 10th, 2008 @ 8:43 am Jahm Style

   Purfect tools I look for and hacks. Very nice thanks!

3. Oct 10th, 2008 @ 1:32 pm dex online

   very nice tips, thank you!
   this is for opera:
   @media screen and (min-width: 10px){
   .yourstyle {}
   }

4. Oct 11th, 2008 @ 12:51 pm Soh

   Thanks Dex, Ill add that to my list! Thanks!

5. Oct 14th, 2008 @ 4:38 am Matthew

   thank u r information

   it very useful

   ur blog Is very nice

6. Oct 29th, 2008 @ 6:58 am Neal G

   Here is another article with some slightly different hacks for Firefox, Opera and Safari.

7. Oct 31st, 2008 @ 6:00 pm vanseodesign

   [...] Cross Browser CSS Fixes, Tools, and Hacks [...]

8. Nov 1st, 2008 @ 4:49 pm blog engage

   [...]Cross Browser CSS Fixes, Tools, and Hacks[...]

9. Nov 2nd, 2008 @ 12:22 am Alex at Net-Entrepreneur.com

   Very good! I’ve been battling bugs for ages.
   Hate IE… Why don’t they keep up with technology?

   Cheers,
   Alex

10. Nov 3rd, 2008 @ 11:24 pm Stanley

    Really awesome. Thanks for the great information. This is what, I was waiting for…

11. Nov 11th, 2008 @ 2:49 pm dersleri

    Cascading Style Sheets (CSS) web design lessons
    Css link Properties Attributes - examles

    http://css-lessons.ucoz.com/link-css-examples-1.htm
    http://css-lessons.ucoz.com/link-css-examples-2.htm

12. Dec 2nd, 2008 @ 10:23 pm Jon Williams

    Super helpful. Thank you.

13. Jan 2nd, 2009 @ 6:17 pm van

    is there a way to hack the print function of each browser? the print.css is fine in safari/firefox but looks hideous when printed in IE6

14. Jan 6th, 2009 @ 5:57 am Soh

    Hey Van, Im pretty sure you can use the *html hack in your print style sheet to target IE6 Specifically. I have not tested it but I would give that a shot first~

    Check out the print article if you have any questions regarding the print style sheet : http://www.sohtanaka.com/web-design/print-css-javascript-icons/

15. Jan 15th, 2009 @ 7:31 am NG| COLR

    where do u type those given combinations in?

16. Jan 15th, 2009 @ 8:29 am Soh

    Hey NG| COLR, did you mean where do you add the hacks on the style sheet?

17. Apr 19th, 2009 @ 12:56 pm Adam Winogrodzki

    a nice tut by which a person can solve all of its css problems ! Thanks!

Speak Your Mind…