Tutorials

Latest Word » Tutorials » Cross Browser CSS Fixes, Tools, and Hacks
Cross Browser CSS Fixes, Tools, and Hacks

Cross Browser CSS Fixes, Tools, and Hacks

Tags:

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!

Related Posts

Author Bio

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!

You can learn more about me or Twitter  Follow me on twitter for more updates and resources!

Did You Enjoy This Post?

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

+ Add Comment28 Peeps Have Spoken Their Minds...

  1. Danh ba web 2.0

    Nice blog ! Thanks for great tutorial

  2. Jahm Style

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

  3. dex online

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

  4. Soh

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

  5. Matthew

    thank u r information

    it very useful

    ur blog Is very nice

  6. 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

  7. Stanley

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

  8. 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

  9. Jon Williams

    Super helpful. Thank you.

  10. 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

  11. 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/

  12. NG| COLR

    where do u type those given combinations in?

  13. Soh

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

  14. Adam Winogrodzki

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

  15. Roland Burda

    Nice article! Thank you!!

  16. Adel Ahmed

    Just what I was lookin for. Thanks brah :D. And yeah, cool design, hope I can make something like this someday :p

  17. Matt

    Thanks for sharing, now there is no need to have a separate stylesheet for IE6 styles. Been looking for this for a long time! I don’t use many hacks, only when I absolutely need to.

  18. Andrew Jhonson

    To rescue the web designers from this aching job of testing browser compatibility in different browsers there are few websites which offer this service. On these websites you can check the compatibility of your website in all desired browsers. You can find these websites at http://www.bestpsdtohtml.com/7-awesome-resources-to-test-cross-browser-compatibility-of-your-website/

  19. Nick

    Would it be better to swap the !important lines around, like so:

    margin: 220px;
    margin: 200px !important; /*–The !important; hack tells IE6 to skip this line.–*/

    All browsers will read the 220px, including IE6. Then IE6 will skip the following line, but all the other browsers will read it. You will then have 2 different styles. 1 for IE6 and 1 for everything else, hopefully in the process creating a beautiful site in all browsers.

    Thought I’d mention it for those that copy/paste stuff off sites expecting it work straight off, not realising how everything works.

    :)

  20. shooter

    Nice blog it help me lot for cross browser

    Thnk u so much

  21. Nalan

    All these posts are very useful. They are nicely organized and presented. Thank you very much for this efforts.

  22. woony

    I always use: https://browserlab.adobe.com/index.html
    best way to check different browsers imho

  23. Andi

    how to fix table width problem in chrome? I have table that work fine on other browser (including IE6). I have set it to fix on 560px. But chrome render it with 770px (I check via Chrome developer tools). Can help me? thanks

    -andi

  24. sanjay

    hey man! nice tut and im one of your fan..just want to ask, do i need to put all this hacks in a website? well, im creating one right now and i was thinking if i need to put all of those in the page…thanks man! hope you could help me out..

  25. Soh

    Hey Sanjay, thanks for stopping by. No I wouldn’t recommend using hacks, but I listed these out so in case you had to use them, you had a reference to go from ;-)

Speak Your Mind...

Post HTMLNeed to Post HTML Code? Use Postable to post code friendly html. *Wrap all html code in <pre></pre> tags.
Post HTMLNeed to Keep Updated with Comments? Subscribe to comments now.

CSS Gallery