✔ form; Eingabefelder und img-button mit css unterschiede ie und ff

[Grille]

hallo ...

Ich versuche gerade einen Anmeldebereich im Kopfbereich meiner Homepage unterzubringen und habe wiedermal probleme mit der Darstellung von IE und FF ...

Ich habe außen herum eine Tabelle angelegt und mit einem "leer.png"-Bild die alles positioniert.

Jetzt wolle ich innerhalb dieser Tabelle die Formularfelder und den Absendebutton unterbringen. doch leider meint FF den Button 3px höher versetzen zu müssen, als die nebenstehenden input-Felder. IE machts natürlich anders ... da sind alle auf gleicher Höhe ... so wie es sein soll

Allgemein wolle ich mal fragen, wie man Formulare Browserübergreifend gleich gestalten kann ... denn besonders das Problem mit grafischen Buttons habe ich immer wieder (also dass die höher oder tiefer sind als die danebenstehenden Eingabefelder) ... muss man alles in Div-Boxen anlegen?

Hier ist mein Code:
CSS

/* ***************************** Schriftklassen für den Content **************************** */
html { font-family:'Times New Roman',Times,serif; text-align: left; }
 
 
/* ***************************** MENU_TOP ANFANG **************************** */
.top_input { color:#000; border: 2px solid #f0a; width: 144px; height: 19px; margin: 0px 0px 0px 0px; display: block;}
/* ****************************** MENU_TOP ENDE ***************************** */
/* **************************** TABELLE ANFANG ***************************** */
table { width:100%; }
td { vertical-align:middle; overflow:hidden; }
/* **************************** TABELLE ENDE ******************************* */

und hier der Tabellenbereich HTML:

<form action="" method="post">
 <table width='1000' border='0' cellpadding='0' cellspacing='0'>
  <tr>
   <td width='300' colspan='14'><img src="images/template/sysfiles/leer.png" border=0; width='300' height='54'></td>
  </tr>
  <tr>
   <td width='337'><img src="images/template/sysfiles/leer.png" border=0; width='337' height='20'></td>
   <td width='125'><a href="index.php?order=2001" title=""><img src="images/template/sysfiles/button_neu_registrieren.png" border=0; width='125' height='20' style='margin-top:11px;' alt="hier klicken wenn du dich bei uns registrieren möchtest"></a></td>
   <td width='7'><img src="images/template/sysfiles/leer.png" border=0; width='7' height='20'></td>
   <td width='125'><a href="index.php?order=3001" title=""><img src="images/template/sysfiles/button_passwort_vergessen.png" border=0; width='125' height='20' style='margin-top:11px;' alt="passwort vergessen? kein problem!"></a></td>
   <td width='9'><img src="images/template/sysfiles/leer.png" border=0; width='9' height='20'></td>
   <td width='150'><input class='top_input' type='email' name='email'></td>
   <td width='5'><img src="images/template/sysfiles/leer.png" border=0; width='5' height='20'></td>
   <td width='150'><input class='top_input' type='password' name='password'></td>
   <td width='5'><img src="images/template/sysfiles/leer.png" border=0; width='5' height='20'></td>
   <td width='54'><input type="image" src="images/template/sysfiles/button_login.png" border=0; width='54' height='25' alt="und los!"></td>
   <td width='54'><img src="images/template/sysfiles/leer.png" border=0; width='54' height='20'></td>
  </tr>
 </table>
</form>

Die Eingabebox und der Button (Grafik) sind gleich hoch und sollten daher auch auf einer linie stehen ...

vielen Dank im vorraus

 

[Maik]

Hi.

Die Eingabebox und der Button (Grafik) sind gleich hoch und sollten daher auch auf einer linie stehen ...

Sicher?

Die Eingabefelder sind nach deinen CSS-Angaben und gemäß dem Boxmodell 23px hoch, und für den grafischen Button hast du eine Höhe von 25px festgelegt.

Der Artikel Styling form controls beantwortet deine Frage, wie bzw. ob man Formularelemente auf den unterschiedlichen Betriebssystemen browserübergreifend formatieren kann.

Und was hat es eigentlich mit dieser Syntax border=0; auf sich? Nach dem HTML-Attribut border="0" wird kein Semikolon notiert.

 

[Grille]

hallo Maik;

habe in der Zeit wo noch keine Antwort kam versucht alles mit "absolute" positionierten Div-Boxen zu lösen.

selbst hier finden sich dies kleinen Unterschiede wieder ... hier erstmal das CSS:

.menu_top_button_neue_registrierung { width: 125px; height: 20px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden; display: block; position:absolute; top:65px; left:337px;}
.menu_top_button_passwort_vergessen { width: 125px; height: 20px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden; display: block; position:absolute; top:65px; left:469px;}
.menu_top_input_email { width: 150px; height: 25px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden; display: block; position:absolute; top:54px; left:600px; background-color: #3fa;}
.menu_top_input_password { width: 150px; height: 25px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden; display: block; position:absolute; top:54px; left:755px; background-color: #faa;}
.menu_top_inputbutton_login { width: 54px; height: 25px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden; display: block; position:absolute; top:54px; left:910px; background-color: #444;}
.top_input { color:#000; border: 2px solid #f0a; width: 144px; height: 19px; margin: 0px 0px 0px 0px; display: block;}

... und das HTML:

<form action="" method="post">
 <div class='menu_top_button_neue_registrierung'><a href="index.php?order=2001" title=""><img src="http://www.tutorials.de/forum/images/template/sysfiles/button_neu_registrieren.png" border=0; width='125' height='20' alt="hier klicken wenn du dich bei uns registrieren möchtest"></a></div>
 <div class='menu_top_button_passwort_vergessen'><a href="index.php?order=3001" title=""><img src="http://www.tutorials.de/forum/images/template/sysfiles/button_passwort_vergessen.png" border=0; width='125' height='20' alt="passwort vergessen? kein problem!"></a></div>
 <div class='menu_top_input_email'><input class='top_input' type='email' name='email'></div>
 <div class='menu_top_input_password'><input class='top_input' type='password' name='password'></div>
 <div class='menu_top_inputbutton_login'><input type="image" src="http://www.tutorials.de/forum/images/template/sysfiles/button_login.png" border=0; width='54' height='25' alt="und los!"></div>
</form>

Die Bilder passen genau, aber sobald ich mein Eingabefeld setzen will, rechnet IE einen Abstand von 1px an den oberen Rand und einen Absand von 2px links neben dem Eingabefeld hinzu und schiebt damit das Eingabefeld aus meine Div-Box heraus. Die Länge des Eingabefeldes im CSS mit 146px definiert wird im FF zu 150px und im IE zu 152px. Wenn ich das Eingabefeld 21px hoch machen würde, würden mir beide Browser ein 27px hohe Box ausspucken, daher habe ich die Box mit 19px angegeben.

ich habe schon versucht das Problem mit der !important-Regel zu lösen, aber scheinbar scheint der neue IE das !important jetzt auch zu übernehmen.

Ich werde mir jetzt mal deinen Link ansehen .. vielleicht hilft der mir weiter ...

Vielen Dank für deine Antwort.

(nach kurzem Lesen deines Links) -> mir wird ganz übel bei dem Gedanken, dass ich meine Webseite nur auf zwei Browsern teste!

 

[Grille]

Ich habe das Problem jetzt so gelöst:
Die Eingabebox habe ich unsichtbar gemacht

.top_input { color:#000; border: 0px; width: 144px; height: 19px; margin: 0px 0px 0px 0px; display: block;}

Die Div-Box um das Eingabefeld hat nun den Rahmen den eigentlich´das Eingabefeld haben sollte.

.menu_top_input_email { border: 2px solid #f0a; width: 146px; height: 21px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden; display: block; position:absolute; top:54px; left:603px;}
.menu_top_input_password { border: 2px solid #f0a; width: 146px; height: 21px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden; display: block; position:absolute; top:54px; left:758px;}

Jetzt kann ich die Div-Boxen genau ausrichten so wie ich es haben will .. und es wird in IE7 und FF zumindest gleich angezeigt

 

[Grille]

... und da komischer Weise das was auf meinem Server Zuhause läuft auch wieder anders aussieht, als das was auf dem Webserver steht, hier jetzt meine (hoffendlich)endgültige Lösung:

Die Div-Box hat jetzt auch keinen Rahmen, sondern sie enthält ein Bild mit dem Rahmen. In der Div-Box befindet sich das Eingabefeld welches auch keinen Rahmen hat. aber kleiner sein muss als die Div-Box und mit margin:2px; auf Abstand zur Divbox gebracht werden muss.

Innerhalb der Div-Box befindet sich das Eingabefeld bei den verschiedenen Browsern an verschiedenen Position, da es aber nicht sichtbar ist, ist das egal.

CSS:

.menu_top_button_neue_registrierung { width: 125px; height: 20px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden; display: block; position:absolute; top:65px; left:337px;}
.menu_top_button_passwort_vergessen { width: 125px; height: 20px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden; display: block; position:absolute; top:65px; left:469px;}
.menu_top_input_email { width: 150px; height: 25px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden; display: block; position:absolute; top:54px; left:603px; background-image:url(../images/template/sysfiles/top_input_bg.png);}
.menu_top_input_password { width: 150px; height: 25px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden; display: block; position:absolute; top:54px; left:758px; background-image:url(../images/template/sysfiles/top_input_bg.png);}
.menu_top_inputbutton_login { width: 54px; height: 25px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden; display: block; position:absolute; top:54px; left:913px;}
.top_input { color:#000; border: 0px; width: 144px; height: 18px; margin: 2px 2px 2px 2px; display: block;}

HTML

<form action="" method="post">
 <div class='menu_top_button_neue_registrierung'><a href="index.php?order=2001" title=""><img src="images/template/sysfiles/button_neu_registrieren.png" border=0; width='125' height='20' alt="hier klicken wenn du dich bei uns registrieren möchtest"></a></div>
 <div class='menu_top_button_passwort_vergessen'><a href="index.php?order=3001" title=""><img src="images/template/sysfiles/button_passwort_vergessen.png" border=0; width='125' height='20' alt="passwort vergessen? kein problem!"></a></div>
 <div class='menu_top_input_email'><input class='top_input' type='text' name='email'></div>
 <div class='menu_top_input_password'><input class='top_input' type='password' name='password'></div>
 <div class='menu_top_inputbutton_login'><input type="image" src="images/template/sysfiles/button_login.png" border=0; width='54' height='25' alt="und los!"></div>
</form>