CSS tricks/hacks/filters that just work.

I dare say these tips make this thread sticky worthy. :)
I've been kicking and screaming trying to figure out a solid way to debug CSS across the top browsers and have narrowed it down to a few key methods.

First and foremost, build for Firefox! It works as intended and provides a solid base to start localizing from.

Next, debug for IE7. There is a host of debatable ways to do this depending if you care about being standards compliant or not. Frankly, Imho, if the top competitor (microsoft) isn't going to build their browsers (ie6, ie7) standards compliant, I don't see why we should kill ourselves trying to.

This one trick will solve 99% of your issues targeting IE7.
Simply add a '#' before the styles you'd like only IE to see.

Code:

---

#container{
width:800px; //all browsers will see this line
#width:780px;  //only IE 6 and 7 will see this line
}

---

Yes, it really is that easy. I'm alarmed it's not promoted more.

So while IE7 has made great strides to be more compliant, it still sucks, but not as bad as IE6, the great bane of my existence. If the IE filter (#) does not solve your issue in IE6 as well there is yet a another filter just for it.

It involves a separate selector rather than additional lines inside the same one. You start this new selector with * html and then simply enter a single backslash (\) in the name of the style.

EDIT: I want to add sticks464's correction for clarity

Quote:

---

Originally Posted by sticks464

One thing to add to the backslash hack, to work properly, the backslash must be positioned in the middle of the property and shouldn't appear before the letters a to f, or A to F, or numerials 0 to 9 - if it does, those characters will be treated as hexadecimal numbers.

---

Code:

---

#container{
width:800px; //normal styling
}

//target only IE6 (note: Don't use comments in IE6!)
* html #con\tainer{
width:780px;
}

---

It's disgustingly atrocious but hey, so is the rest of the browser.

Btw, I estimate IE6 usage to be small enough to stop supporting it by August 2009.

You know if I didn't know about that little silverlight experiment you did I might be willing support you on your sticky aspiration ;). Nice tricks, was not aware of those.

Haha, trust I'm hanging my head for that one.

I whole heartedly agree with you on older versions of IE. I don't design for them anymore unless specifically ask to. Another way to bring older versions of IE in compliance with IE7 specs is with javascript used in a conditional statement. Especially useful if using png image format. Google code

Code:

---

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

---

One thing to add to the backslash hack, to work properly, the backslash must be positioned in the middle of the property and shouldn't appear before the letters a to f, or A to F, or numerials 0 to 9 - if it does, those characters will be treated as hexadecimal numbers.

You can also use the decedent selector which is not recognized y IE6. Unfortunately for my job we still have to support 6.

div {
//rules for ie6
}
body>div{
//overwrite specific properties for standards compliant browsers.
}

Great notes sticks. I'm kinda against using js for layout since I believe a site should be progressively enhanced and degrade gracefully.

I did not know about the \hex thing. Very helpful. If I were a mod I'd edit my post to include that.

I might try the reverse method you posted kortex, though it just seems wrong to give ie6 the first shot. It's styles should act like bottom feeders imo since the browser is a bottom feeder too. :D

I agree, I can't wait until IE6 goes away. Generally what i do with that trick is write the most general styles that apply to all browsers and then override only the specific ones that need to be reset using the decedent selector, which most often for me are margins and padding. So I am not really specifically targeting IE6 with that first block, thats where the most broad rules that apply go.

It's nice to see that Netscape has gone from the statistics, but it is unfortunate that IE6 still holds a large percentage of users. I am so glad that Firefox 3.0 has now taken on some of the accessibility features that only IE previously had, making it the most versatile browser. The most useful tool i've found to aid cross browser designing is the developer toolbar that you can download for Firefox. It doesn't give you a view of other browsers, but if you know what the differences are, you can turn off certain functions, which will give you a good idea of what's going on.

That said, the # fix for IE is certainly a gem. I've not tried it yet, but if it works as well as you say, then it'll be the easiest and most recognized fix for css scripting when all other semantic methods fail.

Good job.

A fix that I recently found after trying numerous other to no avail, for the dotted or dashed border around links when clicked (for Firefox) is to add
outline:0; to the css of the a or a:link.

This is the rule I use to remove the dotted lines in Firefox. It has worked flawlessly for me. I'm not sure where I got it from though.

Code:

---

/** No more dotted borders in Firefox! **/
input:active, a:active
{
        outline: none;
}

input:focus, a:focus
{
        -moz-outline-style: none;
}

---

Quote:

---

Originally Posted by MyFriendIsATaco

This is the rule I use to remove the dotted lines in Firefox. It has worked flawlessly for me. I'm not sure where I got it from though.

Code:

---

/** No more dotted borders in Firefox! **/
input:active, a:active
{
        outline: none;
}

input:focus, a:focus
{
        -moz-outline-style: none;
}

---

---

where in the bloody hell do i put this code... i assume in the actionscript, but it gives me an error... so i try it in the html under the css style and it does nothing...

That is a great note. I believe a site should be progressively enhanced and degrade gracefully.

I did not know about the \hex thing. It is very helpful.

I would just like to point out the last line of my un-edited original post.
http://www.techcrunch.com/2009/07/14...pport-goodbye/
I may have been dead on about that date.

CSS Hack for Chrome, Safari, and Internet Explorer 8
GiantIsland CSS Hack (Affects Internet Explorer 5-8, Google Chrome, and Safari 1-4!)
http://www.giantisland.com/Resources...ariAndIE7.aspx