Autor |
Nachricht |
Gonnso
Threadersteller
Dabei seit: 10.07.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 06.09.2009 20:31
Titel Darstellungsfehler Firefox |
|
|
Nabend zusammen,
weiss jemand, warum Firefox auf der Seite www.chaostempel.de die Texteingabefelder falsch darstellt?
Zum Vergleich: im IE sieht es korrekt aus!
Gruß und danke schonmal,
Daniel
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst So 06.09.2009 22:21
Titel Re: Darstellungsfehler Firefox |
|
|
Die default-404-Seite hat leider keine Eingabefelder
|
|
|
|
|
Anzeige
|
|
|
Gonnso
Threadersteller
Dabei seit: 10.07.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 07.09.2009 02:18
Titel
|
|
|
Oh man, ich Depp.
Hab die index umbenannt, warum auch immer.
Geht jetzt wieder, danke!
Gruß.
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Mo 07.09.2009 02:46
Titel
|
|
|
Erstmal solltest Du noch label hinzufügen (Google), und dann kannst Du dieses links floaten (mit width), und auch die inputs. Wenn Du jeweils ein div um ein label und das dazugehörige input legst, kann auch nix schiefgehen, aber im Prinzip kannst Du auch auf das div verzichten (durch margin-bottom für die inputs nehmen diese eh vertikal deutlich mehr Platz als label ein, so dass nie ein input "hochrutschen" kann).
|
|
|
|
|
danielkussin
Dabei seit: 04.06.2008
Ort: Hamburg
Alter: 42
Geschlecht:
|
Verfasst Mo 07.09.2009 09:06
Titel
|
|
|
Dein Quellcode:
Code: | <div class="Text_Username">
Benutzername</div>
<div class="Text_Passwort">
<p>Passwort</p>
</div>
<p><input class="Textfeld_Username" type="text" name="username" size="24" tabindex="1"><br>
<input class="Textfeld_Kennwort" type="password" name="passwort" tabindex="2"></p>
<p><input class="Button" type="submit" value="Login" tabindex="3"></p> |
Korrigierter Quellcode:
Code: | <p>
<label for="username" class="Text_Username">Benutzername</label>
<input class="Textfeld_Username" type="text" name="username" size="24" tabindex="1">
</p>
<p>
<label for="passwort" class="Text_Passwort">Passwort</label>
<input class="Textfeld_Kennwort" type="password" name="passwort" tabindex="2">
</p>
<p>
<input class="Button" type="submit" value="Login" tabindex="3">
</p> |
Schöne Woche,
Daniel
|
|
|
|
|
Gonnso
Threadersteller
Dabei seit: 10.07.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 07.09.2009 09:56
Titel
|
|
|
Moin moin,
danke erstmal für die Antworten.
Leider klappt beides nicht so wirklich.
Weder verschwindet im Firefox der Rand der Eingabefelder, noch befinden sie sich an der richtigen Stelle.
Habe es jetzt allerdings ohne Layer für die einzelnen Elemente ausgerichtet.
Url für Quelltext: www.chaostempel.de
Gruß!
|
|
|
|
|
danielkussin
Dabei seit: 04.06.2008
Ort: Hamburg
Alter: 42
Geschlecht:
|
Verfasst Mo 07.09.2009 10:10
Titel
|
|
|
Hier jetzt der komplette Quellcode! Evtl. musst du noch mit einem Conditional Comment für den IE nachsteuern!
Code: | <!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=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
/* Universalselektor */
* {
margin:0; /*Außenabstände auf 0 setzen*/
padding:0; /*Innenabstände auf 0 setzen*/
}
/*Selektieren des Body-Tags*/
body {
font-family:Arial, Helvetica, sans-serif; /*Schriftart zuweisen inkl. Alternativen*/
font-size:80%; /* Schriftgröße auf 80% der Systemgröße reduzieren */
color:#000000; /*Schriftfarbe*/
background-color:#FFFFFF; /*Hintergrundfarbe*/
}
/*Überschriften*/
h1, h2, h3, h4, h5, h6 {
margin:12px 0; /*Vor- und Nachabstand auf 12px setzen*/
}
/*Absätze*/
p {
margin-bottom:6px; /*Nachabstand auf 6px setzen*/
}
/*ID des allumschliessenden DIV-Containers*/
#wrapper {
position:absolute; /*Absolute Positionierung zum freien Verschieben im Browserfenster*/
left:50%; /*Verschieben des Containers um 50% auf der x-Achse*/
width:720px; /*Breite des Containers*/
margin-left:-360px; /*Negativer Aussenabstand links, um den Container wieder 320px (Hälfte der Breite) zurück zu verschieben*/
top:50%; /*Verschieben des Containers um 50% auf der y-Achse*/
height:400px; /*Höhe des Containers*/
margin-top:-200px; /*Negativer Aussenabstand oben, um den Container wieder 200px (Hälfte der Höhe) zurück zu verschieben*/
background-image:url(http://www.chaostempel.de/bg.JPG); /*Hintergrundbild*/
background-position:left top; /*Richtung von wo das Hintergrundbild aufgebaut wird (links oben)*/
background-repeat:no-repeat; /*Wiederholung des Hintergrundbildes*/
}
/*ID des Login-DIVs*/
#login {
margin-top:300px; /*Aussenabstand: oben*/
margin-right:300px; /*Aussenabstand: rechts*/
margin-bottom:20px; /*Aussenabstand: unten*/
margin-left:100px; /*Aussenabstand: links*/
text-align:right; /*Textausrichtung*/
}
/*Formatieren der Label-Tags, die sich im Container #login befinden*/
#login label {
display:inline-block; /*Darstellungsart*/
width:100px; /*Breite*/
text-align:left; /*Textausrichtung*/
}
/*Formatieren der Input-Tags, die sich im Container #login befinden*/
#login input {
background-color:#FFFFFF; /*Hintergrundfarbe*/
border-color:#000000; /*Rahmenfarbe*/
border-style:solid; /*Rahmenstil*/
border-width:1px; /*Rahmenbreite*/
}
/*Formatieren der Input-Tags der Klasse .input, die sich im Container #login befinden*/
#login input.input {
width:200px; /*Breite*/
}
/*Formatieren der Input-Tags der Klasse .button, die sich im Container #login befinden*/
#login input.button {
width:100px; /*Breite*/
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="login">
<p>
<label for="username" class="Text_Username">Benutzername</label>
<input class="Textfeld_Username input" type="text" name="username" size="24" tabindex="1">
</p>
<p>
<label for="passwort" class="Text_Passwort">Passwort</label>
<input class="Textfeld_Kennwort input" type="password" name="passwort" tabindex="2">
</p>
<p>
<input class="button" type="submit" value="Login" tabindex="3">
</p>
</div>
</div>
</body>
</html> |
Gruß Daniel
Zuletzt bearbeitet von danielkussin am Mo 07.09.2009 12:32, insgesamt 4-mal bearbeitet
|
|
|
|
|
Gonnso
Threadersteller
Dabei seit: 10.07.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 07.09.2009 10:19
Titel
|
|
|
Sorry, immer noch falsche Darstellung im Firefox!?
|
|
|
|
|
|
|
|
Ähnliche Themen |
[XHTML / CSS] Darstellungsfehler in Opera 7 / Firefox 1.0
[Darstellungsfehler]
IE Darstellungsfehler
Darstellungsfehler / IE
Darstellungsfehler / CSS
Darstellungsfehler im IE
|
|