Browser bugs and CSS hacks…

January 21
A

ll web designers suffer from browser bugs. Once you finished your website and prepare it to publish, you should again walk a long trip to make your website compatible in all browsers or at least in the most common browsers.

 

There are many methods to fix browser bugs, like conditional comments, using java script, CSS hacks ect…
today I will talk about CSS hacks. CSS hacks is one of the many ways to deal with browser bugs. I use it myself and find it great.

 

Most CSS hacks deal with selectors. So this is a list of browsers version and the selectors that deal with them:


IE 6 and below

* html {}

IE 7 and below

*:first-child+html {} * html {}

IE 7 only

*:first-child+html {}

IE 7 and modern browsers only

html>body {}

Modern browsers only (not IE 7)

html>/**/body {}

Recent Opera versions 9 and below

html:first-child {}

Note that these hacks rely on browser bugs or missing features. that means result may vary in some lesser-known or future browsers.

 

Now with these selectors you can edit your CSS file to make it fit to the most common browsers. Just write the selector of specific browser version, add the element name and edit its property as it should be in that browser. For example, positioning hack in internet explorer 6. if we have an element with specific height and width but of course in internet explorer 6 you will find it upper or lower than the desired position. To fix this bug, simply write its selector (*html), the element name and set a margin-top, the value differs from browser to another. In internet explorer 6, I suggest  to set random values even in minus coz internet explorer 6 doesn’t make any sense at all. See the following ex:


#button  {

width: 100px;

height: 50p;

background: url(images/button.png) no-repeat;

left: 95px;

}


*html #button  {

margin-top:-5px;

}

You can put these lines in the same style sheet you use or you can put it in a new style sheet just for internet explorer hacks and transfer your browser to it by using a conditional comments.

Next time I will talk about png fix in ie 6. hope you enjoyed my post.


StumbleUpon.com Add us to your digg favorites Add us to your delicious favorites add us to your facebook favorites follow us on twitter Add us to your technorati favorites Add us to your wordpress favorites Add us to your reddit favorites Add us to livejournal favorites

Filed under: coding

twitter this

