✔ div-Boxen Problem mit IE6

[kollmann84]

div-Boxen Darstellungsproblem im IE6

Hallo liebe Forumgemeinde,

ich habe da mal wieder ein Problem bei einer Website von einer Bekannten. Die Webadresse lautet: http://www.die-wunschfigur-langen.de

Mein Problem ist die Darstellung der div-Boxen in der rechten Spalte und zwar werden im IE 6, die deklarierten Background und Borderfarben nicht angenommen. Das komische ist wenn man die Seite bewegt oder mit der Maus darüber fährt, werden die Boxen richtig dargestellt.

Ich weiss absolut nicht woran es liegt, da ich den div-Boxen nun wirklich nicht unübliche Eigenschaften zugeordnet habe.

Wäre schön wenn ihr mir helfen könntet. Vielen Dank!

Hier habe ich nochmal den betreffenden Teil aus dem Stylesheet:

#r_col {
 border-left: 1px dashed #872943;
 border-top: 1px dashed #872943;
 padding: 0 10px;
 overflow: hidden;
}
* html #r_col {
 margin: 0 0 0 585px;
}
#foto {
 border: 1px dashed #fbf3e0;
 position: absolute;
 top: 20px;
 right: 58px;
}
#karte {
 margin: 10px 0;
 padding: 0;
 overflow: hidden;
}
.box {
 background-color: #eccc93;
 border: 1px solid #872943;
 margin: 10px 0;
 padding: 0 10px 10px 10px;
 overflow: hidden;
}
.clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}
.clearfix {
 display: inline-block;
}

 

[Maik]

Hi,

nimm mal folgende Regelerweiterung im Stylesheet auf:

* html .box {
height:1%;
}

Zudem fehlt hier noch was:

.clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}
.clearfix {
 display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

 

[kollmann84]

du bist genail Maik Das Problem ist damit beseitigt

Aber jetzt wäre es schön wenn du mir erklären kannst wieso, damit ich den Fehler nicht nochmal mache und hier wieder fragen muss Danke dir

Oh mir fällt gerade auch noch auf, dass die Karte auf der Seite im IE6 nach ganz unten verschoben wird. Woran liegt das?

 

[Maik]

Es handelt sich hierbei um den Peekaboo-Bug, dem mit einer geringen Mindesthöhe für die betroffene Box begegnet wird.

Dass die Karte nach unten verschoben wird, hängt mit der Breitenangabe width="242px" für das Grafikelement zusammen, die bei mir im IE6 um drei Pixel verringert werden muss, damit die Karte an der gewünschten Stelle ausgerichtet wird.

Im übrigen wird in den HTML-Attributen width,height keine Einheit (z.B. px) angegeben.

 

[kollmann84]

super danke...

man lernt ja nie aus

 

[Maik]

Man kann diese diskrepante Breitenangabe wunderbar über CSS regeln:

#karte a img {
display:block;
width:242px;
height:242px;
border: 1px solid #872943;
}
* html #karte a img {
width:239px;
}

und im Grafikelement werden die HTML-Attribute width,height und style entfernt.

Denn mit 239px erscheint die Karte beispielsweise im Firefox 3px zu schmal gegenüber den darüberliegenden Boxen.

 

[kollmann84]

Das habe ich mir auch gedacht

Deshalb habe ich das auch so geregelt, aber ich werde wohl deine ergänzenden Angaben mit aufnehmen

#karte img {
 width: 242px;
}
* html #karte img {
 width: 239px;
}