[XHTML&CSS] Firefox toont formulier incorrect

[Verwijderd]

Ik ben bezig met het bouwen van een website op basis van XHTML en CSS. Ook de formulieren probeer ik netjes semantisch op te bouwen met behulp van <dl>, <dt> en <dd> tags. Nu heb ik een formulier waar een <select> in voorkomt en om er voor te zorgen dat dit element niet te hoog wordt heb ik de font-size op 9 pixels gezet. In Internet Explorer werkt dit prima en wordt het formulier prima weergegeven, maar als ik dezelfde pagina open in Firefox wordt het een rommeltje. Alles na dit element wordt namelijk gespiegeld weergegeven: label rechts, tekstveld links.

Het tafereel is te zien op: http://www.habermehl.net/test.html

De relevante CSS is:

code:

dl { 

    width: 290px; 
    margin: 0; 
    padding: 0; 

} 

dt { 

    width: 140px;
    float: left; 
    margin: 0;
    padding: 3px 0;

} 

dd {

    width: 150px;
    float: left;
    margin: 0;
    padding: 1px 0;

}

.textfield {

    width: 140px;
    height: 12px;
    font-size: 9px;

}

.selectList {

    height: 12px;
    font-size: 9px;

}

Mijn vraag is nu, waarom pakt Firefox dit niet goed op en hoe zorg ik dat dit ook in Firefox goed weergegeven wordt.

[BasieP]

ten eerste: voordat je een browser de schuld geeft, kijken even hoe andere browsers het doen (safari oid) iets zegt me namelijk dat het IE is die het fout doet..

de hoogte van je select klopt (pak een fotoediter en je zult zien dat ie 12 px is (+2px border)

ik heb een beetje het idee dat je de verkeerde elementen gebruikt.
voor een forumlier als dit is een table het perfecte element. waarom doe je het dan met lists?

[ Voor 67% gewijzigd door BasieP op 15-12-2005 18:34 ]

[Verwijderd]

Bij iCapture zit momenteel de cue vol, dus ik kan geen Safari test doen. Overigens geef ik de browser niet de schuld, ik wil gewoon weten hoe ik het kan verhelpen

Ik gebruik expres deze elementen, deze zijn namelijk overzichtelijker en semantischer dan een tabel. Waarschijnlijk ligt het hier ook niet aan omdat het wel gewoon werkt in Firefox zodra ik die <select> weghaal.

[BtM909]

Wat gebeurt er als je je line-height ook zet op de ingestelde font-grootte?

heb nu even geen FF bij de hand om te testen

[orf]

Waarom staat er een alsuitende </script> na </style>?
Daarnaast heb je binnen je <p> block elementen staan.

http://validator.w3.org/c...w.habermehl.net/test.html

[BasieP]

mja het gaat er niet om dat het werkt, maar hoe het werkt. en zoals je het nu in elkaar hebt zitten is het vragen om fouten.

wat je doet is zegmaar een berg vierkantjes bouwen (listelements), die je in een groot vierkant duwt (je list)
je list heeft een max breedte
je elementen in de list hebben dit ook, zo zorg je dat het precies past dit is opzich goed

maar ze hebben geen vast hoogte, zo kan het dus zo zijn dat een element in je lijst (bijv de select) te laag is.
In dat geval kan een volgend blokje er nog wel onder (je gebruikt immers float:left;)
en zodoende gaat ie 'schuiven'

ik denk dat het een ranzige methode is om een list met vaste hoogte/breedte enzo te maken die je naar left float

beste oplossing is denk ik float:left aanpassen

@orf: dat ie niet valid is doet er nu niet toe, het is een test page, je kan bij die validater ook zien dat de fouten niet in de code zitten waar het om gaat

[ Voor 11% gewijzigd door BasieP op 15-12-2005 18:43 ]

[momania]

doordat de 'dt' na de 'dd' met de select erin left float en de 'dd' met de select door de hoogte minder hoog wordt dan de 'dt' waar hij voor staat, float de volgende 'dt' uiteindelijk dus tegen die vorige 'dt' aan.
(lekker vaag uitgelegd )

Door de display te zetten werkt het wel goed:

Cascading Stylesheet:

dl { 
    display: table;
    width: 290px; 
    margin: 0; 
    padding: 0; 

} 

dt { 
    display: table-cell;
    width: 140px;
    float: left; 
    margin: 0;
    padding: 3px 0;

} 

dd {
    display: table-cell;
    width: 150px;
    float: left;
    margin: 0;
    padding: 1px 0;

}

En met het volgende:

Cascading Stylesheet:

.selectList {
    height: 16px;
    font-size: 7pt;

}

past het precies.

Gebruik anders voor firefox de web developer extension. Dan kan je block level elements laten omlijnen en kan je zien wat er dus fout gaat

[ Voor 24% gewijzigd door momania op 15-12-2005 18:45 ]

[crisp]

maak dan meteen een table

Ik zou er in ieder geval voor zorgen dat je dt een eventuele vorige float cleared. En verder inderdaad een min-height en/of een line-height opgeven die hoog genoeg is

[momania]

crisp schreef op donderdag 15 december 2005 @ 18:44:
maak dan meteen een table

Dat kan ook ja

Maar er op zich toch niets mis met de oplossing?

[crisp]

momania schreef op donderdag 15 december 2005 @ 18:47:
[...]

Dat kan ook ja

Maar er op zich toch niets mis met de oplossing?

mwa, de ondersteuning van table-layout middels css laat nog wel eens te wensen over in verschillende browsers, en echt controle over de grootte van widgets zoals een select heb je ook niet in elke browser...

[Verwijderd]

crisp schreef op donderdag 15 december 2005 @ 18:44:
maak dan meteen een table

Ik zou er in ieder geval voor zorgen dat je dt een eventuele vorige float cleared.

Dit werkt! Ik had eerst het één en ander geprobeerd met min-height en line-height, maar dit leverde weinig op. Een clear op de linkerzijde van <dt> zorgde echter voor het gewenste resultaat. Ook de oplossing van Momania werkte, maar dan kan ik dus net zo goed een tabel maken.

Ik snap alleen niet waarom het uitvoeren van een clear: left; dit probleem verhelpt...

[BasieP]

Verwijderd schreef op donderdag 15 december 2005 @ 19:14:
[...]


Dit werkt! Ik had eerst het één en ander geprobeerd met min-height en line-height, maar dit leverde weinig op. Een clear op de linkerzijde van <dt> zorgde echter voor het gewenste resultaat. Ook de oplossing van Momania werkte, maar dan kan ik dus net zo goed een tabel maken.

Ik snap alleen niet waarom het uitvoeren van een clear: left; dit probleem verhelpt...

ga je eens verdiepen in float
daar zit het probleem namelijk in. Doordat jij alles naar links laat schuiven blijven er wat elementen 'hangen' achter andere (minder hoge) elementen. (als ik dat zo mag zeggen )

door die <br clear="left"> zorg je dat je al je float:left; elementen weer op een nieuwe regel beginnen ipv aan te sluiten waar eventueel nog ruimte zou zijn