[css] uitlijnen form elementen - Softwareontwikkeling

donderdag 27 juli 2006 21:26

Acties:

Topicstarter

Ik heb een probleem met het horizontaal uitlijnen van 2 form elementen. Ze zijn allebij 21px hoog maar de submit button (image) wordt op de een of andere manier 2px hoger geplaatst dan de text box en dat moet natuurlijk niet. Ik heb een en ander geporbeerd met margin op het tweede (te hoog geplaatste) element, het geen resulteerd dat beide elementen wordt verschoven.Voorbeeld op http://members.home.nl/jkesseler/tmp/ Het gaat om het tweede blok.

Een andere (in mijn ogen) rare gedraging van IE wordt hier ok gedemonstreerd. In het eerste forulier is het submit plaatje in elkaar gedrukt, als het formulier verzonden wordt is het formaat wel normaal. Dat heeft gelegen aan width:auto;

code:

#nieuwsbrief
{   
    width:200px;
    height:100px;
    background-color:green; /* Groe achtergrond om eea duidelijker te maken */
    text-align:center;
}
#nieuwsbrief input
{
    background-color: #877C7F;
    color: white;
    font-family: "Book Antiqua", "Times New Roman", Helvetica, sans-serif;
    font-size:0.8em;
    width: auto;
    border: 0px;
    height:21px;
}

code:

<div id="nieuwsbrief">
    <form action="" method="post" name="newsbriefForm" id="nieuwsbriefForm">
            [img]"nieuwsbrief.gif"[/img]    
            <input type="text" name="query" value="E-mail adres" onfocus="this.value=''" style="width:155px;"/><input type="image" name="submit" value="Aanmlden nieuwsbrief" src="ok_up.gif" />
    </form>

</div>

donderdag 27 juli 2006 21:34

Acties:

BalusC

Carpe diem

Probeer vertical-align: middle; op de beide input elementen of alleen margin-bottom: -2px; op de image.

donderdag 27 juli 2006 22:24

Acties:

Suepahfly

Topicstarter

margin-bottom: 2px; geeft het gewenste resultaat. (in IE iig)
In FF schuift het de textbox echter omlaag wat resulteerd in een verschil van 4px.

En helaas werkt vertical-align alleen op <img> en <td> voorzover ik weet

Het volgende werkt, maar ik weet niet of ik daar zo blij mee ben.

code:

<style type="text/css">

#nieuwsbrief2
{   
    width:200px;
    height:100px;
    background-color:green;
    text-align:center;

}
#nieuwsbrief2 input
{
    background-color: #877C7F;
    color: white;
    font-family: "Book Antiqua", "Times New Roman", Helvetica, sans-serif;
    font-size:0.8em;
    border: 0px;
    height:21px;

}

#inputTextbox
{
    position: absolute;
    top: 50px;
    left:15px;
}

#inputImage
{
    position: absolute;
    top: 50px;
    left: 175px;
}
</style>

</head>

<body>
<div id="nieuwsbrief2">
    <form action="" method="post" name="newsbriefForm" id="nieuwsbriefForm">
            [img]"nieuwsbrief.gif"[/img]
            <input id="inputTextbox" type="text" name="query" value="E-mail adres" onfocus="this.value=''" style="width:155px;"/>
            <input id="inputImage" type="image" name="submit" value="Aanmelden nieuwsbrief" src="ok_up.gif"  />
    </form>
</div>

donderdag 27 juli 2006 22:24

Acties:

Boelie-Boelie

Probleem 1: {float: left} op de input.
Probleem 2: een inline-element (wat input is) kun je geen width meegeven.

Cogito ergo dubito