Div appears twice in I.E. for no reason at all. In other browsers it works fine_问答_开发者

Div appears twice in I.E. for no reason at all. In other browsers it works fine

开发者 https://www.devze.com 2023-04-03 03:43 出处：网络

The page contains a loginform which is held by the div \"login\". In IE9 that div is displayed twice.

The page contains a loginform which is held by the div "login". In IE9 that div is displayed twice.

I studied the CSS and HTML and source in several browsers. I can't find any reason for IE to display the div twice.

The site can be found here: http://atbfacturen.wietze.uwvakman.nl:81/

It's unclear to me why IE does this.

HTML:

<body>
    <div id="header">
        <a href="/users/home"><img src="/img/atblogo_black.png" alt="Logo ATB Facturen" /></a>            

        <div id="headerOptions">
            Tuesday 06 September 2011&nbsp;|&nbsp;<a href="/pages/help">Hulp</a>            
        </div>
    </div>


    <form action="/" id="UserLoginForm" method="post" accept-charset="utf-8">
        <div style="display:none;">
            <input type="hidden" name="_method" value="POST" />
        </div>
    <div id="login">
    <table>
        <tr>
            <td><strong>Gebruikersnaam</strong></td>

            <td><input name="data[User][username]" type="text" style="width开发者_开发技巧:150px" maxlength="50" id="UserUsername" /></td>
        </tr>
        <tr>
            <td><strong>Wachtwoord</strong></td>
            <td><input type="password" name="data[User][password]" style="width:150px" id="UserPassword" /></td>
        </tr>
        <tr>
            <td> </td>

            <td><input type="submit" value="Aanmelden" /></td>
        </tr>
    </table>
    </form>
    </div>
</body>

CSS:

#login {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
    padding: 25px;
    background-color: #efefef;
    border: 1px solid #cccccc;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

you are closing your div inscie of a <tr> element when the <div> element was opened outside of the <table> as a whole.

IE is probably trying to clean up your markup a bit for you due to what it considers illegal nesting of tags

If you would take time and indent your HTML properly, you'd see your misaligned tags immediately. Also, running your website through HTML validator tends to help in these cases.

In fact, I'd advise to always run your webpages through the validator. I can hurt your feelings, but more often than not it will show you many small things that you missed. You don't have to fix all of them (sometimes there are good reasons for things to be the way they are), but it never hurts to fix as many as possible.

<body>
    <div id="header">
        <a href="/users/home"><img src="/img/atblogo_black.png" alt="Logo ATB Facturen" /></a>
        <div id="headerOptions">
            Tuesday 06 September 2011&nbsp;|&nbsp;<a href="/pages/help">Hulp</a>
        </div>
    </div>
    <form action="/" id="UserLoginForm" method="post" accept-charset="utf-8">
        <div style="display:none;">
            <input type="hidden" name="_method" value="POST" />
        </div>
        <div id="login">
            <table>
                <tr>
                    <td><strong>Gebruikersnaam</strong></td>
                    <td><input name="data[User][username]" type="text" style="width:150px" maxlength="50" id="UserUsername" /></td>
                </tr>
                <tr>
                    <td><strong>Wachtwoord</strong></td>
                    <td><input type="password" name="data[User][password]" style="width:150px" id="UserPassword" /></td>
                </tr>
                <tr>
                    <td> </td>
                    <td>
                        <div class="submit">
                            <input type="submit" value="Aanmelden" />
                        </div>
    </form>
</td>
</tr>
</table>