CSS height will nicht so....

[Jay]

.... wie ich es will :-(

Versuche gerade eine neue Webseite zu bauen und die Unarten von Graphiken und Tabellen - also brav CSS einzusetzen. Leider scheitert das am IE 6:

Mein CSS sagt folgendes:

body    {
 background-color: #FFFFFF;
 margin-top:       0px;
 margin-left:      0px;
 padding-top:      0px;
 padding-left:     0px;
 }

div#decoline {
 background-color: #333333;
     margin:    0px;
   padding:    0px;
   width:     100%;
 height:    5px;
 max-height:   5px;
 position:   absolute;
 z-index:   1;
        }

mein html sagt:

<div id="decoline">
</div>

Eigentlich soll er mir damit einfach nur an den oberen Rand der Seite eine schöne dunkle Leiste kleben. Mein Opera 9.01 und mein Firefox 1.5 machen das auch beide sehr gehorsam. Beim Testen mit dem IE hört der Balken nicht nur rechts vor dem Ende der Seite auf (womit ich noch leben könnte), sondern macht die Leiste ca. 4-5 mal so dick.

Gibt es einen Trick, den IE zu bändigen? Wenn nicht, muss ich da oben doch wieder ein png hinhängen (doof, wollte ich doch sein lassen).

Wäre toll, wenn jemand Rat wüsste....

Der Jay

[Gunnar Bittersmann]

Hello out there!

height:    5px;
max-height:   5px;

Warum beide Angaben?

Eigentlich soll er mir damit einfach nur an den oberen Rand der Seite eine schöne dunkle Leiste kleben.

Warum dann 'div' und nicht 'hr'?

Aber warum für eine reine Gestaltung überhaupt ein HTML-Element? Warum nicht ein Hintergrundbild oder ganz einfach 'border-top' für 'body'?

[IE] macht die Leiste ca. 4-5 mal so dick.

Der IE interpretiert 'height' als 'min-height'. Und da zur Darstellung des Inhalts des 'div'-Elements mehr als 5 Pixel Höhe nötig sind, vergrößert der IE die Höhe.

See ya up the road,
Gunnar

[Auge]

Hallo

div#decoline {
background-color: #333333;
     margin:    0px;
   padding:    0px;
   width:     100%;
height:    5px;
max-height:   5px;
position:   absolute;
z-index:   1;
        }

mein html sagt:

<div id="decoline">
</div>

Beim Testen mit dem IE hört der Balken nicht nur rechts vor dem Ende der Seite auf (womit ich noch leben könnte), sondern macht die Leiste ca. 4-5 mal so dick.

Gibt es einen Trick, den IE zu bändigen?

Zusätzlich zum von Gunnar gesagten, oder vielmehr als Konkretisierung, sei angemerkt, dass der MSIE (wie auch die anderen Browser) den Zeilenumbruch als Schriftzeichen ansieht. Im Unterschied zu den von dir erwähnten anderen Browsern erweitert er die Höhe auf das zur Darstellung dieses Zeichens erforderliche Maß. Er interpretiert also height wie min-height.

Lässt du den Zeilenumbruch zwischen <div> und </div> weg, zeigt er den Balken an, wie gewünscht.

Andererseits stimme ich Gunnar zu, wenn er fragt, warum es, um einen Balken anzuzeigen, eines <div>s bedarf.

Tschö, Auge

[Jay]

Hallo Auge, hallo Gunnar,

vielen Dank für die Hilfestellung - leider klappt es immer noch nicht so ganz. Warum kein hr ist ganz einfach: ich habe drei Layer, nämlich quasi den body mit z-index 1, den Balken mit z-index 3, und dann einige Dinge, die ich wie Zettel zwischen 1 und 3 hängen möchte - eben so wie man Zettel unter eine Leiste schiebt, damit sie am Brett hängen bleiben. Wenn ich den balken einfach als hr im body mache, kann ich nix mehr "dazwischen klemmen" :-)

Zusätzlich zum von Gunnar gesagten, oder vielmehr als Konkretisierung, sei angemerkt, dass der MSIE (wie auch die anderen Browser) den Zeilenumbruch als Schriftzeichen ansieht. Im Unterschied zu den von dir erwähnten anderen Browsern erweitert er die Höhe auf das zur Darstellung dieses Zeichens erforderliche Maß. Er interpretiert also height wie min-height.

Lässt du den Zeilenumbruch zwischen <div> und </div> weg, zeigt er den Balken an, wie gewünscht.

Leider klappt das bei mir nicht. Ich habe Win2000 und den IE 6.0.2800.1106 hier. Mein Code sieht jetzt so aus:

body    {
 background-color: #FFFFFF;
 margin-top:       0px;
 margin-left:      0px;
 padding-top:      0px;
 padding-left:     0px;
 }

div#decoline {
 background-color: #333333;
     margin:    0px;
   padding:    0px;
   width:     100%;
 height:    5px;
 position:   absolute;
 z-index:   1;
        }

<div id="decoline"></div>

Leider scheint ihm der Zeilenumbruch egal zu sein, er macht das Ding trotzdem zu groß.

Ich hab den Test mal ins Netz gestellt, seht selbst:

http://home.ghostnet.de/werfer/temp/test.html

Seltsam, nicht? Auch dass er rechts diesen Platz lässt.... *seuftz* Hat einer von Euch eigentlich schon den RC von IE7? Klappt das da? Ich habe hier nur Linux und die eine 2000er Kiste, und IE7 läuft nur mit XP.

Gruss

Jay

[Gunnar Bittersmann]

Hello out there!

Leider scheint ihm der Zeilenumbruch egal zu sein, er macht das Ding trotzdem zu groß.

Setz mal eine Zeilenhöhe.

See ya up the road,
Gunnar

[Jay]

Hallo Gunnar,

Setz mal eine Zeilenhöhe.

vielen Dank für Deine Hilfe - leider weigert er sich nach wie vor :-( Die anderen browser nehmen natürlich den Befehl an :-))

Lasst gut sein - ich mache aus dem Ganzen einfach eine Graphik und setze es als Hintergrund ein. Sieht genau gleich aus und ist wesentlich einfacher - und funktioniert auch mit dem doofen IE6. Dann muss ich eben die Notizzettel bearbeiten...

Die Welt könnte so schön sein ohne diesen browser.... :-)

[Auge]

Hallo

Lasst gut sein - ich mache aus dem Ganzen einfach eine Graphik und setze es als Hintergrund ein.

Das war aber schon vor zwei Tagen einer der Vorschläge von Gunnar.

Tschö, Auge