Hallo,

auf der Seite http://www.kolping-hohenfels.de/demo_gila/index.htm fließt im FF und Opera der graue Fußbereich in den roten Hauptbereich. Im IE ist die Darstellung richtig. Die Seite ist valide.

Nach dem schließenden </div> des Hauptbereichs habe ich <br class="all" /> eingefügt und dann folgt der Fußbereich mit
<div id="unten"> Auch die umgekehrte Reihenfolge also erst <br class="all" /> und dann </div> ändert am Erscheinungsbild nichts.

Gruß Dietmar

Hallo Dietmar,

wie kommst Du darauf?
<br class="all" />

Die Klasse all existiert nicht in Deiner CSS-Datei.


Schreibe deshalb <br clear="all">

Also an diese Stelle:
<!-- phpCMS FOOTER START -->
</div><br clear="all">

Dann sollte es klappen.
Gruß Sabine

Hallo Sabine,

grübel, dabei war ich überzeugt, dass ich es reingeschrieben habe. Denn das Thema http://www.hilfdirselbst.ch/...%3Cbr%20class#260112
hatten wir schon mal vor kurzem und etwas sollte ich doch dazugelernt haben.

Danke und Gruß Dietmar

Hallo Sabine,

die Seite http://www.kolping-hohenfels.de/demo_gila/index.htm
wird im FF / Opera richtig dargestellt, nicht aber im IE. Es scheint aber nicht an der Breite der beiden Spalten im Mittelbereich (gamma-Bereich) zu liegen, da selbst eine Reduzierung von 223px auf 123px zu keiner Veränderung führt.
<br class="clearall" /> mit .clearall {clear:both;} ist eingefügt.

Entferne ich die linke Randspalte (alpha-Bereich), fügen sich die Spalten bündig am linken Seitenrand oben ein.

Ich habe aber nur die SideBarBoxes innerhalb des jeweiligen Box-Bereiches verändert, nicht die Struktur der Seite.

Beim Testen ist die Seite valide. Was stimmt hier nicht?

Gruß Dietmar

Hallo Dietmar,

>> Was stimmt hier nicht?

Das kann ich Dir auch nicht sagen, weil ich momentan keinen IE zur Hand habe.
Vielleicht kann da mal jemand mit dem IE nachsehen.

Ein allgemeiner Rat:
Versuche den CSS-Code-Anteil zu reduzieren.
Das sind schon wieder über 700 Zeilen Code.
Wer soll da noch durchblicken.

http://www.kolping-hohenfels.de/demo_gila/testdemo.css

Hallo Dietmar

In der CSS-Datei
Deine beiden Boxen ultest1 und ultest2 sind 225px breit. Zusätzlich werden sie von einem 10px breiten "Spalt" getrennt.
Dein gamma ist 460px breit und hat ein margin-left und -right von 10px.

Im Browser
Im FF ist das gamma inkl. der beiden margins 477px, im IE 476px und im Opera 478px breit.
Ich denke, dieser eine Pixel ist gerade einer zu wenig! Aber trotzdem fehlen Dir hier plötzlich ein paar Pixel. Irgend was ist breiter als definiert und zerdrückt Dir das Layout.

Bei über 700 Zeilen Code wird es elend schwierig den Fehler zu suchen.
Wenn Du so komplexe CSS-Dateien planst, oder generierst, dann ist es umso wichtiger, dass auch die Qualitätskontrolle stimmt. Du solltest bei jeder neuen CSS-Anweisung kontrollieren, ob die Browser auch das machen, was Du ihnen sagst. Und zwar auf den Pixel genau, und nicht nur ungefähr. Sonst läufst Du irgendwann in Gefahr, das Dir am falschen Ort ein Pixel fehlt, der Dir das Layout zerschiesst und Du weisst nicht mehr welche Deiner Anweisungen ein Pixel zu breit interpretiert wurde ...

Gruss
Martin

Hallo Sabine, hallo Martin

danke für den Tip. Ich habe erst wieder mal die lauffähige Vortagsversion der CSS-Datei aktiviert und es klappt. Werde jetzt sorgfältiger den Rest integrieren, insbesondere noch intensiver den IE befragen.

Eigentlich hatte alles - auch im IE - funktioniert, bis ich auf die Idee kam, den Rahmen um die beiden Spalten zu entfernen und dafür (Rahmenstärke 1px) die Breite der Innenspalten (=ultest1 +2) von 223 auf 224 zu erhöhen.
Das ist doch rechnerisch richtig: Rahmen + Innenspalte + Rahmen = Breite --> 2 x 224 + 10 = 458 (also 2px weniger als 460). Mit 2 x 225 (Innenspaltenbreite 223 + 2x Rahmenbreite 1px) + 10 = 460 klappt es jetzt wieder. Gammabereich + margin beträgt 480px.

Der Außenabstand 10px vom Gammabereich bezieht sich doch auf den Abstand zu den beiden Außenspalten und beeinflußt doch die Breite des Gammabereiches nicht.

Denn die Außenabstände haben eine Spaltenbreite von 150px, sodass sich die Gesamtbreite errechnet:
2x150 (Außenspalte) + 2x 10 (margin) + 460 = 780px (Angabe Containerbreite).

Ist das richtig für alle Browser (FF, Opera und IE)? Funktionieren täte es, allerdings wieder mit den noch zu entfernenden Rahmen,
(siehe http://www.kolping-hohenfels.de/demo_gila/index.htm)

LG Dietmar

Hallo Dietmar,

verzichte auf pixelgenaue Layouts.
Du brauchst immer etwas Spielraum für diverse Fehldarstellungen.

Gruß Sabine

Hallo Sabine,

das ist an sich lösbar; nur verrate mir bitte, wie groß soll der Spielraum sein? Gibt es hier Empfehlungen oder Erfahrungswerte. Wäre der Spielraum nur beim Container ratsam oder/und zusätzlich auch bei jedem untergeordneten div-Container. Denn dann summiert es sich doch.

LG Dietmar

Hallo Dietmar,

>> nur verrate mir bitte, wie groß soll der Spielraum sein?

Das mußt Du selbst ermitteln.
Am besten jede Änderung in allen Browsern sofort testen,
damit Du den erforderlichen Spielraum sehen kannst.

Gruß Sabine

Hallo Sabine,

das mit dem Testen geht klar. Danach würde der jetzige Zustand passen. Denn die Ansicht ist in allen drei Browsern ok.

Nur weiter oben hast du erklärt:

Zitat

verzichte auf pixelgenaue Layouts. Du brauchst immer etwas Spielraum für diverse Fehldarstellungen.

Das bedeutet doch, dass ich sowohl die Breite des Containers größer machen soll als die Summe der Breiten von den Containern alpha, beta und gamma plus Abstandsspalten als auch die Spalten (ultest) und die dazugehörige Abstandspalte kleiner als die Breite von gamma.

Gibt es einen Mindestspielraum?

LG Dietmar

ich hab mir das ganze nicht im Detail angesehen, aber hier mal ein Tipp:

a) <img> tags jeweils alle auf einer einzigen Zeile belassen im Quellcode (keine Zeilenumbrüche)

b) im CSS:
img {border:0; margin:0;padding:0;}

Unter gewissen Umständen knallt der IE einfach noch einen Leerschlag rein bei Bildern; vielleicht ist das hier der Fall...

Hallo

<AnDieNaseFass>ganesh und Sabine haben natürlich recht<AnDieNaseFass>
Hatte den Wald vor Bäumen nicht gesehen.
Das img-tag kannst Du noch mehr aufpeppen: und zwar so
<img title="Hier kannst Du was reinschreiben, das erscheint dann, wenn Du mit der Maus darüber fährst" src="bild.jpg" alt="Das ist der altbekannte alternative Text, Suchmaschinen lieben den, wird angezeigt, wenn das Bild (noch) nicht geladen wird" longdesc="Hier kannst Du noch viel mehr schreiben, ganze (Ab-)Sätze, oder gar ganze Webseiten hinterlegen" width="100" height="100">

Gruss
Martin

Kleine Korrektur:

Das longdesc Attribut ist dafür vorgesehen, eine URL zu plazieren, wo man eine Bildlegende hinterlegen kann. Also NICHT den eigentlichen Bild-Kommentar, sondern einen Link, wo man den ausführlichen Bild-Kommentar einsehen kann.

http://www.w3.org/...ml#adef-longdesc-IMG
"This attribute specifies a link to a long description of the image. This description should supplement the short description provided using the alt attribute."

Die wenigsten Browser unterstützen allerdings longdesc, so dass man sich das genausogut sparen kann.

Hallo Ganesh und Martin,

danke für eure Tips. Ich habe etwas getestet und bin zu dem Ergebnis gekommen, dass ein Rahmen bei den Spalten das Auseinanderdriften der Spalten verhindert. Daher färbe ich den Rahmen ein und es paßt.

Mein Problem ist der Übergang von einem Eintrag (litest) zum anderen : Wenn bei Zitat ein Bild erscheint und der dazugehörige Zitat-Text ist kürzer als die Bildhöhe, schlüpft der nachfolgende Text in die Resttextfläche, also rechtsbündig statt wie gewünscht linksbündig untereinander. Durch wiederholtes Drücken von F5 zeigt sich das Problem schnell.
Url: http://www.kolping-hohenfels.de/demo_gila/index.htm

Da beim Zitat-Bild-CSS die Anweisung float:left steht, müßte ich es mit clear:both aufheben. Wie löst man dies mit CSS, ohne einen Absatz oder Abstand zu erzeugen?

Gruß, Dietmar