Formular padding Problem im IE 7

unic · #1 (**permalink**) 13.01.2009, 23:47

Hallo liebe Community,

Mein Problem ist, dass ein Formular in allen Browsern außer dem IE7 zu weit am linken Rand dargestellt wird als alle anderen HTML-Elemente die noch an dieser Stelle dargestellt werden. Wenn ich dem Formular per CSS ein padding-left:150px; zuordne wird es in allen Browsern so dargestellt wie ich möchte, außer im IE7, dort wird es dann 150px zu weit rechts dargestellt. Hier mal ein paar Bilder zur Erläuterung:

Firefox ohne #formular { padding-left:150px; }

IE7 ohne #formular { padding-left:150px; } (So sollte es ausehen)

Wenn ich dann dem formular das Attribut padding-left:150px; gebe sieht das ganze wie folgt aus:

Firefox: (So sollte es aussehen)

IE7:

Ich habe eine relativ simpel gestrickte HTML seite, die ihren content über 4 Variablen von PHP übergeben bekommt. Diese liefern je nachdem welche Kategorie der Nutzer anschaut entweder reinen Text oder HTML. Im folgenden erstmal meine HTML-Datei und meine CSS-Datei die das ganze formatiert:

Wichtig: die funktion htmlShowVar ist nur zur Fehlervorbeugung drin, sie ändert nichts am HTML code!!!

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Flugsportverein Neustadt an der Weinstraße</title>
		<link rel="stylesheet" type="text/css" href="style/style.css" />
	</head>
	
	<body>
		<div id="page">
			<div id="banner">&nbsp;</div>
			<div id="mainnav">
				<p id="mainnavcontainer">
					<?php echo htmlShowVar($main_nav_text, "Unknown")."\n"; ?>
				</p>
			</div>
			<div id="subnav">
				<p id="subnavcontainer">
					<?php echo htmlShowVar($sub_nav_text, "Unknown")."\n"; ?>
				</p>
			</div>
			<div id="spacer">&nbsp;</div>
			<div id="content">
				<p id="contentcontainer">
					<b><?php echo htmlShowVar($title_text, "Unkown")."<br><br>\n"; ?></b>
					<?php echo htmlShowvar($content_text, "Unkown")."\n"; ?>
				</p>
			</div>
			<div id="bottom">&nbsp;</div>
		</div>
	</body>
</html>

Code:

html  {
	margin : 0;
	padding : 0;
	height : 100%;
	width : 100%;
}

body {
	margin : 0;
	padding : 0;
	font-family : Arial, Tahoma;
	font-size : 10pt;
	height : 100%;
	width : 100%;
	background-color : #7286A9;
}

a:link {
	color : #14325A;
	text-decoration : none;
}

a:visited {
	color : #14325A;
	text-decoration : none;
}

a:hover, a:active {
	color : #538CD9;
	text-decoration : none;
	border-bottom-width : 1px;
	border-bottom-style : dotted;
	border-bottom-color : #993300;
}

#mainnavcontainer, #subnavcontainer, #contentcontainer {
	display:inline-block;
	padding-left:150px;
	padding-right:150px;
	margin:0px;
}

#page {
	width:900px;
	margin-left:10%;
}

#banner {
	width:900px;
	height:138px;
	background-image:url(pics/banner.gif);
	background-color:#000000;
}

#mainnav {
	width:900px;
	height:52px;
	background-image:url(pics/mainnav.gif);
	background-color:#000000;
}

#mainnavcontainer {
	padding-top:15px;
}

#subnavcontainer {
	padding-top:15px;
} 

#subnav {
	width:900px;
	height:50px;
	background-image:url(pics/subnav.gif);
	background-color:#000000;
}

#spacer {
	width:900px;
	height:26px;
	background-image:url(pics/spacer.gif);
	background-color:#000000;
} 

#content {
	width:900px;
	height:284px;
	background-image:url(pics/content.gif);
	background-color:#000000;
}

#contentcontainer {
	margin-left:0px;
}

#bottom {
	width:900px;
	height:50px;
	background-image:url(pics/bottom.gif);
	background-color:#000000;
}

#formular {
	padding-left:150px;
}

Wie ihr seht ist das ganze aus DIV's aufgebaut, was bisher ganz gut geklappt hat. In den meisten Fällen wird alles genauso angezeigt wie ich es möchte, außer wenn ich der $content_text Variable, die den Haupt-Content der aktuellen Seite liefert ein Formular übergebe, um konkret zu werden hier mal das Formular um das es geht als Code:

HTML-Code:

<form method="post" action="index.php?categorieID=".$this->categorieID."&action=login" id="formular">
<input type="text" name="user" value="user"><br>
<input type="password" name="pass" value="pass"><br>
<input type="submit" name="login" value="login"><br>
</form>

Ich habe hier im Forum gelesen, dass man Formulare irgendwie vom "globalen Reset" ausschließen muss (* { margin:0px; padding:0px; } ), aber zum einen mache ich das nicht und auch wenn ich margin:0px; und padding:0px; für den html und den body Tag weg mache hat sich bei mir zumindest an diesem Problem nichts geändert.

