Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] style: width klopt niet in Firefox

5 antwoorden
  • Ik begin een beetje wanhopig te worden. Ik ben bezig met een nieuwe html pagina, maar ik krijg mijn layout maar niet in orde. Ik doe alles met divjes, die d.m.v. het ID element een style meekrijgen, waarin o.a. de positie is geregeld. (Divjes worden anders standaard onder elkaar gezet, en ik wil juist kolommen) Nu test ik mijn maaksels in eerste instantie in zowel IE6 als Firefox 0.9, maar beiden geven een ander resultaat. Na enig onderzoek, ben ik er achter gekomen dat Firefox de opgegeven formaten eenvoudigweg te ruim neemt. Zo had ik een kolom (div) van 200px breed. Explorer gaf het keurig netjes weer, zoals de bedoeling was. Firefox overlapte de naastgelegen kolom, en bleek de 200px naar 214 px te hebben vergroot. Ook de hoogte van 30px werd door Firefox verhoogt naar 35px. Toch moet het mogelijk zijn om dit te verhelpen, want ik ken genoeg pagina´s die op dezelfde manier werken, en die dit probleem niet hebben. In het verleden heb ik wel eens dergelijke problemen verholpen door alle marges een vaste waarde te geven, omdat sommige browsers de default anders interpreteren, maar dat mag in dit geval niet helpen. Alle marges op 0, in zowel body als style, maakt geen enkel verschil. Hier een klein voorbeeldje van een van mijn style regels: [code:1:b34e6160a1] #leftcolumn { background-color: #FFFF99; border: 2px solid #FFCC00; width: 200px; height: 30px; margin: 0px; padding: 5px; position: absolute; left: 5px; top: 110px; } [/code:1:b34e6160a1]
  • Helaas doet firefox het wel goed. De manier om de breedte te bepalen is volgens het w3c, die de standaard voorschrijven, id dat bij 'width' geen rekening wordt gehouden met padding, margin of de border. Deze moeten dus allemaal bij elkaar opgeteld worden voor de totale breedte. Bij jou betekent dat 200px + 2 * 5px + 2 * 2px. Ik noem dat helaas, omdat het eigenlijk behoorlijk onhandig en onlogisch is. Bijvoorbeeld bij de code: [code:1:627adfb251]#eenid { width:100%; padding: 2px; }[/code:1:627adfb251] gaat het al helemaal mis. Je krijgt dan altijd een horizontale scrollbalk te zien, want de breedte is 100% + 4px :-? Maar het is dus wel de manier hoe het 'hoort'. Microsoft denkt er (natuurlijk) anders over en heeft zijn eigen model. En in dit geval geef ik ze groot gelijk, want het is veel logischer. Er bestaan wel fixes voor deze situatie, want natuurlijk hebben meer mensen hier mee te maken, maar ze gebruiken of javascript: bijv. http://archivist.incutio.com/viewlist/css-discuss/13533 of maken gebruik van browserbugs bijv. http://glish.com/css/hacks.asp Naar mijn mening een erg smerige oplossing, maar we zullen het er maar mee moeten doen tot het w3c het probleem onderkent en zo slim is om een innerwidth en een outherwidth property aan css toe te voegen. (innerwidth = zonder margin padding of border, outerwidth is alles erbij) zoek voor meer of ander oplossingen met google naar 'box model fix'
  • Tnx! Hier kan ik zeker wat meer. Zo zie je maar, je bent nooit te oud om wat te leren :D Overigens, ik vond het inderdaad al zo vreemd te constateren dat IE het "goed" deed en Firefox "fout" omdat ik het eigenlijk andersom gewend was.
  • Het W3C heeft 'box-sizing' ('-moz-box-sizing' in Mozilla) geintroduceerd (css3-ui) om dit probleem te verhelpen. Eventueel zal de css3-values module een 'calc()' value introduceren die als volgt gebruikt kan worden:[code:1:c517f8b00e]element{ calc(100%-2px); }[/code:1:c517f8b00e]Momenteel kun je die uiteraard niet gebruiken, maar 'box-sizing' heeft ondersteuning. (Zet IE in quirks mode en je kunt er rustig gebruik van maken.)
  • -moz-box-sizing die kende ik nog niet, bedankt!

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.