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; } http://www1.picfront.org/picture/lf1...b/FF_wrong.JPG IE7 ohne #formular { padding-left:150px; } (So sollte es ausehen) http://www1.picfront.org/picture/EmP...b/IE_right.JPG Wenn ich dann dem formular das Attribut padding-left:150px; gebe sieht das ganze wie folgt aus: Firefox: (So sollte es aussehen) http://www1.picfront.org/picture/8oK...b/FF_right.JPG IE7: http://www1.picfront.org/picture/Gk6...b/IE_wrong.JPG 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" Code:
html { HTML-Code:
<form method="post" action="index.php?categorieID=".$this->categorieID."&action=login" id="formular"> 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 :roll: . 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 |
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.
|
Das wäre höchstens meine allerletzte Rettung, Redundanz ist etwas dass ich generell vermeiden möchte!
|
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. |
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.
|
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 :D |
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 |
Zitat:
Innerhalb von <form> dürfen Blockelemente stehen, das ist erlaubt. Insofern weiß ich jetzt nicht, was du warum gemacht hast :D 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. |
Zitat:
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. |
Alle Zeitangaben in WEZ +2. Es ist jetzt 14:39 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023