• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Die Bildungsoffensive hier im Forum geht weiter! Jetzt sollen Kreativität und technische Möglichkeiten einen neue Dimension erreichen. Das Thema in diesem Monat lautet - Verkehrte Welt - Hier geht es lang --> Klick

CSS Style Firefox/Safari/Chrome

  • Ersteller Ersteller law
  • Erstellt am Erstellt am

law

Gloster
Registriert
25.10.08
Beiträge
65
hallo,

ich bin soeben dabei eine kleine webseite zu bauen nur habe ich ein problem mit einem input-element und einem input-button.

unter safari/chrome sieht das layout super aus nur unter firefox will es einfach nicht so richtig.

firefox (screenshot):
firefox.png

safari/chrome (screenshot):
safari.png


ich bin wirklich ratlos hier jetzt noch mein test html-code:
Code: 
<html>
<head>
<style type="text/css">

#input {
    background: none repeat scroll 0 0 white;
    border-color: #DCDCDC;
    border-style: solid;
    border-width: 1px 0 1px 1px;
    font: 13px "Lucida Grande",Arial,Sans-serif;
    margin: 0;
    padding: 5px 5px 5px 15px;
    width: 220px;
    outline-width: 0;
	height: 30px;
}

#submit {
    background: none repeat scroll 0 0 white;
    border: 1px solid #DCDCDC;
    font: 13px "Lucida Grande",Arial,Sans-serif;
    margin: 0;
    outline-width: 0;
	height: 30px;
    padding: 5px 10px;
}

</style>
</head>
<body>
<input id="input" type="text" value="" /><input id="submit" type="button" value="Add" />
</body>
</html>

Kann mir das jemand helfen?

lg
patrick
 
probier es mal mit Firebug unter Firefox. Dann findest du vielleicht mehr raus.

Ich seh jetzt in Firefox auch nur eine Verschiebung des Buttons um 1 Pixel. Gib mal dem Body margin:0; und padding:0;
Ich denke irgend nen margin oder padding ist dran schuld.
 
Bomberzocker schrieb:
probier es mal mit Firebug unter Firefox. Dann findest du vielleicht mehr raus.

Ich seh jetzt in Firefox auch nur eine Verschiebung des Buttons um 1 Pixel. Gib mal dem Body margin:0; und padding:0;
Ich denke irgend nen margin oder padding ist dran schuld.
Zum Vergrößern anklicken....

danke für deine Antwort, ich verwende Firebug aber auch hier komme ich nicht wirklich weiter...
Body ein margin bzw. padding von 0 zu geben bringt leider auch nicht den erhofften erfolg..

Hat noch jemand einen Tipp für mich?
 
Was soll den das repeat und scroll bewirken? Wenn kein Hintergrund vorhanden ist sind diese Angaben total hinfällig. Ebenso die beiden Nullen (0 0) werden nicht gebraucht, diese sind normalerweise für die Position des Hintergrundbildes zuständig.

Das was du uns hier zeigst ist aber auch nicht der komplette Quelltext oder? Wenn doch solltest du definitiv einen DOCTYPE einfügen.

Dein ganzer CSS-Code lässt sich dann im übrigen auch noch vereinfachen:
Code: 
input {
	background-color: #fff;
	border: 1px solid #dcdcdc;
	font: 13px "Lucida Grande", Arial, sans-serif;
	height: 30px;
	margin: 0;
	outline: none;
}

input#input {
	border-right-width: 0;
	padding: 5px 5px 5px 15px;
	width: 220px;
}

input#submit {
	padding: 5px 10px;
}
 
@synoxis danke für deine tipps hier ist mein totaler quellcode.

Code: 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">

input {
	background-color: #fff;
	border: 1px solid #dcdcdc;
	font: 13px "Lucida Grande", Arial, sans-serif;
	margin: 0;
	outline: none;
}

input#input {
	border-right-width: 0;
	padding: 5px 5px 5px 15px;
	width: 220px;
}

input#submit {
	padding: 5px 10px;
}
</style>
</head>
<body>
<input id="input" type="text" value="" /><input id="submit" type="button" value="Add" />
</body>
</html>
 
Großes Chaos, nimm mal das hier als kompletten Code:

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>PAGETITLE</title>
	<style type="text/css">
	input {
		background-color: #fff;
		border: 1px solid #dcdcdc;
		font: 13px "Lucida Grande", Arial, sans-serif;
		margin: 0;
		outline: none;
	}

	input#input {
		border-right-width: 0;
		padding: 5px 5px 5px 15px;
		width: 220px;
	}

	input#submit {
		padding: 5px 10px;
	}
	</style>
</head>
<body>
	<input id="input" type="text" value="" /><input id="submit" type="button" value="Add" />
</body>
</html>

Die Art von DOCTYPE die du nutzt gibt es garnicht, ebenso sieht mit das HTML-Attribut mit der doppelten Angabe der Sprache etwas komisch aus. Ist dein Problem immernoch vorhanden?
 
Hi, ja leider. Vielleicht hast du ja auch Safari/Chrome (Webkit) und Firefox installiert und siehst es dann selber. Die Inputs sind im Firefox immer verschoben (siehe Screenshots im ersten Beitrag)...

Danke für deine Hilfe!

GESCHAFFT!!! :-) Danke nochmal an eure Hilfe!

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" />
	<style type="text/css">
	input {
		background-color: #fff;
		border: 1px solid #dcdcdc;
		font: 13px "Lucida Grande", Arial, sans-serif;
		margin: 0;
		outline: none;
	}

	input#input {
		border-right-width: 0;
		padding: 5px 5px 5px 15px;
		width: 220px;
	}

	input#submit {
		padding: 4px 10px;
	}
	</style>
</head>
<body>
	<input id="input" type="text" value="" /><input id="submit" type="button" value="Add" />
</body>
</html>
 
Zuletzt bearbeitet:
Oh du hast Recht, den kannte ich noch nicht. Diesen zu nutzen finde ich aber noch für zu früh ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
2003-2025 Apfeltalk | Made on a Mac
Oben Unten