using different CSS coding for IE and FireFox

[jl9148]

i made a website that look perfect on firefox, yet on internet explorer- it happens to have a small flaw.

is there any way i can create codes different for each browser?

like if they are using IE- show code A
and if they are using FireFox- show code B

[oracleguy]

Yeah you can. What you can do is have your main stylesheet work for firefox. Then make a second one that changes the values that needed to be changed to make the design work in IE. Then you can use conditional comments to make the second one only load under IE.

Example:

<link rel="stylesheet" type="text/css" href="/primary.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/secondary.css" media="screen" />
<![endif]-->

[mark87]

Also remember IE6 and below treat things a bit different to IE7 so you may wish to just specify the stylesheet just to version less than or equal to IE6.

<!--[if lte IE 6]>

Small flaws can also be delt with hacks such as the * html {} hack, where only IE processes the CSS.

[jl9148]

is there a way to put a code in the actual .css file? or betweek the <style></style> tags?

[mark87]

As I said, with the star html hack you can do that, but since IE7 has come along it's now discouraged...

[jl9148]

so lets say i have a div that its ID="blah"

am i going to put..

* html #blah
{ }

[mark87]

Yup.

* html #blah { margin-top: 10px }

...would make IE give #blah a top margin of 10px. Other browsers would ignore it.

[felgall]

Yup.

* html #blah { margin-top: 10px }

...would make IE give #blah a top margin of 10px. Other browsers would ignore it.

...would make IE 6 and below give #blah a top margin of 10px. Other browsers including IE7 would ignore it.