[Css e broswers] Carregar diferentes css para cada Browser

no próprio css você pode fazer a correção dos bugs que você quiser.

normal para FF
.umaClasseQualquer{
width: 150px;
}


Fix para ie
* html .umaClasseQualquer{
width: 190px;
}

e nesse link aqui você pode fazer a programação dele, o próprio html te da suporte a isso:

Ve se isto resolve

<link rel="stylesheet" href="style.css" type="text/css" media="screen">
	<link rel="stylesheet" href="print.css" media="print">
	<!--[if IE 6]>
	<link rel="stylesheet" href="ie6.css" type="text/css" media="screen">
	<![endif]-->

labavel:

Ve se isto resolve

<link rel="stylesheet" href="style.css" type="text/css" media="screen">
	<link rel="stylesheet" href="print.css" media="print">
	<!--[if IE 6]>
	<link rel="stylesheet" href="ie6.css" type="text/css" media="screen">
	<![endif]-->

Essa solução vai servir somente para IE,

A que o andre deu também funciona, e você pode fazer por javascript verificando qual é realmente o navegador e faz uns case e quando chegar no seu você carrega sua regra css

<link rel='stylesheet' type='text/css' href='outros.css'>
<!--[if IE 6]>
<link rel='stylesheet' type='text/css' href='ie.css'>
<![endif]-->

Quando coloco isso aqui, ele comenta a segunda importação do css. Está certo isso ?

Galera, não estou conseguindo colocar estes ifs no template central da minha aplicação que usa JSF. Algum sábio já passou por isso?

Atualmente no template esta:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Sistema</title>
<a:loadStyle src="/stylesheet/layout.css"/>   
    <a:loadStyle src="/stylesheet/theme.css"/>
    <a:loadStyle src="/stylesheet/dropdown.css"/>
...

Necessito colocar a condição no template para verificar se o browser é IE ou não, como:

<!--[if IE]>
    		<script src="/stylesheet/themeIE.css"></script>
  		<![endif]-->
<!--[if !IE]>
    		<script src="/stylesheet/theme.css"></script>
  		<![endif]-->

Caso isso não seja possível, existe alguma forma de colocar as clausulas apenas no .css ? Tipo:

<!-- Para FF -->
.slinkMenuItem {
	float: left;
	display: block;
	padding: 1px 10px;
	text-decoration: none;
	width: 100%;
}

<!-- para IE -->
<!--[if IE]>
	.slinkMenuItem {
		display: block;
		padding: 1px 10px;
		text-decoration: none;
		width: 100%;
	}
<![endif]-->

A única diferença é que no IE não pode haver a propriedade "float: left".

Pesquisei vários links como [url]http://stackoverflow.com/questions/10195310/jsf2-1-7-renders-if-ie-tag-as-text[/url] mas sem sucesso :cry:
Como fazer isso no JSF ?

Resolvido:

Reescrevi a classe do .css no template ficando:

<!--[if gte IE 8]>
		<style type="text/css">			
			.minhaClasse {
				float: none;
				display: block;
				padding: 1px 10px;
				text-decoration: none;
				width: 100%;	
			}
		</style>
	<![endif]-->

Vlws

quando eu escrevo

[if Gecko]

ele so reconhece o codigo sem o comentario. o que estou fazendo de errado?