Cross Browser CSS Fixes, Tools, and Hacks

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

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.

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

Great Articles For Your Everyday CSS Fix

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

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.

 

About the Author

admin
My name is Soh Tanaka and I am a Los Angeles based designer/front-end developer specializing in CSS driven web design with an emphasis on usability and search engine optimization. I also run a CSS Gallery which is updated daily with the best CSS websites from around the world. Come check it out!

Be the first to comment on "Cross Browser CSS Fixes, Tools, and Hacks"

Leave a comment

Your email address will not be published.


*