Chrome Anzeigeproblem, Umgehung?

[FireFreak]

Chrome:

FireFox:

Im FireFox wird das ganze perfekt angezeigt, nur Chrome macht mal wieder Zicken.

                <div id="login_texts">
                    <label for="username"><b>Username:</b></label>
                    <br />
                    <br />
                    <label for="password"><b>Passwort:</b></label>
                </div>
                <div id="login_fields">
                    <form method="post" action="login.php">
                        <input type="text" name="username" id="username" size="20" maxlength="30" />
                        <br />
                        <br />
                        <input type="text" name="password" id="password" size="20" maxlength="30" />
                    </form>
                </div>

Kann man das irgendwie lösen?

 

[Wustersoss]

Hallo, Welchen Doctype benutzt Du? Wie sieht Dein CSS aus? Dein Html funktioniert mit den CSS-Grundeinstellungen in Deinen genannten Browsern überall gleich und sieht auch gleich aus. Dein Problem muss also andere Ursachen haben.

 

[threadi]

Lass diese Zeilenumbrüche weg. Die sind unnötig und wahrscheinlich auch die/eine Ursache für die unterschiedliche Darstellung. Dein CSS wäre für eine genauere Analyse interessant.

 

[FireFreak]

Wenn ich die Zeilenumbrüche entferne, wie kann ich die "Hohlräume" dann wiederherstellen? Alles in jeweils ein div packen und dann margin oder wie?

Ich bin nicht alzu gut in HTML&CSS bzw. ich fange grade erst an ._.

Oder kann man die Zwischenabstände irgendwie anders einstellen?

Das relevante CSS:

#login_both {    /* Text und Fields zusammengefasst */
    position: absolute; 
    width: 250px;
    height: 100px;
    margin-left: 125px;
    margin-top: 37px;
}


#login_texts { /* Username und Passwort */
    color: #03ABFF;
    position: absolute;
    width: 70px;
    padding-top: 5px;
}


#login_fields { /* Textfelder */
    position: absolute;
    margin-left: 80px;
}

HTML:

<div id="login_both">
                <div id="login_texts">
                    <label for="username">Username:</label>
                    <br />
                    <br />
                    <label for="password">Passwort:</label>
                </div>
                <div id="login_fields">
                    <form method="post" action="login.php">
                        <input type="text" name="username" id="username" size="20" maxlength="30" />
                        <br />
                        <br />
                        <input type="text" name="password" id="password" size="20" maxlength="30" />
                    </form>
                </div>
                <div id="login_button">
                    <a href="#"><img src="http://www.html.de/images/login_image.png" alt="Login" /></a>
                </div>
            </div>

PS: login-button habe ich definiert, ich hab's nur nicht hier rein geschrieben.

 

[threadi]

Ja, Du weißt es doch schon: margin nutzen :) Auch hilfreich (je nach Anwendungsfall) können padding und line-height sein. In diesem Fall aber wohl eher margin alleine.

 

[Tronjer]

Bei #login_texts mit display:block und line-height den Zeilenabstand justieren, und #login_fields mit float:left positionieren.

Das position:absolute brauchst du auch nicht.

 

[FireFreak]

Ok, ich hab das Problem mit #login_fields input { margin } gelöst, sieht super aus^^

Danke euch vielmals