✔ IE und Firefox Problem

Status
Nicht offen für weitere Antworten.
D

derheine

Grünschnabel
Guten Abend zusammen,

habe ein kleines Problem, das ich selber nicht in den Griff bekommen (*schäm*) Also ich bastel grade an ner kleinen Seite. Ist nix dolles und soll auch nur einen einzigen Zweck erfüllen, nämlich ne Loginseite.

Ich habe das jetzt mal mit CSS gemacht, weil ichs endlich mal lernen will, aber schon beim Testen mit dem Firefox (2.0.1) Browser gabs Probleme (beim IE 7 ists so wie ichs mir gedacht habe)

Habe euch zwei Bilder angehängt. Einmal das Erscheinungsbild im IE und einmal das des Firefox! Ihr seht den Unterschied sofort.. Und ich hab absolut keine Ahnung wie ich das machen soll!

Für jede Antwort im Voraus vielen Dank!!


MfG,
Jens

Hier noch die CSS-Datei:
Code: 
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  background-color: #ffffff;
  color: #000000;
  margin-left: 19px;
  margin-top: 14px;
}

#logo {
  margin: 0 0 0 0;
}

#login {
  margin-left: 178px;
  margin-top: -112px;
}

input {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  border-style: solid;
  border-width: 1px;
  background: #000000:
}

.feldbreite { width: 287px; }

und hier die HTML-Datei:
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>
<title>derheine</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Author" content="Jens Heinemann" />

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<!--
<link rel="stylesheet" href="lightbox-plugin/css/lightbox.css" type="text/css" media="screen" />

<script src="lightbox-plugin/js/prototype.js" type="text/javascript"></script>
<script src="lightbox-plugin/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="lightbox-plugin/js/lightbox.js" type="text/javascript"></script>
-->

</head>

<body>
<div id="logo">
<img src="images/logo.jpg" border="0" width="440" height="217" />
</div>
<div id="login">
login:<br />
<input type="text" name="user" value="Benutzername" class="feldbreite" /><br />
<input type="password" name="password" value="Passwort" class="feldbreite" />
</div>
</body>
</html>
 

Anhänge

  • 27509attachment.jpg
    27509attachment.jpg
    86,4 KB · Aufrufe: 41
  • 27510attachment.jpg
    27510attachment.jpg
    83,3 KB · Aufrufe: 41
Zuletzt bearbeitet:
Hi,

zunächst ist mir aufgefallen, dass die letzte Definition (background) der Klasse feldgroesse mit einem
Doppelpunkt abgeschlossen wird - damit wird die Anweisung ignoriert. Den Schwarzen Hintergrund habe ich
heller gewählt.

Weiterhin hast Du keine Farbe für den Rahmen (border) angegeben.

Den vertikalen Abstand zwischen den input-Feldern kannst Du mit Hilfe von margin-bottom erreichen. Hier
muss jedoch zwischen IE und Nicht-IEs unterschieden werden.

Das CSS mit conditional comment (für IE) könnte wie folgt aussehen:
Code: 
<style type="text/css">
  <!--
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  background-color: #ffffff;
  color: #000000;
  margin-left: 19px;
  margin-top: 14px;
}

#logo {
  margin: 0 0 0 0;
}

#login {
  margin-left: 178px;
  margin-top: -112px;
}

input {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  border: 1px solid #000;  /* Rahmen angepasst */
  background: #efefef;     /* Schwarzen Hintergrund angepasst */
}

.feldbreite { width: 287px;
              margin-bottom: 4px; /* Vertikaler Abstand */}
 //-->
</style>

<!--[if IE]>
<style type="text/css">
  .feldbreite { margin-bottom: 0;}
</style>
<![endif]-->
Ciao
Quaese
 
Hallo!

Eine ganz bescheidene Frage: was soll eigentlich passieren, nach dem der User seinen Namen und Passwort eingegeben hat?
Da währe es doch sicherlich sinnvoll, wenn die Input-Felder in ein Formular kommen. ;)

Versuche es mal so.....
style.css
Code: 
html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    text-transform: uppercase;
    background-color: #ffffff;
    color: #000000;
}

#logo {
    position:absolute;
    left: 19px;
    top: 14px;
    z-index: 0;
}

#login {
    position:absolute;
    left: 178px;
    top: 112px;
    z-index: 1;
}

input {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    padding: 1px 0 1px 3px;
}

.feldbreite {
    width: 287px;
    height: 18px;
    border: 1px solid #000000;
    text-transform: uppercase;
    margin: 1px 1px 2px 1px;
}

#button {
    width: 75px;
    height: 26px;
    margin: 0;
    padding: 0;
    font-size: 12px;
}
ie_style.css
Code: 
input {
    margin: 1px 0 0 0;
}
.feldbreite {
    margin: 1px 1px 0 1px;
}
#button {
    margin: 1px 0 0 0;
    padding: 0;
}
HTML
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>
<title>derheine</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Author" content="Jens Heinemann" />

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

<!--[if IE]>
<link rel="stylesheet" href="css/ie_style.css" type="text/css" media="screen" />
<![endif]-->

<link rel="stylesheet" href="lightbox-plugin/css/lightbox.css" type="text/css" media="screen" />

<script src="lightbox-plugin/js/prototype.js" type="text/javascript"></script>
<script src="lightbox-plugin/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="lightbox-plugin/js/lightbox.js" type="text/javascript"></script>

</head>

<body>

<div id="logo">
    <img src="images/logo.jpg" border="0" width="440" height="217" alt="" />
</div>

<div id="login">
    <form action="check.php" method="post">
        login:<br />
        <input type="text" name="user" value="Benutzername" class="feldbreite" /><br />
        <input type="password" name="password" value="Passwort" class="feldbreite" /><br />
        <input type="submit" value="Login" id="button" />
    </form>
</div>

</body>
</html>
Da der Login ja sicherlich auch geprüft/verarbeitet werden soll, habe ich als Ziel mal die check.php genannt.

Die Sternchen bzw. die runden Punkte im Passwortfeld kann man, soweit ich weiss, nicht beeinflussen..... mit diesem Unterschied wirst Du also leben müssen.

Gruss Dr Dau
 
Hi,

ja, das soll noch geprüft werden, hatte ich nur schon gar keine Lust mehr zu nachdem mein kleiner Test da nach hinten losgegangen ist! :p

Ich werd's gleich mal ausprobieren! Danke für die Antworten

Noch einen schönen Feiertag,
Jens
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück