CSS Browser Hack, different browsers, different styles

CSS          Trackback

I am totally against any CSS hacks, but sometimes if you need quick result, and you need everything to work and look exactly the same in both Firefox and IE you just have to use them. Here is simple CSS hack that you can use to apply different styles depending on browser your visitor is using.

div.test {
	background:blue;	/* Firefox, Opera */
	#background:green;	/* IE7 */
	_background:red;	/* IE6 */

First background style is compatible with all browsers (and Firefox and Opera will use this one, and stop there)
Second one (#background) will be ignored by Firefox, and you will see it in IE7, but IE7 will ignore
Third one (_background) and you will see this one just in IE6…

See this demo:
What color is a background on your screen?


Line height and superscript

CSS          Trackback

Did you ever have problem with messed line height because you are using sup tag. As you might noticed line height and superscript are not best friends. And this line of css code can make them be:

sup {font-size:80%; line-height:80%}


Fast and simple element (min) height CSS hack

CSS          Trackback

Did you ever make something which looked great in Firefox, and than opend that same thing in IE, and you saw bunch of crap? One of the reasons is IEs lack of support for CSS min-height attribute, and here is fast and simple hack for that. Just use this class for element you would like to have fixed min-height, and your life is going to be much easier.

.minheight {
	min-height: 250px;
	height: auto !important;
	height: 250px;

not only that but you can use as a min-width hack:

.minwidth {
	min-width: 250px;
	width: auto !important;
	width: 250px;


Removing Firefox’s dotted link border

CSS          Trackback

Do you hate dotted border around a link that Firefox is inserting every time you click on some link? Me too. Well here is simple CSS solution. Just add this line in your style sheet and problem is solved:

a:active, a:focus {outline:0}


CSS no-wrap equivalent

CSS          Trackback

Did you ever wanted to use good old no-wrap table field property in your CSS code but didn’t know how? All you have to do is to use this line:

.nowrap {white-space: nowrap}

and anything that is using “nowrap” class will show as good old table cell with no-wrap applied to it.