[CSS?] Defenitionlist verschoven in Safari

[Zoefff]

Onlangs hoorde ik geluiden dat het via Safari niet mogelijk is om kaarten te bestellen op http://www.stobc.nl/index.php?page=bestel . Na wat onderzoek kreeg ik het vermoeden dat het een en ander verschoof op de bestelpagina. Floris was gisteren zo liev om een screenshotje voor me te maken in Safari:



Daar wordt inderdaad duidelijk dat het niet helemaal klopt. Het keuzemenu voor 'aanhef' met 'de Heer' en 'Mevrouw' schuift naar boven en links, waardoor alles een plaatsje omhoog komt te staan. Vervolgens komen mensen inderdaad niet verder, omdat gechecked word of het emailadres klopt, postcode juist is, etc.

De vraag is nu alleen, waarom verschuift alles 1 plaatsje omhoog? De HTML die ik heb gebruikt is volledig 4.01 Strict, en ook in de CSS heb ik geen rare dingen gebruikt.

Hieronder de relevante HTML en CSS:

HTML:

<dl>
        <dt><label for='geslacht'>Aanhef:</label></dt>
        <dd><select name='geslacht' id='geslacht' class='input_norml' size='1'><option value='' selected='selected' >Kies...</option><option value='man' >De heer</option><option value='vrouw' >Mevrouw</option></select></dd>
                
        <dt><label for='voorletters'>Voorletter(s)</label> / <label for='tussenvoegsel'>tussenvoegsel:</label></dt>
        <dd><input name='voorletters' id='voorletters' style='width:150px;' class='input_norml' type='text' size='10' maxlength='10' value='' /><input name='tussenvoegsel' style='width:44px;margin-left:2px;' id='tussenvoegsel' type='text' size='4' maxlength='10' value='' /></dd>
                
        <dt><label for='achternaam'>Achternaam:</label></dt>
        <dd><input name='achternaam' id='achternaam' style='width:202px;' class='input_norml' type='text' size='20' maxlength='50' value='' /></dd>

                
        <dt><label for='straat'>Straatnaam</label> / <label for='huisnr'>huisnummer:</label></dt>
        <dd><input name='straat' id='straat' style='width:150px;' class='input_norml' type='text' size='20' maxlength='50' value='' /><input name='huisnr' id='huisnr' style='width:44px;margin-left:2px;' class='input_norml' type='text' size='4' maxlength='6' value='' /></dd>
                
        <dt><label for='postcode'>Postcode:</label></dt>
        <dd><input name='postcode' id='postcode' class='input_norml' type='text' size='7' maxlength='7' value='' /><br /></dd>
                
        <dt><label for='woonplaats'>Woonplaats:</label></dt>
        <dd><input name='woonplaats' id='woonplaats' style='width:202px;' class='input_norml' type='text' size='20' maxlength='50' value='' /></dd>

                
        <dt><label for='telefoon'>Tel. nummer (optioneel): <a href='javascript:void(null)' onclick="window.open('info.php?info=telefoon','info','status=false,width=400,height=450,resizable=no,scrollbars=yes')"><img class='noborder' src='img/info.gif' alt='Informatie over telefoon' /></a></label></dt>
        <dd><input name='telefoon' id='telefoon' style='width:202px;' class='input_norml' type='text' size='13' maxlength='13' value='' /></dd>
                
        <dt><label for='email'>Emailadres:</label></dt>
        <dd><input name='email' id='email' style='width:202px;' class='input_norml' type='text' size='20' maxlength='50' value='' /><br /></dd>
                
        <dt><label for='locatie'>Lokatie: <a href='javascript:void(null)' onclick="window.open('info.php?info=locatie','info','status=false,width=400,height=450,resizable=no,scrollbars=yes')"><img class='noborder' src='img/info.gif' alt='Informatie over de lokaties' /></a></label></dt>
        <dd><select name='locatie' id='locatie' class='input_norml' size='1'><option value='' selected='selected' >Kies een lokatie...</option><option value='Groningen' >Groningen</option><option value='Haarlem' >Haarlem</option><option value='Rotterdam' >Rotterdam</option></select></dd>

                
        <dt><label for='kaarten'>Aantal kaarten à €28,50: <a href='javascript:void(null)' onclick="window.open('info.php?info=kaarten','info','status=false,width=400,height=450,resizable=no,scrollbars=yes')"><img class='noborder' src='img/info.gif' alt='Informatie over het aantal kaarten' /></a></label></dt>
        <dd><input name='kaarten' id='kaarten' class='input_norml' type='text' size='2' maxlength='2' value='' onkeyup='prijsTotaal(this)' /><br /></dd>

        <dt>Bestelmethode: <a href='javascript:void(null)' onclick="window.open('info.php?info=methode','info','status=false,width=400,height=450,resizable=no,scrollbars=yes')"><img class='noborder' src='img/info.gif' alt='Informatie over bestelmethode' /></a></dt>
        <dd><label for='methode_Opsturen'><input type='radio' style='border:0px;' name='methode' id='methode_Opsturen' value='Opsturen' />Opsturen</label><label for='methode_Afhalen'><input type='radio' style='border:0px;' name='methode' id='methode_Afhalen' value='Afhalen' />Afhalen</label></dd>               

        <dt>Totaalprijs:</dt>
        <dd>€<span id='prijs'></span></dd>

</dl>

Cascading Stylesheet:

#order_form dt {
    margin:0px 0px 0px 15px;
    padding-left:10px;
    font-size:13px;
    font-weight:bold;
    border-left:3px solid #A6390F;
    float:left;
    display:inline;
    height:24px;
    width:200px;
}
#order_form dd {
    margin:0px;
    padding-left:10px;
    font-size:13px;
    border:0px;
    height:24px;
    display:table-cell;
}
#order_form img {
    border:0px;
}
#order_form input:focus {
    background-color:#F6EFE4;
    color:#000000;
}

Het enige 'exotische' wat ik in de CSS gebruik is 'display:table-cell', maar dat word vogens http://www.quirksmode.org/css/display.html ook gewoon ondersteund in Safari.

Hopenlijk kan iemand me hier mee verder helpen, want ik heb helaas geen Mac tot m'n beschikking, en kan dit zo snel ook niet regelen...

[Bob Popcorn]

Ik heb gehoord dat Safari de KHTML render-engine gebruikt, dezelfde als Konqueror. Die is misschien wel voor windows te downloaden?

[ Voor 1% gewijzigd door Bob Popcorn op 09-12-2005 12:01 . Reden: typo ]

[Zoefff]

Hm, dus Konqueror onder Linux zou de pagina hetzelfde moeten behandelen als Safari op een Mac? Ik heb nog wel een knoppix-cd'tje liggen, dus dan zal ik die er zo maar even instoppen

edit:
Konqueror onder Linux rendert 'm dus wel goed bij mij...

[ Voor 16% gewijzigd door Zoefff op 09-12-2005 12:52 ]