[CSS] FireFox rekent anders met borders en padding dan IE

[pelleke]

Hallo!

Ik probeer een CSS navigatie-bar te maken. Hiervoor maak ik in een tablecell een div#navbar met daarin wat losse linkjes. Om de boel mooi te versieren krijgen de linkjes een border-right van 10px en een padding van 3px. En de hele div krijgt een 1px solid border.

Nu gaat dit in IE allemaal goed: de 10px border en 2x3px padding worden netjes meegerekend in de Width, maar bij Firefox is dat niet het geval. Hier steekt een link letterlijk 16 pixels naar rechts uit, en overlapt hij dus de 1px border van de div. Als ik de onderste regel CSS vervang door 'Width=104' dan doet ie in FireFox in principe hetzelfde als in IE met 120.

Heeft iemand hier een oplossing voor?

Cascading Stylesheet:

div#navbar {
font-family: Verdana, Helvetica, Arial, sans-serif;
...
border: solid #000000 1px;
width: 120px;
}

#navbar a:link, #navbar a:visited {
color: #990000;
border-right: solid #990000 10px;
padding: 3px;
display: block;
width: 120px;
}

[BasieP]

heb je misschien een linkje? dan kan ik zien wat je bedoelt

[pelleke]

Ik moet mij excuseren; het probleem blijkt een kwartier geleden al te zijn behandeld in dit draadje. (De TT van die draad leek me in eerste instantie niet relevant, vandaar dat ik toch heb gepost. Sorry.)

[Superdeboer]

In principe nooit een vaste breedte én padding in dezelfde richting tegelijk opgeven.

IE gebruikt een ander box model dan Firefox, waardoor de formaten anders geïnterpreteerd worden. Hoe dat precies uitwerkt kun je hier bekijken: http://www.quirksmode.org/css/box.html

Daar staat te lezen:

Box models

1. In the W3C box model, the width of an element gives the width of the content of the box, excluding padding and border.
2. In the traditional box model, the width of an element gives the width between the borders of the box, including padding and border.

Browser defaults
Now which box model do the various browsers adhere to without any influence from doctypes and box model hacks and such?

• Not surprisingly, Explorer keeps to the Microsoft model, with the interesting exception of Explorer 4 on Mac, which uses the W3C model. Netscape 4 and Opera 7 also use the traditional model.
• Mozilla, Konqueror/Safari and Opera 6 and lower follow W3C's standards.

Hopelijk verklaart dat je probleem een beetje.

edit:
Ik-zal-vaker-op-F5-rammen-voordat-ik-mijn-post-verstuur.

[ Voor 4% gewijzigd door Superdeboer op 23-10-2005 14:04 ]

[crisp]

Zie ook [rml][ css] floating block[/rml] - daar leggen we het zonet ook al uit

Opera en IE6 gebruiken overigens ook het W3C model bij een volledig DTD (standards compliant mode rendering).

[ Voor 35% gewijzigd door crisp op 23-10-2005 13:50 ]

[XangadiX]

pelleke schreef op zondag 23 oktober 2005 @ 13:38:
Ik moet mij excuseren; het probleem blijkt een kwartier geleden al te zijn behandeld in dit draadje. (De TT van die draad leek me in eerste instantie niet relevant, vandaar dat ik toch heb gepost. Sorry.)

allemaal naar het andere draadje dus