[CSS] uitlijning objecten verschilt in FF & IE - Softwareontwikkeling

zaterdag 11 november 2006 15:44

Acties:

Topicstarter

Al een hele tijd maak ik geen gebruik meer van tabellen voor mijn opmaak, maar probeer ik semantisch correcte code neer te plempen. Nu loop ik echter tegen een probleem aan waar ik niet uit kom.

Ik heb een form met daarin een selectbox, een tekstveld en een submitbutton. Om de een of andere reden lukt het mij niet om die drie netjes uit te lijnen. In Firefox gaat het prima, Internet Explorer 6 en 7 weigeren het op de juiste manier te tonen.

Het gaat om deze code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>GoT - uitlijnprobleem</title>
</head>

<body>

    <form>
        <select id="optionbox">
            <option>Optionbox...</option>
            <option></option>
            <option>optie 1</option>
            <option>optie 2</option>
            <option>optie 3</option>
        </select>
        <input type="text" id="invulveld" value="Invulveld" />
        <input type="image" src="btn_zoeken_0.gif" style="vertical-align: bottom;" />
    </form>

</body>
</html>

Een online voorbeeld vind je hier.

Ik heb al verschillende dingen opgezocht en geprobeerd. Zo opperde iemand hier op het forum (Pelle geloof ik) om align="absbottom" te gebruiken. Dit lost inderdaad het probleem op in IE, maar vervolgens werkt het weer niet in Firefox.

Wie helpt mij dit op een goede manier op te lossen zodat ik niet met gebogen hoofd en vol schaamte mijn toevlucht hoef te zoeken in een tabel?

omniscale.nl

zaterdag 11 november 2006 17:40

Acties:

MBV

HTML:

1
2
3

<input ... style= "
 vertical-align: bottom !important;
 vertical-align: absbottm; /*voor IE */ " >

simpelste hack om IE iets te laten doen wat firefox niet moet doen: IE negeert !important

zaterdag 11 november 2006 18:03

Acties:

posttoast

Topicstarter

MBV schreef op zaterdag 11 november 2006 @ 17:40:
HTML:
1
2
3
<input ... style= "
 vertical-align: bottom !important;
 vertical-align: absbottm; /*voor IE */ " >
simpelste hack om IE iets te laten doen wat firefox niet moet doen: IE negeert !important

Helaas, het lijkt erop dat dat niet werkt.

omniscale.nl

zaterdag 11 november 2006 18:37

Acties:

moozzuzz

Wat wens je exact te bereiken? Ik zie bij het voorbeeld geen raar behaviour? Alle items naast mekaar lijkt me geen probleem. Alles onderaan, ook niet, mits je bedenkt dat de <input>'s onderaan de <form> staan.

Debug ideeën:
- Als je je form een border: 1px solid red; meegeeft zie je hoe groot het ding is.
- Padding zit soms wat in de weg, of de margin :^)

zaterdag 11 november 2006 19:27

Acties:

MBV

posttoast schreef op zaterdag 11 november 2006 @ 18:03:
[...]

Helaas, het lijkt erop dat dat niet werkt.

Het werkte toch wel voor IE als je de style op absbottom zet?
Oh ja, IE vindt returns in tags niet altijd leuk, probeer dat eens weg te halen. Heb geen IE bij de hand (linux) om te kijken wat het probleem is.