Css - Cross browsers

kjt

Howdy,

I've done up a website thats working fine in IE but not firefox. I can change the css to work in firefox but that screws up IE and so on and so on. I think I heard somewhere that you can put a certain symbol or piece of code in front of some css and firefox will only read that. So I could have a css file that both browsers would call but firefox would only be able to read certain bits.

Just wondering if anybody has come across anything like this?

Many thanks.

chabsey

kjt wrote:

Howdy,

I've done up a website thats working fine in IE but not firefox. I can change the css to work in firefox but that screws up IE and so on and so on. I think I heard somewhere that you can put a certain symbol or piece of code in front of some css and firefox will only read that. So I could have a css file that both browsers would call but firefox would only be able to read certain bits.

Just wondering if anybody has come across anything like this?

Many thanks.

Well you could create browser-specific CSS files, so if you're using IE you get one CSS file, and if you're using Firefox you get a different CSS file.

The majority of cross browser CSS problems can be fixed via hacks, and generally the problem is actually with IE despite IE showing the page you want and Firefox showing a broken version, mostly it's Firefox that's displaying the CSS compliant version.

That 'bit of code' you mention might be something like this:

voice-family: "\"}\"";
voice-family:inherit;


which is part of the box model hack that fixes a bug in IE 5 Win & IE 5.5 Win.

Not sure it that's what you're looking for.

kjt

Thanks for your help Chabse.
I've sort of cut it down to on line of code thats actually now in the html.
Think I could actually look at it a bit harder and sort it all out.

Thanks again

Goodshape

This works :
[html]
<link href="style.css" rel="stylesheet" type="text/css">

<!--[if IE]>
<link href="ie-style.css" rel="stylesheet" type="text/css">
<![endif]-->
[/html]

It calls the 'style.css' file first and then, if IE is detected, calls a seperate 'ie-style.css' file. You only need to include the changed bits in the second CSS file, the first one is still being processed by both browsers so anything that works in that you can simply leave out of the second one.

kjt

Super, thanks for that Goodshape

seamus

kjt wrote:

Super, thanks for that Goodshape

Indeed, good work, Goodshape.

hostyle

For future reference Goodshape is using what is know as conditional comments, something which is only supported by IE. This is the recommended method as of IE 7 for hiding CSS from non-IE browsers. Inline CSS hacks are not guaranteed to work on IE7.