IE kappt sidebar

[Herr Chow]

Folgendes Problem:
Die Seite für mein neues Podcast-Projekt Federlese sieht unter Safari und Firefox blendend aus, nur der IE bricht die mittlere sidebar direkt unter dem Suchfeld ab.

Die CSS-Definition für die Sidebar lautet wie folgt:

#sidebar-2
{
background-image: url("http://www.federlese.com/images/layout/sidebar2_bg.jpg");
background-repeat: no-repeat;
background-color: #DBD8BF;
float: left;
width: 201px;
margin: 0px;
margin-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
border-left: 1px dotted #FFF;
border-right: 1px dotted #FFF;
position: absolute;
bottom: 0px;
top: 0px;
left: 172px;
}

Was kann ich tun?

Im Voraus vielen Dank!

 

[cym]

Bin nicht Profi in CSS, aber versuche mal height: 100%;

 

[milchschnitte]

IE auf dem mac? scheiss drauf.

 

[Herr Chow]

Bin nicht Profi in CSS, aber versuche mal height: 100%;

Danke für den Tip! Hat aber leider nicht geholfen; der Effekt ist derselbe.

 

[Herr Chow]

IE auf dem mac? scheiss drauf.

Ich befürchte nur, daß es mit dem IE 6 unter Windows genauso schlecht aussehen könnte, was zu vermeiden wäre. Leider konnte ich die Seite noch nicht unter Windows testen.

 

[pks85]

Tipp: www.browsershots.org

 

[yosemite]

Tipp: www.browsershots.org

geiles ding... muss leider über 24 stunden warten!

aber naja... trotzdem geil!

 

[cym]

Mit dem Doctype "Loose" von W3? k.A. obs das bringt, aber einen Versuch ists ja wert.

 

[macmeikel]

Mit dem Doctype "Loose" von W3? k.A. obs das bringt, aber einen Versuch ists ja wert.

Wird nicht viel bringen, da der IE kein XHTML rendern kann, sondern nur text/html ... ist ne Seuche mit dem Teil

 

[Herr Chow]

Wird nicht viel bringen, da der IE kein XHTML rendern kann, sondern nur text/html ...

Stimmt! Hat nicht geholfen.

ist ne Seuche mit dem Teil

Recht hast Du!

 

[Herr Chow]

Ich habe mein Problem vorläufig mit einem CSS Hack ‚gelöst‘. Und zwar habe ich nun folgende Definition für meine sidebar:

#sidebar-2
{
background-image: url("http://www.federlese.com/images/layout/sidebar2_bg.jpg");
background-repeat: no-repeat;
background-color: #DBD8BF;
float: left;
width: 201px;
height: 5000px;
margin: 0px;
margin-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
border-left: 1px dotted #FFF;
border-right: 1px dotted #FFF;
position: absolute;
bottom: 0px;
top: 0px;
left: 172px;
}

html>body #sidebar-2
{
background-image: url("http://www.federlese.com/images/layout/sidebar2_bg.jpg");
background-repeat: no-repeat;
background-color: #DBD8BF;
float: left;
width: 201px;
height: 100%;
margin: 0px;
margin-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
border-left: 1px dotted #FFF;
border-right: 1px dotted #FFF;
position: absolute;
bottom: 0px;
top: 0px;
left: 172px;
}

Die zweite Definition überschreibt die erste, kann aber wegen "html>body" vom Internet Explorer nicht gelesen werden (allerdings nur die Windows-Version). Die erste Version ist also für den IE Win, die zweite für alle anderen Browser.
So habe ich im IE zwar eine überlange Seite, dafür aber keinen Design-Bruch mehr. (Ich konnte das übrigens gerade unter Windows testen.)

Nichtsdestoweniger suche ich noch nach einer eleganteren Lösung. Ich bitte um Vorschläge!

 

[dms]

Auf PC sieht es im IE gut aus, jedenfalls soweit ich das beurteilen kann. Einziges Problem: Wird das Browserfenster zu schmal, wird der Content sehr weit unten angezeigt. Ich denke das Problem lässt sich lösen indem Du ein Div um das gesammte Konstrukt legst mit einer Mindestbreite.

 

[Herr Chow]

Auf PC sieht es im IE gut aus, jedenfalls soweit ich das beurteilen kann. Einziges Problem: Wird das Browserfenster zu schmal, wird der Content sehr weit unten angezeigt. Ich denke das Problem lässt sich lösen indem Du ein Div um das gesammte Konstrukt legst mit einer Mindestbreite.

Vielen Dank für den Hinweis! Ich habe das Problem behoben. Ich hatte zwar einen div-Container, aber der IE wollte mit "width: 100%" nicht so umgehen, wie ich es gerne gehabt hätte.