42 Responses to “Browser bugs and CSS hacks…”

  1. runescape accounts, on April 14th, 2010 at 8:43 am Said:

    I think your blog need a new wordpress template. Downalod it from http://templates.wordpressguru.in, The site has nice and unique wordpress templates.

  2. web-designer, on April 14th, 2010 at 10:33 am Said:

    hay…i do my own theme myself, and i really love my theme. sorry if you didn’t like it.

  3. runescape accounts, on April 14th, 2010 at 10:35 am Said:

    Hello. Great job. I did not expect this on a Wednesday. This is a great story. Thanks!

  4. knight, on April 15th, 2010 at 6:45 am Said:

    I think your blog need a new wordpress template. Downalod it from http://templates.wordpressguru.in, The site has nice and unique wordpress templates.

  5. ffxiv gil, on April 16th, 2010 at 6:49 am Said:

    Great articles & Nice a site!!

  6. maplestory mesos, on April 17th, 2010 at 11:37 am Said:

    Wow! Thank you! I always wanted to write in my site something like that. Can I take part of your post to my blog?

  7. web-designer, on April 19th, 2010 at 1:06 pm Said:

    that’s ok maplestory mesos. but please make sure to add a link to the original site (my blog). glad you liked it.

  8. ffxiv power leveling, on April 24th, 2010 at 10:16 am Said:

    As a Newbie, I am always searching online for articles that can help me. Thank you

  9. runescape gold, on April 24th, 2010 at 1:02 pm Said:

    ohh ice post but really?/? :P

  10. maplestory mesos, on April 24th, 2010 at 2:16 pm Said:

    Wow! what an idea ! What a concept ! Beautiful .. Amazing ?I usually don’t post in Blogs but your blog forced me to, amazing work.. beautiful ? Please, can you PM me and tell me few more thinks about this, I am really fan of your blog…

  11. web-designer, on April 24th, 2010 at 2:34 pm Said:

    thank you maplestory, am always ready to help. if you have any question feel free to contact me from the CONTACY ME in sidebar. i checked your site it is a beautiful site too, good work.

  12. lotro gold, on April 25th, 2010 at 1:18 pm Said:

    Such a usefule blog wow !!!!

  13. guild wars 2 gold, on April 26th, 2010 at 12:35 pm Said:

    googd thanks a lot,this is very useful!!

  14. flyff penya, on April 26th, 2010 at 3:18 pm Said:

    Hey very nice blog!!

  15. eq2 plat, on April 27th, 2010 at 10:55 am Said:

    Great articles & Nice a site!!

  16. cabal alz, on April 28th, 2010 at 6:15 am Said:

    Thank you for your help!

  17. archlord gold, on April 28th, 2010 at 8:41 am Said:

    thanks !! very helpful post!

  18. ffxiv gil, on May 3rd, 2010 at 8:39 am Said:

    Good! Thank you! I always wanted to write in my site something like that. Can I take part of your post to my blog?

  19. web-designer, on May 3rd, 2010 at 8:54 am Said:

    hi ffxiv, thank you for visiting my blog and glade to find my posts useful, about coping from my blog, that’s ok as long as you point back to the original post.

  20. Mathilde Wallerich, on May 5th, 2010 at 4:00 am Said:

    you know your stuff, thanks alot, great read.

  21. Aion Power Leveling, on May 6th, 2010 at 11:23 am Said:

    There is obviously a lot to know about this.

  22. Dofus Kamas, on May 8th, 2010 at 9:08 am Said:

    Of course, what a great site and informative posts, I will add backlink – bookmark this site? Regards, Reader

  23. aion power leveling, on May 9th, 2010 at 9:14 am Said:

    Great articles & Nice a site!!

  24. Louis Vuitton Handbags, on May 27th, 2010 at 1:45 pm Said:

    Of course, what a great site and informative posts, I will add backlink – bookmark this site? Regards, Reader

  25. zaklady bukmacherskie, on May 27th, 2010 at 2:42 pm Said:

    You post great articles. Bookmarked !

  26. internet marketer- Josh Nicholson, on May 31st, 2010 at 8:11 pm Said:

    Interesting, I didn’t know that. This was very helpful information. You should check out my site! http://www.iloveinternetmarketingonline.com , Thanks.

  27. atlantica online gold, on June 7th, 2010 at 6:52 pm Said:

    Really nice post here – I don’t know why you don’t just get the most out of these tools whilst they are free.

  28. atlantica gold, on June 7th, 2010 at 7:38 pm Said:

    I truly appreciate you taking the time to post this. I really liked reading it and am looking forward to more posts from you! Keep ‘em coming.

  29. The Feel Good Feeling That You Get From Riding a Bicycle, on June 8th, 2010 at 10:58 am Said:

    Demonstrate the spirit of free style…

    My site is about the freestyle culture website, welcome to interested friends to visit!…

  30. Hope that we'd come see! Under the respective exchange ideas! Freedom to share!, on June 9th, 2010 at 6:16 am Said:

    The most followers Digg…

    Hope that we’d come see! Under the respective exchange ideas! Freedom to share!…

  31. web-designer, on June 9th, 2010 at 6:27 am Said:

    i would love to…thank you for visiting my site..

  32. web-designer, on June 9th, 2010 at 6:30 am Said:

    i will visit your site…and check it out…

  33. cabal alz, on June 9th, 2010 at 1:41 pm Said:

    Thank you for your article,It’s well written, in depth posts like these that have aided me in becoming a good forex trader.

  34. buy cabal gold, on June 9th, 2010 at 2:25 pm Said:

    Thank you for your article,It’s well written, in depth posts like these that have aided me in becoming a good forex trader.

  35. free style text, on June 9th, 2010 at 11:55 pm Said:

    JUST AWESOME!!!!!!Gr888 Job…

  36. Team Roster, on October 30th, 2010 at 8:55 am Said:

    Maybe you should make changes to the post name title Browser bugs and CSS hacks… | meinterest to more catching for your content you write. I liked the blog post however.

  37. web-designer, on October 30th, 2010 at 7:36 pm Said:

    thanks for the advice i will try to fix it. keep on visiting my site.

  38. ogorekpureki, on January 12th, 2011 at 1:29 pm Said:

    I just sent this post to a bunch of my friends as I agree with most of what you’re saying here and the way you’ve presented it is awesome.

  39. ogorekpureki, on January 13th, 2011 at 1:33 am Said:

    You certainly have some agreeable opinions and views. Your blog provides a fresh look at the subject.

  40. ogorekpureki, on January 13th, 2011 at 1:49 am Said:

    Thanks For This Blog, was added to my bookmarks.

  41. online jigsaw puzzles, on February 10th, 2011 at 2:26 am Said:

    you might have an ideal blog here! would you wish to make some invite posts on my blog?

  42. web-designer, on February 21st, 2011 at 6:32 am Said:

    glade you liked it, please pm me for more details…

Leave a Reply