Ich hoffe diese Frage ist nicht zu lächerlich, denn dies ist das erste mal, dass ich ein Layout komplett mit CSS formatiere, bisher hab ichs zum größten Teil mit Tabellen, viel HTML und ein wenig CSS zur Textformatierung gemacht

.

Ich bin für jede konstruktive antwort dankbar und für alle Meckerer: Ja, ich habe im Vorfeld die Suchfunktion benutzt und auch die FAQ durchgelesen sowie mein HTML als auch meinen CSS-Code validiert.

so long

unic

123merlin · #2 (**permalink**) 14.01.2009, 08:42

Also wenn das nur beim ie7 ein Problem darstellt, dann kannst ja die CSS kopieren und eine seperate für den IE7 erstellen, die dann das padding-left:150px; nicht drin hat.

unic · #3 (**permalink**) 14.01.2009, 09:14

Das wäre höchstens meine allerletzte Rettung, Redundanz ist etwas dass ich generell vermeiden möchte!

Boris · #4 (**permalink**) 14.01.2009, 11:28

Stell das doch mal als funktionierende Website (die das gesamte XHTML dann enthält) online.

Zumal - XHTML 1.1 solltest du nicht benutzen, da es nicht als text/html verschickt werden darf. Nutze XHTML 1.0 Strict stattdessen.

unic · #5 (**permalink**) 16.01.2009, 00:07

Unter Flugsportverein Neustadt an der Weinstrae habe ich die derzeitige Seite einmal online gestellt. Unter der Rubrik "Login" kommt ihr zu dem Teil der mir Sorgen bereitet.

Boris · #6 (**permalink**) 16.01.2009, 00:27

Erst solltest du mal das alles beheben:

[Invalid] Markup Validation of http://www.bithauer.de/fsvnTest/index.php?categorieID=34 - W3C Markup Validator

Dann reden wir weiter

unic · #7 (**permalink**) 18.01.2009, 00:07

Ich habe herausgefunden was falsch war:

Ein <form> ist ein Blockelement, innerhalb eines <p>-Tags dürfen aber nur Inlineelemente stehen. Ich habe deshalb mein <p id="contentcontainer> ... </p> einfach gegen <div id="contentcontainer"> ... </div> ausgetauscht. Auf Inlineelemente hat dies den gleichen Effekt wie <p> aber Blockelemente werden dadurch auch korrekt dargestellt.

Danke dass du mich darauf gestoßen hast das Formular auch zu validieren, ich hatte immer nur meinen HTML-Code aus der Datei und nicht den von der tatsächlich angezeigten Seite validiert, erst dadurch habe ich gesehen, dass <p> keine Blockelemente enthalten dürfen, wieder was wichtiges gelernt

.

Danke für die Hilfe und viele Grüße,

Unic

Boris · #8 (**permalink**) 18.01.2009, 10:13

Zitat:

Ein <form> ist ein Blockelement, innerhalb eines <p>-Tags dürfen aber nur Inlineelemente stehen. Ich habe deshalb mein <p id="contentcontainer> ... </p> einfach gegen <div id="contentcontainer"> ... </div> ausgetauscht.

DIV ist auch ein Blockelement, genauso wie P auch. Du hast also ein Blockelement gegen ein Blockelement getauscht, was ein wenig sinnfrei ist.

Innerhalb von <form> dürfen Blockelemente stehen, das ist erlaubt. Insofern weiß ich jetzt nicht, was du warum gemacht hast

Was nötig wäre, ist dass die Input-Elemente innerhalb eines Blockelementes stehen müssen bei XHTML 1.0 Strict und XHTML 1.1. Wobei es in deinem Fall unsinnig und auch falsch ist, XHTML 1.1 zu benutzen und es in der Kodierung text/html zu versenden. Das ist nicht erlaubt, daher nimm XHTML 1.0 Strict als Doctype.

unic · #9 (**permalink**) 18.01.2009, 13:12

Zitat:

Zitat von Boris

DIV ist auch ein Blockelement, genauso wie P auch. Du hast also ein Blockelement gegen ein Blockelement getauscht, was ein wenig sinnfrei ist.

Das stimmt, es ging aber darum, dass P keine Blockelemente enthalten darf, DIV hingegen schon. Ich hatte ein FORM innerhalb eines P stehen, daher der Anzeigefehler, nun habe ich ein FORM innerhalb eines DIV stehen, Ergebnis: all right.

An der Seite die online steht hat sich noch nichts verändert falls du das meinst, das werd ich die Tage wenn ich Zeit habe mal machen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
Problem mit einem 3D-Effekt	moep0710	CSS	12	12.06.2010 14:30
rätselhafter Leerraum zwischen Content und Footer im IE	jhonnybravo	CSS	5	04.03.2010 11:47
Ungewöhnlicher abstand beim clearen von floats	adrianno	CSS	14	16.09.2009 14:20
Untermenü im IE	nici	CSS	10	22.06.2009 21:19