zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Formularfelder in FF, Opera, Chrome, Safari

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.07.2009, 18:37
Benutzerbild von creeker
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
  #2 (permalink)  
Alt 04.07.2009, 23:50
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.834
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Ich hab mir deine Seite jetzt im Safari 4, Opera 9.64 und Firefox 3.5 angesehen, aber ich sehe jetzt wirklich keinen Unterschied. Mal von einer kleinen Lücke auf der rechten Seite des "Login"-Buttons im Opera, aber wen stört der?
Bild: med5m7r.jpg - abload.de

Du wirst keine 1:1 Ergebnis auf allen Systemen und Browsern hinbekommen und das ist auch nicht wichtig.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
browser, button, hack, input

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
jquery Browsererkennung Safari / Chrome 1chris Javascript & Ajax 6 12.05.2011 14:29
HTML5 Multicolumn fehlerhafte Darstellung in Safari und Chrome Dethix (X)HTML 6 30.06.2010 16:59
Safari und Chrome reagieren komisch? sepp88 CSS 4 25.09.2009 20:24
border:1px outset #000000 im Safari und Google Chrome xXNemesisXx CSS 6 27.01.2009 19:13
Safari und Opera (Mac) zeigen runde Ecken nicht an Stefanie_K CSS 0 05.10.2006 14:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:32 Uhr.