Archief - padding/margin IE7 & Firefox3

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.

GizeH

Legacy Member
Ik heb een simpel formulier die ik wil opmaken via css.
Het probleem is dat het resultaat verschillend is op IE7 en firefox3 (waarschijnlijk met de paddings en margins te maken...)

weet iemand waaraan dit kan liggen?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>fd</title>
<style type="text/css">
body {
font-size:80%;
font-family:georgia;
}
dt {
line-height:10px;
padding:10px 0px 5px 0px;
}

dd {
line-height:10px;
float:left;
}

button {
float:left;
margin-top:-12px;
}
</style>
</head>
<body>


<form action="">
<fieldset>
<legend>dfsjqkl</legend>
<dl>
<dt><label>fdjslk:</label></dt>
<dd><input type="text" name="fdjkql" /></dd>
</dl>
<button type="submit" name="test">testje</button>
</fieldset>
</form>

</body>
</html>

wxphe

Legacy Member
Tja, heb wat zitten proberen en krijg het maar niet recht. Het ligt aan de marging op je dd tag. Stel je die in op nul, dan staat ie in beide browsers mooi tegen de zijkant van je box. Maar op het ogenblik dat je iets (of helemaal niets) van marge instelt dan voegt IE er standaard toe binnen en buiten je tag. (check met onderstaande aanpassing in je code en speel met de margins (0 en vb 10px) en zie hoe het verkeerd gaat.

<dd class="problem"><input type="text" name="fdjkql" /></dd>

in je style
.problem{
border: 1px solid #000000; /*Enkel om resultaat te zien, mag in principe weg*/
margin-left: 0px;
}

Xavez

Legacy Member
Version targeting op IE7 om het probleem daar op te lossen :)

<!--[if gte IE 7]><link rel="stylesheet" type="text/css" media="screen,projection" href="/pad/naar/ie7.css" /><![endif]-->

By the way, waarom gebruik je een definition list? Da's in deze situatie (zelfs in elke situatie die ik me momenteel kan inbeelden) compleet overbodig, gooi die nest er maar uit :).

GizeH

Legacy Member
wat gebruik je dan voor een form met verschillende elementen (selectielijst, textvak, checkbox, ...)

gewoon label en de tag erna?
:)

Xavez

Legacy Member
label en de tag erna inderdaad... Maar je moet dat label wel linken aan de juiste tag he...

<label for="naampje"></label>
<input id="naampje" />

like so :).

GizeH

Legacy Member
ok bedankt, ik zal het proberen op te lossen via die version targeting :)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan