Verschillende CSS per browser

Ik zou toch proberen om een oplossing in css te vinden die in beide browsers werkt. Verschillende versies voor verschillende browsers maken is wat mij betreft geen goed idee.

Als je je website en (relevante) css-code hier plaatst is er wellicht iemand die een oplossing weet die in beide browsers goed werkt.

Snap ik, maar het gaat om het vernieuwen van een site. Het compleet opnieuw opbouwen van de CSS is niet echt een optie.

Ik loop tegen die lijn als als ik margin-left: 1px; zet in Chrome, haal ik dat weg dan is die lijn er in FF en IE.

Plaats eens het stukje relevante CSS. Meestal is er wel een simpelere oplossing dan verschillende CSS bestanden.

Om je vraag alsnog te beantwoorden zul je iets krijgen als

<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6.css">
<![endif]-->

<!--[if lte IE 7]>
<link rel="stylesheet" href="ie7.css">
<![endif]-->

<!--[if gte IE 8]>
<link rel="stylesheet" href="ie8.css">
<![endif]-->

"lt, lte, gte, gt stand for "less than", "less than or equal", "greater than or equal", and "greater than", respectively."

@Michael, die code werkt toch niet voor FireFox?

Hier een stuk (S)CSS

Als ik in de header en het menu die margin toevoeg dan ziet het er goed uit in FF en IE, haal ik hem weg dan werkt het weer in Chrome.
[code]
#header {
float: left;
width: 980px;
height: 168px;
#link {
float: left;
width: 350px;
height: 168px;
background: url(../../assets/centipede_header_link.jpg) no-repeat;
span {
display: none;
}
}
#normal {
float: left;
width: 630px;
height: 168px;
margin-left:-1px;
border-right:1px solid $light-blue;
background: url(plaatje) $light-blue no-repeat;
}
}

#menu {
float: left;
width: 980px;
height: 50px;
background: $red;
color: $white;
font-weight: bold;
}

#nav {
height:50px;
padding: 0px;
list-style: none;
ul {
}
.left {
border-left: 2px solid $white;
}
.right {
border-right: 2px solid $white;
}
a {
font-size:14px;
text-decoration: none;
text-align: center;
font-weight: bold;
color: $white;
display: block;
width: 100%;
&:hover {
background-color: $blue;
}
&.active {
background-color: $blue;
text-decoration: none;
text-align: center;
font-weight: bold;
color: $white;
display: block;
width: 100%;
height:50px;
}
}

li {
float: left;
line-height: 50px;
width: 198px;
&.topside {
line-height: 50px;
text-align: center;
float: left;
width: 189px;
}
ul {
position: absolute;
left: -999em;
width: 196px;
margin-left: -2px;
padding-right: 2px;
border-left: 2px solid $red;
border-top: 0px;
border-right: 2px solid $red;
border-bottom: 2px solid $red;
padding-bottom: 0px;
background-color: $white;
a{
text-decoration: none;
font-weight: bold;
text-align: left;
color: $dark-blue;
display: block;
padding-left: 40px;
padding-top: 10px;
padding-bottom: 10px;
width: 157px;
line-height: 15px;
height: auto;
&:hover {
background: url(plaatje) no-repeat left;
background-color: $light-blue;
}
}
}
}
}

Heb je ook een online versie waar we kunnen zien wat er gebeurt? Zo is het nogal lastig.

Snap ik, maar het gaat om een bedrijf. Ik zal het even proberen na te maken in een fiddle.

Als je de link even plaatst is het veel handiger. Namaken schiet niet op. Die link kun je straks dan weer weghalen.

>>> @Michael, die code werkt toch niet voor FireFox?

Volgens mij is er niet zo'n zelfde manier voor FF behalve !IE.
IE is de gene die altijd moeilijk doet, dus deze troep zal alleen daarvoor zijn toegevoegd.
Probeer het gewoon niet te gebruiken ;)

Een online versie zou inderdaad een stuk makkelijker zijn.

Het gaat om dit menu: http://jsfiddle.net/4wv4d/

Ik weet niet hoe je images gebruikt bij JSfiddle (ja waarschijnlijk uploaden extern en dan een url toevoegen.)

Maar goed er is dus een image met 2 oranje balken (de plekken waar plaatje staat), het is de bedoeling dat die balken mooi uitlijnen met het menu, maar die mist 1px waardoor er een oranje lijn naast het menu en de header image komt.

Ik zie in Chrome, FF en IE je probleem niet. In Safari reageert de website wel heel raar en krijg je soms links naast je menu wat ruimte en verschijnt er rechtsbovenin een rode verticale lijn, maar dat ligt aan de grootte van het venster. Bij een kleiner venster verschuiven die oranje kolommen ook helemaal. Lijkt me ook niet de bedoeling?