Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 04.07.2009, 19:37
Benutzerbild von creeker
creeker creeker ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.01.2008
Ort: Horn-Bad Meinberg
Beiträge: 17
creeker befindet sich auf einem aufstrebenden Ast
Frage Formularfelder in FF, Opera, Chrome, Safari

Hey, habe folgendes Problem:
diese Seite (med.de) sieht in jedem der oben genannten Browser anders aus, konkret, die Formularfelder im Header. Probleme bereiten mir zum einen die Buttons, die unterschiedlich breit sind (Firefox macht Mist mit dem Padding meiner Meinung nach) und das Textfeld des Suchformulars, das ebenfalls nicht in allen Browsers gleich breit ist. Vielleicht bin ich einfach nur zu blöd und habe irgendetwas übersehen bei der Hitze im Moment, aber ich komme einfach nicht drauf. Oder es sind einfach die verschiedenen Engines...

Hier mal die Code Snippets:

HTML:
HTML-Code:
<div class="forms">
<form action="#" method="post" class="login">
<div><input name="username" type="text" value="Benutzername" />
<input name="password" type="text" value="Passwort" />
<button type="submit" class="button_big bblue"><span>LOGIN</span></button></div>
</form>

<p><a href="#">Passwort vergessen?</a> &nbsp; <a href="#">Benutzername vergessen?</a> &nbsp; <a href="#" class="reg">Registrieren</a></p>
<hr />

<form action="#" method="get" name="search" class="search">
<div><input name="sq" type="text" value="Ihr Suchbegriff"  />
<button type="submit" class="button_big bred"><span>FINDEN</span></button></div>
</form>
</div>
CSS:
Code:
.button_big {
	padding:8px 3px 8px 0;
}

.button_big span {
	padding:8px 9px 8px 15px;
	color:white;
	text-decoration:none;
}

button:hover { cursor:pointer !important;}

.button_big:hover span { text-decoration:underline; }

.bred { background:url(img/button_gross_rot_right.gif) no-repeat right; }
.bred span { background:url(img/button_gross_rot_left.gif) no-repeat left; }

.bblue { background:url(img/button_gross_blau_right.gif) no-repeat right; }
.bblue span { background:url(img/button_gross_blau_left.gif) no-repeat left; }
Code:
.login input {
	margin-right:5px;
}

html* .login input {
	max-width: 142px;
}

.search input {
	width:298px;
	margin-right:5px;
}
Code:
input {
	background:#fff url(img/form_bg.jpg) repeat-x top;
	border:1px solid #fff;
	outline:1px solid #a7b7bb;
	padding:4px 5px;
	font-size:14px;
}
__________________
visit my Homepage
Mit Zitat antworten
Sponsored Links