• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Was gibt es Schöneres als den Mai draußen in der Natur mit allen Sinnen zu genießen? Lasst uns teilhaben an Euren Erlebnissen und macht mit beim Thema des Monats Da blüht uns was! ---> Klick

CSS Style Firefox/Safari/Chrome

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
 
Bomberzocker

Bomberzocker

Auralia
Registriert
08.06.08
Beiträge
202
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.
 

law

Gloster
Registriert
25.10.08
Beiträge
65
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?
 
Synoxis

Synoxis

Sonnenwirtsapfel
Registriert
09.06.09
Beiträge
2.401
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;
}
 

law

Gloster
Registriert
25.10.08
Beiträge
65
@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>
 
Synoxis

Synoxis

Sonnenwirtsapfel
Registriert
09.06.09
Beiträge
2.401
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?
 

law

Gloster
Registriert
25.10.08
Beiträge
65
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:
Synoxis

Synoxis

Sonnenwirtsapfel
Registriert
09.06.09
Beiträge
2.401
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-2024 Apfeltalk | Made on a Mac
Oben Unten