[CSS] IE/Moz verschillend formulier layout - Softwareontwikkeling

donderdag 22 september 2005 17:02

Acties:

Verwijderd

Topicstarter

sommige mensen hechten er geen waarde aan, maar een oplettend oog kan zich storen aan elke pixel teveel, zie vb:

Moz:	IE:

perfect	zucht...

de code (even alle javascript en onzin eruit gefilterd):

Cascading Stylesheet:

1
2
3

.naam { font-family:tahoma; font-size:10px; font-weight:bold; color:#000; background-color:#fff; border:0px; margin-bottom:1px; }
.mail { font-family:tahoma; font-size:10px; font-weight:bold; color:#000; background-color:#fff; border:0px; margin-bottom:0px; }
.bericht { font-family:tahoma; font-size:10px; font-weight:bold; color:#000; background-color:#fff; border:0px; }

HTML:

1
2
3

<input name="txtnaam" size="20" class="naam" /><br />
<input name="txtmail" size="20" class="mail" /><br />
<textarea name="txtbericht" cols="25" rows="5" class="bericht">bericht...</textarea>

wat kan ik er nog aan optimaliseren dat het er in IE hetzelfde uitziet als in Moz? Om 1 of andere vage reden hebben die inputs in IE altijd meer margin dan in Moz, of doe ik soms iets verkeerd?

[ Voor 8% gewijzigd door Verwijderd op 22-09-2005 17:12 ]

donderdag 22 september 2005 17:08

Acties:

djluc

Moet je in je css niet iets als: .naam en .mail gebruiken? Let op de punt vooraan.

donderdag 22 september 2005 17:12

Acties:

Verwijderd

Topicstarter

djluc schreef op donderdag 22 september 2005 @ 17:08:
Moet je in je css niet iets als: .naam en .mail gebruiken? Let op de punt vooraan.

klopt = aangepast. had het ff snel geschreven met [code] voor de duidelijkheid, want eigelijk doe ik het gewoon met style="blabla" Zie bron: http://www.blazin.nl/content/test.html

[ Voor 3% gewijzigd door Verwijderd op 22-09-2005 17:12 ]

donderdag 22 september 2005 17:15

Acties:

djluc

Waarom stel je niet gewoon een padding-left in van bijvoorbeeld 2 0px op de input elementen?

[ Voor 5% gewijzigd door djluc op 22-09-2005 17:16 ]

donderdag 22 september 2005 17:17

Acties:

Verwijderd

Topicstarter

thanks maar het gaat niet om de tekst in het input veld, het gaat me om de bottom/top afstanden tussen de input elementen

donderdag 22 september 2005 17:22

Acties:

djluc

Sowieso een Javascript tip: je hebt naast veld.value ook een veld.defaultValue. Daarmee kan je eenvoudig controleren of de inhoud veranderd is. Tevens staat het een stuk netter.[/offtopic]

Neem eens de volgende CSS op in je pagina:

Cascading Stylesheet:

1
2
3

input {
  margin: 0px;
}

donderdag 22 september 2005 17:35

Acties:

Verwijderd

Topicstarter

bedankt voor de js tip

margin 0px toewijzen heeft geen effect btw

[ Voor 74% gewijzigd door Verwijderd op 22-09-2005 17:36 ]

donderdag 22 september 2005 17:39

Acties:

Noork

Is je code wel volgens w3 normen? In Opera ziet het er weer anders uit. Zie:
Afbeeldingslocatie: http://img268.imageshack.us/img268/8265/opsite11wz.png

Afbeeldingslocatie: http://img268.imageshack.us/img268/8265/opsite11wz.png

donderdag 22 september 2005 17:42

Acties:

Verwijderd

Topicstarter

Noork schreef op donderdag 22 september 2005 @ 17:39:
Is je code wel volgens w3 normen? In Opera ziet het er weer anders uit. Zie:
[afbeelding]

als ik .mail een margin-bottom:1px; geef klopt het wel in opera, maar niet meer in Moz, en al helemaal niet meer in IE

donderdag 22 september 2005 17:46

Acties:

djluc

Probeer eens iets als:
* {
margin:0px;
padding:0px;
border: 0px;
}

donderdag 22 september 2005 18:07

Acties:

Boelie-Boelie

Ik zou er eigenlijk ook een <label> bij doen:
www.htmldog.com/guides/htmladvanced/forms/
www.webstandards.org/lear.../01-accessible-forms.html
www.webaim.org/techniques/forms/

Maar dan wordt de layout natuurlijk weer anders...

Cogito ergo dubito

vrijdag 23 september 2005 12:48

Acties:

Verwijderd

Topicstarter

Boelie-Boelie schreef op donderdag 22 september 2005 @ 18:07:
Ik zou er eigenlijk ook een <label> bij doen:
www.htmldog.com/guides/htmladvanced/forms/
www.webstandards.org/lear.../01-accessible-forms.html
www.webaim.org/techniques/forms/

Maar dan wordt de layout natuurlijk weer anders...

ik heb geen label nodig, want de label staat al in de input's. anyway het is blijkbaar weer zo trieste browser interpertatie probleem.. dus ik donder elke input wel in een kleine div en zet die div's bij elkaar met 1 pixel bottom-margin

vrijdag 23 september 2005 12:57

Acties:

Verwijderd

Internet Explorer gebruikt standaard een padding met forms.

code:

form
{
  padding: 0px;
}

Deze css code zou het dus moeten verhelpen..

vrijdag 23 september 2005 13:48

Acties:

djluc

Dit werkt, getest in IE6/FF1.0.6/Opera8.0.2
Er zit een lelijk maar effectieve IE hack in en is html strict gevalideerd. Verder zit er een net stukje Javascript in voor je velden. Deze kan je vaker gebruiken.

Online: http://www.djluc.nl/fileadmin/fora/inputmarginproblem.html

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>margin probleem met inputs</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <style type="text/css">
        body {
            background-color: #000;
        }
        form {
            padding: 0px;
        }
        fieldset {
            border: 0px;
            margin: 0px;
            padding: 0px;
        }
        input, textarea {
            display: block;
            
            line-height: 10px;
            
            border: 0px;
            margin: 0px;
            padding: 0px;
            
            margin-bottom: 1px;
            _margin-bottom: -1px;
            
            font-family:tahoma;
            font-size:10px;
            font-weight:bold;
            color:#000;
            background-color:#fff;
        }
        label {
            display: none;
        }
        </style>
        <script type="text/javascript">
            function fieldFocus(field) {
                field.style.backgroundColor='#ffff00';
                if(field.value==field.defaultValue) {
                    field.value='';
                }
            }
            function fieldBlur(field) {
                field.style.backgroundColor='#fff';
                if(field.value=='') {
                    field.value=field.defaultValue;
                }
            }
        </script>
    </head>
    <body>
        <form action="?" method="post">
            <fieldset>
                <legend>email form</legend>
                <input name="naam" id="naam" type="text" value="naam" onFocus="fieldFocus(this);" onBlur="fieldBlur(this);" size="20"><label for="naam">Naam</label>
                <input name="mail" id="mail" type="text" value="mail" onFocus="fieldFocus(this);" onBlur="fieldBlur(this);" size="20"><label for="mail">Mail</label>
                <textarea name="bericht" id="bericht" cols="25" rows="5" onFocus="fieldFocus(this);" onBlur="fieldBlur(this);">bericht...</textarea><label for="bericht">Bericht</label>
            </fieldset>
        </form>
    </body>
</html>

edit:
Voor de volledigheid ook maar even netjes labels toegevoegd.

[ Voor 21% gewijzigd door djluc op 23-09-2005 13:53 ]

vrijdag 23 september 2005 16:29

Acties:

Verwijderd

Topicstarter

djluc schreef op vrijdag 23 september 2005 @ 13:48:
Dit werkt, getest in IE6/FF1.0.6/Opera8.0.2
Er zit een lelijk maar effectieve IE hack in en is html strict gevalideerd. Verder zit er een net stukje Javascript in voor je velden. Deze kan je vaker gebruiken.

Online: http://www.djluc.nl/fileadmin/fora/inputmarginproblem.html

ik hoop dat je een meisje bent want ik ga je zoenen $_/-\o_$

vrijdag 23 september 2005 16:35

Acties:

Boelie-Boelie

De styling d.m.v. javascript kun je ook bereiken met het stylen van input:focus, select:focus, textarea:focus. (Maar dan werkt het niet in elke browser, da's waar.)

Cogito ergo dubito

zaterdag 24 september 2005 04:07

Acties:

djluc

Verwijderd schreef op vrijdag 23 september 2005 @ 16:29:
[...]
ik hoop dat je een meisje bent want ik ga je zoenen $_/-\o_$

nee, laat dat maar.

Boelie-Boelie schreef op vrijdag 23 september 2005 @ 16:35:
De styling d.m.v. javascript kun je ook bereiken met het stylen van input:focus, select:focus, textarea:focus. (Maar dan werkt het niet in elke browser, da's waar.)

Klopt maar in IE werkt dat niet. Dan moet je dus speciaal voor IE een stuk JavaScript hebben waarmee je classes aan de elementen geeft. Uiteindelijk heeft het weinig voordeel in dit geval, de code die ik nu heb ik overzichtelijker.

Vraagje: is er ook een manier zonder zo'n hack voor IE?