[html+css] <input> & <select> andere grootte metzelfde width - Softwareontwikkeling

dinsdag 1 juli 2003 23:05

Acties:

God bless GoT

Topicstarter

Ik ben zonet op een vreemd verschijnsel gestoten in Mozilla en Internet Explorer. Tot nu toe heb ik mijn webpagina's doorgaans met HTML 4.01 Transitional ontworpen. Omdat ik nu bezig ben met een vrij complexe layout heb ik voor HTML 4.01 Strict gekozen omdat Internet Explorer eenzelfde boxmodel gebruikt als Mozilla waardoor padding en margins uniform bruikbaar zijn.

Dat werkt allemaal fijn, maar bij HTML 4.01 Strict krijg ik het niet voor mekaar om <input> en <select> elementen in een form van exact dezelfde lengte te maken. In HTML Transitional zou het er uitzien als in onderstaand voorbeeld:

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
</head>
<body>
    <form action="" method="post" name="test">
    <div>
        <input type="text" name="test1" value="test1" style="width: 200px;">
    </div>
    <div>
        <select size="1" name="test2" style="width: 200px;">
            <option value="0">test2</option>
        </select>
    </div>
    </form>
</body>
</html>

Hierbij zal het <input> veld exact even lang zijn als het <select> veld in Opera, Internet Explorer, Mozilla, en andere recente browsers.

Echter wanneer er HTML Strict van gemaakt wordt:

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
</head>
<body>
    <form action="" method="post" name="test">
    <div>
        <input type="text" name="test1" value="test1" style="width: 200px;">
    </div>
    <div>
        <select size="1" name="test2" style="width: 200px;">
            <option value="0">test2</option>
        </select>
    </div>
    </form>
</body>
</html>

Nu is het <select> veld enkele pixels korter dan het <input> veld. Dit doet zich voor in Internet Explorer (6) en Mozilla. Opera geeft beide elementen wel correct evenlang weer.

Dit is natuurlijk geen kritieke bug, maar het staat wel vrij slordig omdat ik nog veel input en select velden onder elkaar wil zetten... En om even heel de site weer om te bouwen naar Transitional... Daar heb ik ook geen zin in. Internet Explorer interpreteert margins en paddings dan namelijk anders dan Mozilla en dat maakt het alleen maar complexer.

Iemand die enig idee heeft hoe dit komt en of het op te lossen valt?

A bus station is where a bus stops. A train station is where a train stops... On my desk I have a workstation.

dinsdag 1 juli 2003 23:07

Acties:

Verwijderd

Het zou kunnen liggen aan een verschil in padding. Geef voor beide elementen eens expliciet een padding op die voor beiden even groot is?

dinsdag 1 juli 2003 23:12

Acties:

mahi

God bless GoT

Topicstarter

padding: 0px; en/of margin: 0px; erbij zetten geeft geen verschil. Ik dacht eerst aan (weer) een bug in Internet Explorer, maar aangezien Mozilla het probleem ook heeft... Opera (7) dan weer niet. Die geeft alles netjes even breed weer.

A bus station is where a bus stops. A train station is where a train stops... On my desk I have a workstation.