Vijaya Kumar Blog

I have been searching a lot of CSS works this week because to overcome the classic CSS battle between firefox and I.E. It’s no secret that Internet Explorer and Firefox tend to disagree on certain elements in which they render CSS properties. We can use different style sheets depends upon browser to load single page. Is it possible? Ok, if possible means how we can use different style sheets depend upon browsers? Let we see some solutions for this.

CSS for specific browsers:

IE-Only stylesheet:

<!–[if IE]>

<link rel=”stylesheet” type=”text/css” href=”ie-only.css” />

<![endif]–>

NON-IE stylesheet:

<![if !IE]>

<link rel=”stylesheet” type=”text/css” href=”not-ie.css” />

<![endif]>

IE 7 only:

<!–[if IE 7]>

<link href=”IE-7-SPECIFIC.css” rel=”stylesheet” type=”text/css”>

<![endif]–>

IE 6 only:

<!–[if IE 6]>

<link rel=”stylesheet” type=”text/css” href=”IE-6-SPECIFIC.css” />

<![endif]–>

<!–[if lt IE 7]>

<link rel=”stylesheet” type=”text/css” href=”IE-6-OR-LOWER-SPECIFIC.css” />

<![endif]–>

Internal CSS Browser hacks:

Let we see some examples to hack styles internally in browsers. CSS developers can create picture-perfect CSS without loading alternative style sheets. These hacks will useful to change 2 or 3 lines to fix the different browser issues.

IE-7 only

*+html #div {
height: 100px;
}

None IE-7 only

#div {
_height: 100px;
}

Hide from IE 6 and lower

html > body #div {
height: 100px;
}

IE 6 and lower

* html #div {
height: 100px;
}

Note: Share your ideas and thoughts to improve more via comments.