Jul
18

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:
Demo
What color is a background on your screen?
css-different-browsers-different-styles


May
23

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%}


Mar
24

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;
}


Feb
18

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}


Feb
18

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.


top