Tutorials

Cross Browser CSS Fixes, Tools, and Hacks

Tags: Beginner

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!