✔ Darstellung in Firefox

Status
Nicht offen für weitere Antworten.
O

oldbobby

Grünschnabel
Hallo,

als Anfänger in Sachen CSS haben wir es gewagt, unsere Schulhomepage
http://gesamtschule-schinkel.de/haupt.htm (http://gesamtschule-schinkel.de/style.css)
auf Style-Sheets umzustellen.

Ein Problem haben wir nicht in den Griff bekommen. Im Firefox Bowser wird die hellblaue Titelzeile zunächst nicht in korrekter Höhe angezeigt sondern über die gesamte Bildschirmhöhe. Erst ein Neuladen der Seite mit F5 zeigt sie korrekt an. Beim IE und in Opera gibt es dieses Problem nicht.

Taucht das Problem nicht sofort auf, so klick mal bitte einige Seiten durch, irgendwann wird die hellblaue, obere Querleiste mit der Überschrift (z.B. Aktuelles oder Ehemaligenseite) bei Firefox nicht fingerbreit, sondern über die ganze Monitorhöhe verlaufen.

Woran kann das liegen?

Nette Grüße
Oldbobby
 
Hi,

ich denke, das Problem hat seine Ursache im overflow: auto in div#alles. Beinhaltet das Element
zuviel Inhalt, wird die Bildlaufleiste innerhalb des Inhaltscontainers angezeigt. Nach einem Reload
wird die Scrollbar wieder am rechten Fensterrand eingeblendet.

Die overflow-Eigenschaft sollte aus diesem Grund aus div#alles genommen werden. Das hat
jedoch zur Folge, dass in einigen Browsern das Element #alles nicht mehr auf die notwendige
gewüschte Höhe gezogen wird, weil der normale Textfluss durch die float-Eigenschaften nicht
mehr existiert. Es wird ein Hilfelement (.clearDiv) eingeführt, das zum einen den Textfluss wieder
herstellt (clear: both), zum anderen so formatiert wird, dass es keinen Einfluss auf das Design
hat.

Geänderter/Ergänzter CSS-Teil:
Code: 
div#alles{ border-top: 0px;
           background-color: #0090E0;
           width: 760px;}

.clearDiv{ font-size: 1px;
           line-height: 0;
           height: 0;
           clear: both;}
Eingefügt wird das Hilfselement am Ende des Elements mit der ID alles.
HTML: 
<div id="alles">
  <div id="titel">Titel</div>
  <div id="mleiste">...</div>
  <div id="inhalt">...</div>
  <div class="clearDiv">&nbsp;</div>
</div>
Ich hoffe, das hilft dir/euch weiter.

Ciao
Quaese
 
Hallo,

Quaese hat gesagt.:
ich denke, das Problem hat seine Ursache im overflow: auto in div#alles. das
wird die Scrollbar wieder am rechten Fensterrand eingeblendet.
Zum Vergrößern anklicken....
Das scheint richtig zu sein.
Ich habe das mal nach deine Vorschlägen verändert.
siehe:
http://gesamtschule-schinkel.de/archiv/archiv2.htm (http://gesamtschule-schinkel.de/style2.css)

Das hat allerdings zur Folge, dass die hellblaue Menüleiste links nicht mehr bis zum Ende von div#inhalt reicht. :-(
 
Hi,

du hast das Element mit der Klasse .clearDiv an die falsche Stelle gesetzt. Es muss nach dem
Inhaltselement eingefügt werden.
HTML: 
<div id="alles">
  <div id="titel">Titel</div>
  <div id="mleiste">...</div>
  <div id="inhalt">
    <table cellpadding="12" width="100%" border="0">
      <!-- Tabelleninhalt -->
    </table>
  </div>
  <div class="clearDiv">&nbsp;</div> 
</div>
Ciao
Quaese
 
Moin,

Quaese hat gesagt.:
du hast das Element mit der Klasse .clearDiv an die falsche Stelle gesetzt. Es muss nach dem Inhaltselement eingefügt werden.
Zum Vergrößern anklicken....

Danke, das ist es wohl gewesen.
Jetzt gibts es nur noch unten einen unschönen, etwas breiten hellblauen Rand. Gibt es dafür auch noch eine Lösung?
 
Hi,

ergänze die Klasse .clearDiv wie nachstehend um eine padding-Angabe:
Code: 
.clearDiv{ font-size: 1px;
           line-height: 0;
           height: 0;
           clear: both;
           padding: 0;}
Diese Korrektur wird notwendig, weil du für alle DIVs den oberen Außenabstand (padding-top)
auf 10 Pixel voreingestellt hast.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück