Internetexplorer vermute 3px problem aber keine lösung ...

[Markus]

Hallo Zusammen,

ich arbeite mich gerade neu in die Erstellung von CSS basierten Container Layouts ein und experimentiere gerade mit einem 3 spaltigen Layout, wobei die beiden "subcontent" Container im Gegensatz zum Selfhtml Beispiel nach dem eigentlichen Inhalt ausgezeichnet werden sollen ... nun mein Problem

http://www.zischer.de/test/layout.html

ich kriege den verdammten Rand um den Titelcontainer nicht weg ... :(

ich freue mich auf eure antworten,

Güße aus dem Hochsauerland,

Markus

[Felix Riesterer]

Lieber Markus,

ich kriege den verdammten Rand um den Titelcontainer nicht weg ... :(

Kann das an position: absolute liegen? Probiere es doch mal mit gefloateten Boxen... Das sollte helfen.

Im Übrigen finde ich Dein Markup höchst unsemantisch! Nur weil Deine Klötze jetzt keine Tabellenzellen, sondern irgendwelche <div>s sind, ist Deine Seite nicht wesentlich besser! Deine Inhalte sollten semantisch ausgezeichnet sein! Nimm einfach mal Deine Navi zum Beispiel! Es gibt in SelfHTML ein wunderbares Kapitel zu einer sinnvoll ausgezeichneten Navi...

Und ein <img> in eine Überschrift zu setzen ist meiner Meinung nach höchst selten semantisch sinnvoll. Besser fände ich es, das Bild der Überschrift als Hintergrundbild zu verpassen, die dann natürlich durch Padding entsprechend nach rechts weiterversetzt werden müsste, um es nicht zu verdecken.

Nur so als gutgemeinte Kritik. :-)

Aber der IE ist wirklich sowas von einem Schandfleck! Und die Krönung ist, dass das mit dem 7er nicht besser werden soll!!!

Ich bin auf Deiner Seite.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Markus]

Hallo Felix,

erstmal danke für deine Anregungen.

Allerdings bei der ganzen gutgemeinten Kritik will ich doch eben noch Stellung beziehen, weil ich in die Sache schon ein wenig Gehirnschmalz gesteckt habe ...

Die Bilder die ich in die Titel eingesetzt habe stehen in Zusammenhang, das Erste ist das Logo mit der Bezeichnung als Text, das 2. Ist fürr die Jeweilige Überschrieft das Titelbild ...

Ich zeichne mit DIV's und nicht mit Tabellen aus weil der Webstandart so wie ich das verstanden habe Tabellen nicht fürs Layout vorsieht ... sondern nur für Echte Tabellendaten ... Andreas Kalt hat da einen Schönen Artikel zu geschrieben http://www.andreas-kalt.de/webdesign/tutorials/float-theorie

Die Verwendung von Divs hat einen 2. Vorteil ... Der HTML Code wird kleiner und gleichzeitig wird Inhalt vom Layout getrennt.

Der Grund warum ich von den floats abgekommen bin und versuche absolut zu positionieren ist: Ich will das der Hauptinhalt vor dem Nebeninhalt steht ... wegen der logischen Reihenfolge ...

http://aktuell.de.selfhtml.org/artikel/design/reihenfolge/index.htm

Ich will dir für deine Kritik danken ... vll habe ich beim lesen meiner Quellen etwas falsch verstanden ... ?

Grüße Markus

[Detlef G.]

Hallo Markus

ich kriege den verdammten Rand um den Titelcontainer nicht weg ... :(

Ein Problem besteht darin, dass wohl der default-margin der P-Elemente nicht
immer und in jedem Browser genau 1em ist.
Du versuchst es mit margin: -1em 20% -1em 20%; auszugleichen.
Das funktioniert natürlich nicht zuverlässig in allen Browsern.
(Wenn ich im Firefox die Schrift vergrößere erhalte ich auch manchmal einen
weißen Streifen, dort sind das wohl Rundungsfeheler.)
Besser ist es den margin der P-Elemente im Elternelement (#maincontent) zu
halten. Das kannst du erreichen, indem du #maincontent einen border gibst.
Dann den margin des #footer auf 0 setzen, und die negetiven margins sind nicht mehr nötig.

Der IE setzt bei deinem Layout die h2 neben #navigation anstatt nur den
Inhalt floaten zu lassen.
Um dieses Problem zu beseitigen, fällt mir nur ein zusätzliches Element
ein, welches #navigation und h2 enthält und die Hintergrundfarbe von
h2 hat.

Wenn du die Schriftgrößen in em angibst, dann solltest du für body 100.01%
angeben, damit der IE beim skalieren nicht überteibt.

Farbige Boxen nahtlos anneinander setzen ist immer gefährlich, besonders bei
flexiblen Angaben. Durch Rundungsfehler können immer Überlappungen oder
Zwischenräume entstehen.

Auf Wiederlesen
Detlef

[Markus]

Danke für deine Antwort, dem hab ich nix entgegenzusetzen :)

mfg Markus *tired*

[Cyx23]

Hallo Markus,

ich kriege den verdammten Rand um den Titelcontainer nicht weg ... :(

das läßt sich für den IE (mit 6 getestet) anpassen, dazu noch etwas für Opera mit
einer Browserweichen und -filter per CSS:

#subcontentright p,  #subcontentleft p {margin:.6em;}
* html h2{position:relative;left:-3px;margin-right:-3px}
* html #maincontent{margin-top:-1.3em;margin-bottom:-1.3em}
* html #footer{line-height:1.3em}
html:first-child>b\ody #subcontentright,
html:first-child>b\ody #subcontentleft {margin-top:-1px}
html:first-child>b\ody #maincontent{margin-top:-1.1em;margin-bottom:-1.1em}

Grüsse

Cyx23