✔ [IE7] background-image wird nicht angezeigt - sehr komsich!

[nepda]

Hallo,
ich habe eine DIV/CSS-Box gebastelt, mit Firefox, Opera, Chrome und Safari (mehr hab ich z.Z. nicht zur Verfügung) funktioniert es und sieht auch zufriedenstellend ähnlich aus. Jetzt kommt der IE7 (IE6 hab ich grad nicht installiert) und macht mir mal wieder nen Strich durch die Rechnung.
Wenn ich die Seite lade wird der rechte Rand (mit Hintergrundbild) einfach ohne Bild dargestellt, wenn ich jetzt ein einmal den Tab oder das Fenster wechsel ist das Bild da manchmal erscheint das Bild auch, wenn ich den Text in der Box markiere.

entweder auf meiner Seite oder hier, der Quelltext:

.box-border {
    width:50%;
    margin:20px;
    /* Optional - Start */
    /* Optional - END */
}

.box-border-top-middle {
    margin-top:-20px;
    height:20px;
    background-image: url("box/box-border-top-middle.png");
    background-repeat: repeat-x;
    background-position-x: center;
    background-position-y: bottom;
}

.box-border-top-left {
    margin-top:-20px;
    margin-left:-20px;
    background-image: url("box/box-border-top-left.png");
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
    height:20px;
    width:20px;
}

#x {
    border:1px dotted #eee;
}

.box-border-top-right {
    margin-top:-20px;
    margin-left:100%;
    background: url("box/box-border-top-right.png") no-repeat bottom left;
    height:20px;
    width:20px;
    right:0;
}

.box-border-right {
    margin-left:-20px;
    background: url("box/box-border-right.png") repeat-y right;
    margin-right:-20px;
}

.box-border-left {
    background: url("box/box-border-left.png") repeat-y bottom left;
    margin-right:20px;
}

.box-content {
    margin-left:20px;
    background: url("box/box-background.png") repeat;
}

/*
.box-content > h1,.box-content > h2,.box-content > h3,.box-content > h4,.box-content > h5, .box-content > h6 {
    margin-top:0;
}
*/
.box-content > * {
    margin-top:0;
}

.box-border-bottom-right {
    margin-bottom:-20px;
    margin-left:100%;
    background: url("box/box-border-bottom-right.png") no-repeat top left;
    height:20px;
    width:20px;
}

.box-border-bottom-left {
    margin-bottom:-20px;
    margin-left:-20px;
    background: url("box/box-border-bottom-left.png") no-repeat top right;
    height:20px;
    width:20px;
}

.box-border-bottom-middle {
    margin-bottom:-20px;
    height:20px;
    background: url("box/box-border-bottom-middle.png") repeat-x top center;
}

das dazugehörige HTML

<div class="box-border">
    <div class="box-border-top-left"></div>
    <div class="box-border-top-middle"></div>
    <div class="box-border-top-right"></div>
    <div class="box-border-right">
        <div class="box-border-left">
            <div class="box-content">
                <h2>Lorem Ipsum Dolor Sit Amet</h2>
                „Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.“ 
            </div>
        </div>
    </div>
    <div class="box-border-bottom-right"></div>
    <div class="box-border-bottom-left"></div>
    <div class="box-border-bottom-middle"></div>
</div>

woran könnte das liegen, wie kann ich den Bug, falls es denn einer ist, umgehen? bzw. liegt es vielleicht nur an meinem Browser?

Danke!

P.S.: wie kann ich CSS richtig heighlighten?

 

[Maik]

Hi,

möglicherweise hilft hier die Angabe einer geringen Mindesthöhe - Stichwort: hasLayout.

.box-border {
    width:50%;
    margin:20px;
    /* Optional - Start */
    /* Optional - END */
    height:1%;
}

mfg Maik

P.S. [ css ] ... [ /css ]

 

[nepda]

Verdammt, ich werde den Internet Explorer irgendwie nie verstehen.
Danke für deine Antwort, mit ein paar Umstellungen der margin's funktioniert 's jetzt.

P.S. warum einfach, wenns auch kompliziert geht^^