FAQ |
Kalender |
2006-08-28, 08:28 | #1 | |||
|
||||
Har WN som tidsfördriv
|
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: 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; } |
|||
Svara med citat |
2006-08-28, 08:59 | #2 | |||
|
||||
Klarade millennium-buggen
|
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. |
|||
Svara med citat |
2006-08-28, 09:06 | #3 | ||
|
|||
Nykomling
|
#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; } |
||
Svara med citat |
2006-08-28, 09:32 | #4 | |||
|
||||
Har WN som tidsfördriv
|
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? |
|||
Svara med citat |
2006-08-28, 09:37 | #5 | |||
|
||||
Klarade millennium-buggen
|
Citat:
Jag är inget proffs på css men så har jag förstått det hela. |
|||
Svara med citat |
2006-08-28, 10:14 | #6 | ||
|
|||
Medlem
|
Citat:
Kod:
<!--[if lt IE 7]> <link media="screen, projection" rel="stylesheet" href="assets/css/ie.css" type="text/css"> <![endif]--> 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. |
||
Svara med citat |
2006-08-28, 10:24 | #7 | ||
|
|||
Medlem
|
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. |
||
Svara med citat |
2006-08-28, 11:56 | #8 | ||
|
|||
Medlem
|
Citat:
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å... |
||
Svara med citat |
2006-08-28, 19:34 | #9 | |||
|
||||
Har WN som tidsfördriv
|
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? |
|||
Svara med citat |
2006-08-28, 19:42 | #10 | ||
|
|||
Nykomling
|
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.
|
||
Svara med citat |
Svara |
|
|