zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Formular padding Problem im IE 7

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.01.2009, 23:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.01.2009
Beiträge: 11
unic befindet sich auf einem aufstrebenden Ast
Standard Formular padding Problem im IE 7

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.01.2009, 08:42
Neuer Benutzer
neuer user
 
Registriert seit: 10.04.2008
Beiträge: 12
123merlin befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.01.2009, 09:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.01.2009
Beiträge: 11
unic befindet sich auf einem aufstrebenden Ast
Standard

Das wäre höchstens meine allerletzte Rettung, Redundanz ist etwas dass ich generell vermeiden möchte!
Mit Zitat antworten
  #4 (permalink)  
Alt 14.01.2009, 11:28
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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.
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #5 (permalink)  
Alt 16.01.2009, 00:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.01.2009
Beiträge: 11
unic befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 16.01.2009, 00:27
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #7 (permalink)  
Alt 18.01.2009, 00:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.01.2009
Beiträge: 11
unic befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 18.01.2009, 10:13
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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.
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic

Geändert von Boris (18.01.2009 um 10:15 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 18.01.2009, 13:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.01.2009
Beiträge: 11
unic befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Boris Beitrag anzeigen
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.
Mit Zitat antworten
Sponsored Links
Antwort

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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:59 Uhr.