Hej,

Nu har jag suttit många långa timmar och försökt få ihop varför jag inte kan få IE och Firefox att visa mina knappar på samma sätt. Jag vill ha "dynamiska knappar" så att de expanderar utifrån hur lång texten inom knappen är. Men jag kan inte få paddingen att stämma. Ändrar jag i "vänster" så att den funkar för FF så pajar den för IE och vice versa. Så här blir det:

http://www.ourlaughs.com/fel.gif

Ser ni nåt fel i CSS-koden nedan? Hur kan man göra för att få det att fungera? Jag har funderat på att ha olika CSS för olika browsers men det känns väldigt overkill.

#tabs ul {
margin-left: 0;
padding: 0;
display: inline;
}

#tabs ul li {
margin-right: 10px;
padding: 0 0 0 0;
background: url(images/button_left.gif) no-repeat left top;
list-style: none;
display: inline;
}

#tabs ul li a{
margin-left: 10px;
padding: 8px 25px 25px 10px;
background: url(images/button_right.gif) no-repeat right top;
list-style: none;
display: inline;
font-weight: bold;
}

#tabs ul li.here {
list-style: none;
display: inline;
}

Att IE och Fx inte är överens är inte direkt någon nyhet. En lösning kan vara att ange samma värde två gånger med värdet för IE sist och med t.ex. ett underscore inblandat.

#baba {
margin-right: 10px;
_margin-right: 5px;
}

Jag har för mig att jag har gjort något liknande vid ett par tillfällen.

#tabs ul {
margin-left: 0;
padding: 0;
display: inline;
}

#tabs ul li {
margin-right: 10px;
padding: 0 0 0 0;
background: url(images/button_left.gif) no-repeat left top;
list-style: none;
display: inline;
float: left; /* Lägg till en float här */
}

#tabs ul li a{
margin-left: 10px;
padding: 8px 25px 25px 10px;
background: url(images/button_right.gif) no-repeat right top;
list-style: none;
display: inline;
font-weight: bold;
float: left; /* Lägg till en float här */
}

#tabs ul li.here {
list-style: none;
display: inline;
}

Jag har förstått att det är problem med gemensam kompabilitet mellan IE och FF men det har aldrig blivit så uppenbart som med det här.

Slaktad: Ska testa det.

Westman: Hur fungerar det? Tar IE den med _ eller? Varför skulle de olika webbläsarna använda olika?

Fx anser, helt korrekt, att _height inte är samma sak som height och eftersom _height inte är ett känt attribut så skippar Fx helt sonika den raden. _ anses som skräp av IE och "filtreras bort" och kvar blir alltså height.

Jag är inget proffs på css men så har jag förstått det hela.

Det är grunderna för CSS-hacks. Man hade också kunnat använda sig av "Star Hack" för IE. Själv rekommenderar jag dock "Conditional Comments", då löper man i a f inte risk att råka göra ett helt Stylesheet förlegat pg a att någon annan webbläsare helt plötsligt tolkar regler som börjar med underscore. I vissa fall kan CSS-hacks vara inkorrekt CSS, och att förklara hela sin CSS-fil ogiltig pg a "Det blå E:t" är lite korkat.

Inkludera bara ovanstående sist i Head (så att det skriver över tidigare definierade regler) och lägg allt IE-specifikt där.

Och, som svar till ovanstående fråga, nu har jag bara skummat igenom koden (no testing) men felet är förmodligen att du sätter allting till inline-element. Padding och Inline har alltid rimmat illa. Eftersom alla element (utom Anchor) är block-element så är det bara att ta bort display: inline. Ersätt med float, som "skapar" block-element som flyter.

Så Slaktads lösning är då korrekt.

Ett annat tips som kan vara bra i vissa fall är att använda sig av !important. Firefox och andra moderna webbläsare förstår detta men IE gör det inte.

padding: 3px !important;
padding: 5px;

Ovanstående kommer Firefox m fl utläsa som att 3px-regeln är viktig och följaktligen ignorera nästa rad. IE som är lite sämre på CSS kommer inte förstå första raden, ignorera den och istället använda 5px som padding. Detta är helt korrekt CSS vilket ju alltid är bra. Om jag inte missminner mig så kommer box-modellen i IE7 vara mer korrekt och kanske har de också implementerat stöd för !important. Är dock inte säker.

IE 7 förstår !important, vilket kommer innebära att man genast får uppdatera sin CSS-fil så fort . Conditional Comments är vad Microsoft själva rekommenderat.

Och IEs felaktiga Box Model uppstår ändå bara i Quirksmode, så om inte annat så kan man ju nöja sig med att använda korrekt HTML och hoppa över allt vad CSS-hacks och Conditional Comments heter ;) . Visserligen inte helt sant, men ändå...

Hej igen,

Har kommit hem och prövat lite nu. Fick aldrig _padding att fungera men !important fungerar. I alla fall i ett tag (tills IE7 kommer)....

Det är för övrigt mer än var IE7 gjorde. Laddade ner den idag och den hängde sig innan den ens startade :/

Kaffe: Ska testa din lösning också. Ska man bara lägga den IE-specifika taggen där och sen ha en kopia i den "vanliga" CSS-filen? Eller ska man ha två likadana CSS som bara skiljer sig i den krånglande taggen?

Du ska inte behöva hacka IE för en sådan sak du vill åstadkomma. Se till att ha valid kod och kör med min/Kaffes lösning så ska det funka.