Not signed in (Sign In)

Vanilla 1.0.3 is a product of Lussumo. More Information: Documentation, Community Support.

CSS: Set margin-left for container => its input display wrong

Bottom of Page

1 to 2 of 2

  1.  
    • CommentAuthorTaoDay
    • CommentTimeFeb 15th 2007
     
    This is strange bug and just incorrect on IE 6.0

    Trouble:Form's input element does not display close its label.
    Bug Condition: IE 6.0
    Try:

    * Render in Standards compliance mode of Strict DTD
    * Pass Css Validator
    * Pass Xhtml Validator


    Bug's code:

    Xhtml:

    <body>
    <div id="details">
    <form method="post" action="this">
    <div id="contentNameCont">
    <label for="contentName">Content name:</label>
    <input id="contentName" type="text" />
    </div> <div id="defaultCulturesCont">
    <label for="defaultCulture">Default culture:</label>
    <textarea id="defaultCulture" cols="6" rows="4"></textarea>
    </div>
    </form>
    </div>
    </body>


    CSS:
    div#details { margin: 0% 0% 0% 40%; background-color: yellow; }
    input, label { display: block; float: left; }
    #details div { overflow: auto; width: 100%; margin-bottom: 5px; border: solid 1px black; }


    Do you know why this happenning?
  2.  
    Hi TaoDay,

    Try separating 'input' from the style being applied to 'label'. Oh, and you mightn't need the outermost containing div. You could instead use the 'form' itself.

    Something like this:

    xhtml<body>
    <form id="details" method="post" action="this">
    <div id="contentNameCont">
    <label for="contentName">Content name:</label>
    <input id="contentName" type="text" />
    </div>
    <div id="defaultCulturesCont">
    <label for="defaultCulture">Default culture:</label>
    <textarea id="defaultCulture" cols="6" rows="4"></textarea>
    </div>
    </form>
    </body>
    cssform#details {
    margin: 0% 0% 0% 40%;
    background-color: yellow;
    }
    form#details div {
    overflow: auto;
    width: 100%;
    margin-bottom: 5px;
    border: 1px solid black;
    }
    label {
    display: block;
    float: left;
    }
    input,
    textarea {
    margin-left: 0.5em;
    }
    Also, you might be interested in the Prettier Accessible Forms article, available at A List Apart. It has some great tips for lining up labels and inputs, using 'fieldset' and 'legend'.

    Good luck!

1 to 2 of 2

  1.