[firefox] firefox berekent borders anders als IE

[Jazzle]

Ik heb een probleem met een website die ik aan het maken ben, en het probleem is dat firefox de borders anders rekent. In IE is de website zoals die hoort, maar in ff is het menu te breed, dit is op te lossen door de table breedte op 798px ipv 800px te zetten, maar dan werkt het weer niet in IE.
het gaat om deze site: http://home.planet.nl/~leth0029/site/base.html en deze css: http://home.planet.nl/~leth0029/site/style.css de css en xhtml zijn beide valid. hoe kan ik dit probleem oplossen?

[nsa1984]

Welkom in het box verhaal van w3c en Micrsoft.

Nee ik ga het niet uitleggen, maar een beetje zoekwerk op GOT en google had gemogen.

box-model.

Sorry voor mijn iet wat botte reactie. Maar dit is al heel vaak aan de orde gekomen. probeer het even uit tezoeken.

[ Voor 29% gewijzigd door nsa1984 op 15-11-2005 16:14 . Reden: excuses bot gedrag. ]

[Xander]

Zonder even op de details in te gaan, ik snap namelijk zelf ook nooit waarom het zo is, maakt me ook weining uit...

Maar als je die "menu" table nou eens 100% maakt ipv 800px? Volgens mij klopt ie dan in beide?

[nsa1984]

XanderH schreef op dinsdag 15 november 2005 @ 16:16:
Zonder even op de details in te gaan, ik snap namelijk zelf ook nooit waarom het zo is, maakt me ook weining uit...

Maar als je die "menu" table nou eens 100% maakt ipv 800px? Volgens mij klopt ie dan in beide?

Helaas niet XanderH

het probleem zit hem in het feit dat w3c steld dat de border, marge en padding buiten de contente blok horen. Microsoft steld dat alles in dat ene content blok hoort.

en kijk eens naar het css

wat zie ik daar helemaal aan de onderkant...

code:

td.content
{
    background-color: #E4E4E4;
    border-right: 1px solid Black;
    border-left: 1px solid Black;
}

border-right 1px en border-left1px.

en wat zegt BlackJack in zijn TS ?

BlackJack schreef op dinsdag 15 november 2005 @ 16:09:
dit is op te lossen door de table breedte op 798px ipv 800px te zetten, maar dan werkt het weer niet in IE.

jackpot
hoeveel pixels afwijking?
hoeveel pixel bestaan die borders uit ?

gefeliciteert u mag door voor een koelkast

[disjfa]

nsa1984 schreef op dinsdag 15 november 2005 @ 16:22:
[...]
het probleem zit hem in het feit dat w3c steld dat de border, marge en padding buiten de contente blok horen. Microsoft steld dat alles in dat ene content blok hoort.

Ik zou als ik jouw was het verhaal nog een keer opnieuws lezen.

Mooie uitleg

[RM-rf]

http://www.quirksmode.org/css/box.html

de snelste oplossing kan zijn om gewoon mozilla te laten renderen via het border-box-model van MS

[lemming_nl]

blaat

[ Voor 98% gewijzigd door lemming_nl op 15-11-2005 16:30 ]

[nsa1984]

disjfa schreef op dinsdag 15 november 2005 @ 16:25:
[...]

Ik zou als ik jouw was het verhaal nog een keer opnieuws lezen.

Mooie uitleg

offtopic:
Oke ik was iets te kort door de bocht met dat microsoft alles in de breedte van die box propt. Microsoft houd de margin er dus nog wel netjes buiten maar de rest gaat inderdaad binnen de breedte van het content blok.

(dat was nieuw voor mij)
Waarvoor dank.

[Sappie]

RM-rf schreef op dinsdag 15 november 2005 @ 16:26:
http://www.quirksmode.org/css/box.html

de snelste oplossing kan zijn om gewoon mozilla te laten renderen via het border-box-model van MS

ware het niet dat safari afaik het switchen tussen box-models niet ondersteund.. beter geef je een volledig DTD op en zorg je ervoor dat er geen html comments boven deze DTD staan, zodat ook IE6 aan de hand van het w3c box-model rendert.

[crisp]

Eens met Sappie; het is immers niet Firefox die het anders doet, maar juist IE ten opzichte van de rest van de wereld.
Voor IE < 6 kan je overwegen om eea te corrigeren door een extra stylesheet in te laden mbv conditional comments. Nog beter is om boxmodel problemen zoveel mogelijk te voorkomen door geen width/height ism padding en/of borders op hetzelfde element te specificeren.

[Verwijderd]

RM-rf schreef op dinsdag 15 november 2005 @ 16:26:
http://www.quirksmode.org/css/box.html

de snelste oplossing kan zijn om gewoon mozilla te laten renderen via het border-box-model van MS

Een betere oplossing is IE te laten renderen volgens het W3C box-model, dat kan je doen door het volgende boven in de htmlpagina te zetten

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

(dus boven <html>)

[semicon]

In IE werkt het perfect normaal want een margin komt duiten de "box" of div/layer en de padding is binnen die grootte. Nu heeft firefox zoiets van ik vindt dat een border zowel op de margin als padding... dus, wat je dan kan doen is gewoon de height en width property het aantal margin pixels * 2 doen.

Bijv zo:

code:

margin : 2px;
height  : 18px !important;
height  : 20px;
width  : 18px !important;
width  : 20px;

Dat !important leest alleen FF dan maar en je border zijn in IE en FF weer gelijk.

[crisp]

Verwijderd schreef op woensdag 16 november 2005 @ 09:19:
[...]


Een betere oplossing is IE te laten renderen volgens het W3C box-model, dat kan je doen door het volgende boven in de htmlpagina te zetten

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

(dus boven <html>)

Om dan meteen XHTML Strict aan te gaan raden is ook weer zoiets (IE kan niet eens overweg met (echt) XHTML). Gewoon een volledige HTML 4.01 Transitional of Strict DTD lijkt me goed genoeg

semicon schreef op woensdag 16 november 2005 @ 13:29:
In IE werkt het perfect normaal want een margin komt duiten de "box" of div/layer en de padding is binnen die grootte. Nu heeft firefox zoiets van ik vindt dat een border zowel op de margin als padding... dus, wat je dan kan doen is gewoon de height en width property het aantal margin pixels * 2 doen.

Bijv zo:

code:

margin : 2px;
height  : 18px !important;
height  : 20px;
width  : 18px !important;
width  : 20px;

Dat !important leest alleen FF dan maar en je border zijn in IE en FF weer gelijk.

vieze hack en zal waarschijnlijk in IE7 fout gaan (omdat de !important bug dan gefixed is).

[Jazzle]

Het is opgelost door de de border van het menuitem helemaal rechts niet op de block-link te zetten, maar op de td. maar het komt er dus op neer dat IE zich gewoon niet aan de w3c regels houdt?

[crisp]

BlackJack schreef op woensdag 16 november 2005 @ 15:36:
maar het komt er dus op neer dat IE zich gewoon niet aan de w3c regels houdt?

verbaast je dat?

[Jazzle]

crisp schreef op woensdag 16 november 2005 @ 15:38:
[...]

verbaast je dat?

eigenlijk niet nee , maar waarom doet microsoft dat?

[Collaborator]

BlackJack schreef op woensdag 16 november 2005 @ 17:00:
[...]

eigenlijk niet nee , maar waarom doet microsoft dat?

Omdat ze groot genoeg zijn om hun eigen regels te maken.