Introduction to Browser-Specific CSS Hacks

HTML & CSS
41

I’ve put several tricks together to make this easier:

http://www.queerminds.com/realitystorm/memory/internet/css/browser_specific_style_sheets.cfm

<link href=“/_interface/basic_css1.css” rel=“stylesheet” type=“text/css” />
<!–[if IE]><![if gte IE 7]><![endif]–><style type=“text/css”>/\/ @import url(“/realitystorm/_interface/themes/angels_and_insects/standard.css”) all; //</style><!–[if IE]><![endif]><![endif]–>
<!–[if lt IE 7]><link href=“/realitystorm/_interface/themes/angels_and_insects/win_ie.css” rel=“stylesheet” type=“text/css” /><![endif]–>
<!–[if gte IE 5.5]><link href=“/realitystorm/_interface/themes/angels_and_insects/win_ie_filters.css” rel=“stylesheet” type=“text/css” /><![endif]–>
<!–[if gte IE 5.5]><script src=“/_interface/_javascripts/imageobjectpng.js” type=“text/javascript” defer></script><![endif]–>
<style type=“text/css”>/\//*/ @import url(“/realitystorm/_interface/themes/angels_and_insects/mac_ie.css”); // </style>
<script type=“text/javascript”>if(document.layers) {document.write(unescape(‘%3CLINK%20href%3D%22/realitystorm/_interface/netscape4x.css%22%20rel%3D%22stylesheet%22%20type%3D%22text/css%22%20/%3E’));}</script>

42

Instead of using iCapture or Browsercam, you can get PearPC (www.pearpc.net / pearpc.soundforge.net) and run Mac OS X on your PC. I have Safari 1.2.4 running quite happily on my PC, which is very handy for testing out web applications with heaps of javascript and xml requests going on…

You’ll still need to buy a copy of OS X, though they’re quite cheap on eBay. Don’t get any version earlier than 10.3 Panther, otherwise networking won’t work.

43

Thanks so much for this article and all the other tips…I designed my site through IE, so now I am working backwards. This has been so helpful.

44

I’m so glad I found this article. I wish IE had a web developer toolbar which was as cool as the Firefox one so you can edit the CSS and see the changes apply immediately!

Well, that’s how I used to think! After reading your article I’ve learnt that hacks aren’t hard after all :).

45

very good article :wink:

46

right , you dont want to redo the page for your client for free for no of times that new browsers and versions emerge!

47

This is great article gives u the a better idea how css hack would work on and how to use the right in places

48

#header {margin-bottom:3em}
html>body #header {margin-bottom:1em}

it actually worked! AMAZING :smiley: tnx a million :smiley:

49

html>body #header {margin-bottom:1em}

will be understood by IE 7, coming out next year!! you have been warned!

50

May I suggest using IE conditional comments too?

http://www.quirksmode.org/css/condcom.html

Regards!

51

Hi. You have very nice website! Beautiful design.

52

html>body #header {margin-bottom:1em}

so far, IE7 beta release has not picked up on it.

53

html>body #header {margin-bottom:1em}
so far, IE7 beta release has not picked up on it.

IE7 beta2 does support the child selector. (CSS 2.1 Selector support (child, adjacent, attribute, first-child etc.))

54

Nice post. Very useful and helpful information on CSS. Its very difficult to work the CSS on IE 6 or other IE versions.

55

What about when Firefox doesn’t do what the CSS tells it to do?

56

What about when Firefox doesn’t do what the CSS tells it to do?

An example please!

57

to hide css from IE7 you can use:
html>/**/body .someClass {
}

58

cheers, Yoav Aharoni. That helped me overload a css statement that both FF & IE was recognizing. much thx

59

Excellent article! Thank you :slight_smile:

60

Yoav - that hack appears to hide CSS from IE, period. Got anything that hides CSS from IE7 but allows IE6 to see it?