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