[CSS] float probleem in form met IE

donderdag 12 maart 2009 22:13

Acties:

0 Henk 'm!

Topicstarter

Hoi,

Ik heb een pagina met een form, waarin ik een aantal labels met bijbehorende dropdown list heb.

Hieronder vind je een versimpeld voorbeeld.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <STYLE TYPE="text/css">
            /*main*************************************************************************************************************/
            body {
                margin: 10px 40px;
                text-align: center;
                font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
                font-size: 62.5%;
            }
            
            #wrapper {
                text-align: left;
                border: 1px solid #fff;
                position: relative;
                font-size: 1.4em;
            }
            
            body #content-wrapper {
                padding: 1.4em 0 0 14em;
            }
            
            /*form style*************************************************************************************************************/
            form {
                margin: 0em auto;
                width: 80%;
            }
            
            fieldset {
                position:relative;
                background-color: #dfdfdf;
                border: solid 0 transparent;
                margin: 2em 0;
                padding: 1em;
            }
            
            legend {
                position:absolute;
                left:0.1em;
                top:-1em;
                color: #000;
                font-size: 1.4em;
                font-weight: bold;
            }
            
            label { 
                display: block;
                float: left;
                clear: left;
                width: 10em;
                padding-right: 1em;
                text-align: left;
                font-weight: bold;
                line-height: 2em;
            }
            
            select {
                display: block;
                float: left;
                width: 12em;
            }
            
            input {
                display: block;
                float: left;
                width: 22em;
            }
            
            input.submit {
                display: block;
                float: right;
                width: 10em;
            }
            
            br {
                clear: both;
            }
        </STYLE>
    </head>
    
    <body>
        <div id="wrapper">
            <div id="content-wrapper">
                <div id="content-inner">
                    <form action="test2.html" method="post">
                    <fieldset>
                        <legend>Test form</legend>
                        <label for="test1">test1</label>
                            <select id="test1" name="test1">
                                <option value="test1">test1</option>
                            </select>
                            
                        <label for="test2">test2</label>
                            <select id="test2" name="test2">
                            <option value="test2">test2</option>
                            </select>
                        
                        <label for="test3">test3</label>
                            <select id="test3" name="test3">
                            <option value="test3">test3</option>
                            </select>
                        
                        <label for="test4">test4</label>
                            <select id="test4" name="test4">
                            <option value="test4">test4</option>
                            </select>
                            
                        <input class="submit" type="submit" value="Zoek" />
                        <br />
                    </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

Als ik de pagina open in Firefox of Opera is alles in orde.
Het probleem is dat in Internet Explorer 7 (en waarschijnlijk ook in eerdere versies) de dropdown lists niet achter het label komen te staan, maar alle dropdown lists achter elkaar.
Als ik in regel 50 de float verander van left naar center lijkt het probleem opgelost (maar dit is niet de layout die ik wil.)

Wie geeft mij een zetje in de goede richting?

Thx

[ Voor 0% gewijzigd door chicky op 12-03-2009 23:49 . Reden: typo ]

vrijdag 13 maart 2009 01:44

Acties:

0 Henk 'm!

Pkunk

Ik zou zeggen bespaar jezelf een hoop moeite en gooi die labels en selects in divjes of andere elementen die zich wel voorspelbaar gedragen.

Hallo met Tim

vrijdag 13 maart 2009 01:49

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Css

chicky schreef op donderdag 12 maart 2009 @ 22:13:
Als ik in regel 50 de float verander van left naar center lijkt het probleem opgelost (maar dit is niet de layout die ik wil.)

Float center bestaat niet eens

En als je de float: left (regel 61) van je select af haalt doet 'ie het wel

[ Voor 10% gewijzigd door RobIII op 13-03-2009 02:08 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

vrijdag 13 maart 2009 23:10

Acties:

0 Henk 'm!

chicky

Topicstarter

thx RobIII,

Met het verwijderen van de float in regel 61 doet 'ie het in IE. In opera en Firefox nu weer niet, maar dat regel ik wel door een tweede style sheet te gebruiken welke ik onder voorwaarde laad.

Is het bovenstaande probleem nu veroorzaakt door een zgn. IE bug (en zo ja welke?).

zondag 15 maart 2009 18:53

Acties:

0 Henk 'm!

Stefan|IA2

Je kan hiervoor een CSS-hack gebruiken, dat is gewoon een kwestie van de float gebruiken voor Opera, Firefox enz... en dan in diezelfde opmaak in de CSS *float: none; gebruiken. Je krijgt dus:

code:

.class {
float: left;
*float: none;
}

Hierna is je code alleen niet meer valid

maandag 16 maart 2009 16:32

Acties:

0 Henk 'm!

Da Weef

In opera en Firefox nu weer niet

Hoezo niet? Het clearen gaat toch ook prima in FF en Opera? Enkel margins/paddings lijken niet meer te kloppen, wat best op te lossen moet zijn, ook zonder conditional stylesheets.

Ook de oplossing aangedragen door timlog moet werken, maar dat kost een beetje extra html code.

Je kan hiervoor een CSS-hack gebruiken

CSS hacks zijn nog wel de slechtste oplossing... In principe doe je dan hetzelfde als wanneer je conditional stylesheets gebruikt met als bonus dat je css rommeliger (onleesbaar) wordt en er mogelijk problemen ontstaan met toekomstige IE versies...

.

dinsdag 17 maart 2009 08:55

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Stefan Keijzer schreef op zondag 15 maart 2009 @ 18:53:
Je kan hiervoor een CSS-hack gebruiken, dat is gewoon een kwestie van de float gebruiken voor Opera, Firefox enz... en dan in diezelfde opmaak in de CSS *float: none; gebruiken. Je krijgt dus:
code:
1
2
3
4
.class {
float: left;
*float: none;
}
Hierna is je code alleen niet meer valid

Als je dan al andere CSS aan IE wil voorschotelen, gebruik dan aub Conditial Comments, dat is een stuk minder smerig als zulke hacks.

code:

1 2	<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="/include/css/ie6.css"><![endif]--> <!--[if IE 7]><link rel="stylesheet" type="text/css" href="/include/css/ie7.css"><![endif]-->

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

Onderwerpen