[IE] background-image DIV verdwijnt bij een dynamische IMG

Pagina: 1
Acties:

  • moozzuzz
  • Registratie: Januari 2005
  • Niet online
Hey,

Mijn excuses voor de vage title.

Ik zit met het probleem dat de achtergrondimage (die de ronde hoeken voorziet aan mijn tekstblokken) verdwijnt in IE6 XP, zodra in het tekstblok er een image in geload wordt (waarvan de breedte bekend is, doch niet de hoogte). De achtergrond-kleur blijft weergegeven. Soms zijn er gewoon render-fouten. Bij gewone tekst is er geen probleem. Ik denk dat het ligt aan een render-probleem bij IE6 doordat de image nog niet berekend is, maar kan er geen extra info over vinden noch een oplossing... Iemand die me wel in de juiste richting kan duwen?

Mijn pogingen hebben zich beperkt tot proberen aanpassen van margin/padding, doch dat heeft niets uitgehaald... Niet fantastisch veel dus, maar ik kon geen andere oplossing bedenken.

Structuur website:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="mainBox"> <!-- content met zijbalk, start met content (belangrijkste) -->
    <div id="content">
        content ;-)
    </div><!--end of content -->
    <div id="randinfo">
        <div class="block">
            <h2>Jouw dier hier?</h2>

            <p class="dynamichuisdier"><a href=""><img src="PHP-file" width="170" alt="Jouw huisdier online!"></a></p>
                
            <div class="bottom">&nbsp;</div>
        </div><!-- end of block -->

        <div class="block">
            volgend blok

Relevante CSS
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.dynamichuisdier {
text-align: center;
padding-left: 0px;
padding-right: 0px;
margin: 0px;
}

#mainBox #content {
    position: relative;
    padding-left: 195px;
    text-align: justify;
}

#mainBox #randinfo {
    position: absolute;
    left: 0;
    top: 0px;
    width: 175px;padding: 0px 0px 0px 0px;
}

#randinfo .block {
    position: relative;
    margin: 0px;
    margin-bottom: 20px;
    padding: 0px;
    padding-top: 12px;
    background: #DDD url(../images/block_top.gif) no-repeat top center;
}

#randinfo .block .bottom {
    position: relative;
    height: 28px;
    background: #DDD url(../images/block_bottom.gif) no-repeat bottom center;
}
Even de link spammen, mocht je het probleem aan mijn armzalige uitleg niet meteen kunnen begrijpen... Sirius

Verwijderd

Shoot me... maar zoiets doe ik altijd met tables. Veel beter controleerbaar en de hoeveelheid code komt ongeveer hetzelfde uit.
Tabel van 3x3 cellen en middelste cel is je content.

  • moozzuzz
  • Registratie: Januari 2005
  • Niet online
Door er een extra <p>-element bij te voegen lijk ik het probleem op te lossen. Met een simpele clear:both; lijkt het probleem opgelost!