I’ve done small posts when I started doing this blog a while back, that included tips on how to hack certain browsers with CSS. I thought it would be good to list them all in one spot. I have been thinking of writing a small e-book that included all the things I have learned that I wish I knew from the start. Kind of like a super crash course in web development. Most of the things I write about, are things that would have been useful to me when I started out, but took a lot of time using google, reading, and just plain trial and error. I like to think I’m helping new web developers/designers get a kick start in their learning, and get ahead of the curve, which is what keeps me going. I actually really like mentoring new to intermediate web devs, and that is what keeps me writing this blog. Besides that, I actually end up learning more myself.

There are things that have to be done to make sure your site works in all browsers, and sometimes that means you have to do some things in your CSS to make sure everything is nice. I am going to show you the major methods of how to what we call “hack” a css file so that the browsers display the same thing. Let it be known, that it took me a while to be able to design a site without worrying about IE6. At the start, concepts of float, how margins and padding work, and other such things can be very confusing. I did a lot of hacking in the beginning before I knew how to build a site correctly. It would be great if you could just write the CSS and it all worked perfect, but even now, every once in a while, you have to do some fiddly things to get the older IE’s to cooperate. Let it be known, that I use the IE6 one quite a bit for image replacement, and if you do use these, you actually should put them in a seperate IE stylesheet. For getting things up and running quick though, I keep them in the main CSS file until I am done, and then take them out.

Now onto hacking!

First up, is how to hack the different IE’s. Here are the major four:

.myText1 { color: #00FF33; }
 
.myText2 { color /*\**/: #cc0000\9; }
 
.myText3 { color: #0000ff !ie; }
 
.myText4 { _color: #000000; }

Or, all in one style like so:

.myText1 {
color: #00FF33; 
color /*\**/: #cc0000\9;
color: #0000ff !ie;
 _color: #000000; 
}

So what do these do? Glad you asked! If you want, you can copy these styles, and test them yourself.

Line 1) Obviously targets all browsers. This is just a plain style. Nothing special here.
Line 2) Will only target IE7 & 8 (but not IE6)
Line 3) Will only target IE7 & 6
Line 4) Will only target IE6

All of these styles together will get you this effect (try it out if you don’t believe me): All browsers other than IE, will get green text. IE8 will get dark red text, IE7 will get blue, and IE6 will get black. Its crazy, I know, but still kind of cool. That is great and all, but what if Safari is giving you a problem? Well, that is pretty unlikely. But just in case, here is how you hack the CSS for it, just in case.

.myClass {
margin: 20px 0 0 ;
}
 
@media screen and (-webkit-min-device-pixel-ratio:0) {
.myClass {
margin: 0px 0 0 ;
}
}

I have no idea why you would need to margin something from the top differently in Safari, I’m just using something easy to understand in that regard. That second part of the code though would change the margin for Apple’s little darling. Unfortunately, from the tests I tried, it looks like you need another @media for each CSS rule. Sucks, but at least you know how to do it now.

And of course, what if you had to overwrite an inline style? Suppose you had this HTML:

<div style="background: red;">The inline styles for this div should make it red.</div>

You can fight that with this:

div[style] {   background: yellow !important; }

I have never had the need to do that, but just in case you do, there you go. Just because I can’t think of a reason to actually do that, doesn’t mean no one else will. I only know it because I thought I was being cornered into using it, and had to search for a way.

I really only use one of these, and that is the one for IE6. Here is what I use it for mostly:

.myClass {
background: url(../images/myImage.png) no-repeat 0px 0px;
_background: url(../images/myImage.gif) no-repeat 0px 0px;
}

I know I can use a png replacement script, but this is easier sometimes. IE6 gets a fair image, though not perfect, but it is at a suitable level of graceful degrading. If you want to see that in action, take a look at this blog in IE6. All the pngs are actually gifs in IE6, put in place using rules like the one above.

I have given you the ones I have had a need to know at one point or other. What hacks have you used?

Coupon Code: webmachine

$('#myDiv').load('newText.html');

Tags: CSS

This entry was posted on Tuesday, June 29th, 2010 at 4:13 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.