[CSS] Achtergrond van container in IE

[spok9]

Hallo allen!

Tijd geleden dat ik hier wat gepost heb, maar heb nu iets vaags waar ik dus mooi niet uit kom Ik ben bezig met de website www.designed-by-kim.nl welke in principe zover af is. De site doet het prima en wordt goed weergegeven in verschillende browsers. Het gaat echter fout bij IE 7 en 8, maar niet altijd

Het probleem is als volgt. Ik heb een div als container, met daarin weer 2 divjes die met een float statement respectievelijk links en en rechts zijn uitgelijnd. De container zorgt voor een achtergrond bij deze divjes, een semi transparante png. Probleem is dus nu dat IE op sommige PC's (een gemene deler heb ik nog niet kunnen vinden...) de achtergrond van de container niet weergeeft Ik heb geen flauw idee waar het precies aan ligt

Wie heeft idee voor een oplossingsrichting? Waar gaat het fout?

HTML:

    <div id="content"> 
        <div id="left">
            Blaaat          
        </div>
        <div id="right">                    
            <p>
                    Blaaat
            </p>
        </div>      
        <div class="clear"></div>   
    </div>

Cascading Stylesheet:

#content {
    position: relative;
        color: #913494;
    background-image: url(images/bg_w.png); 
}

#right { 
    padding-top: 60px;
        padding-bottom: 38px;
    float: right;
    width: 789px;
    line-height: 150%;
}

#left { 
    min-height:509px;
    float: left;        
    width: 183px;
    line-height: 200%;
    font-size: 14px;
}

.clear {
    clear: both;
}

[SandaX]

Hij lijkt het hier prima te doen, ik zie in ieder geval geen verschil tussen FF IE7 en IE8.

Kan het niet liggen aan dat de pc's waarop hij niet goed wordt weergegeven misschien nog een oude versie van je css in de cache hebben zitten? Dit is simpel te testen door op de pc waar hij niet goed wordt weergegeven een harde refresh te doen (ctrl+F5).

[MueR]

Ik zie hier ook geen verschil?

offtopic:
Even nitpicken, maar je lijdt aan diveritis.

[edwinistrator]

Hier werkt het ook in IE8. De background-image is meer dan 500kb, kan me voorstellen dat een langzame verbinding nog even duurt voor dat plaatje geladen is? Misschien is dat het?

[BtM909]

edwinistrator schreef op vrijdag 31 juli 2009 @ 13:36:
Hier werkt het ook in IE8. De background-image is meer dan 500kb, kan me voorstellen dat een langzame verbinding nog even duurt voor dat plaatje geladen is? Misschien is dat het?

Die overigens makkelijk naar 113k kan worden gecompressed (of zelfs nog kleiner, afhankelijk van 't uiteindelijke gebruik)

[Da Weef]

Hier ook geen problemen, FF, IE7 en IE8 hetzelfde

Overigens komt de code die je geeft niet overeen met wat je op de site heb staan. De transparante png heb je niet als achtergrond van een container, maar juist bij de linker en rechter div...

[spok9]

Bedankt voor jullie reacties tot nog toe

Dat achtergrond plaatje is inderdaad wat groot, was er even bij ingeschoten om daar nog wat te doen. Het gaat overigens niet over dat plaatje, maar het semitransparante witte vlak dat daar overheen ligt (png van 1x1 pixel), die laadt ook gewoon bij jullie?

@Da Weef: Klopt, bij de index pagina wel (paars). Ik doel echter op de pagina's daarachter met een witte achtergrond, maar dat had ik niet gezegd

@MueR: Tja, ik ben slechts een amateur die heeeeeel af en toe iets voor vrienden maakt als ze lang genoeg zeuren

[Spinal]

Ook hier geen verschil tussen Opera 10 en IE8/IE8-als-IE7-mode.

[Da Weef]

Lol, waarom verwijs je dan naar de main page, waarin deze achtergrond niet wordt gebruikt...

Deze pagina was een betere keuze geweest...

Op deze pagina kan ik de fout wel reproduceren. Als ik IE8 in compatibiliteitsmodus zet valt het vlak inderdaad weg...

Dit heeft ermee te maken dat de content container niet meerekt met zijn inhoud. Ik zie ook dat je daar "position: relative" hard codeert terwijl je dat verder bijna nergens anders doet. Dus als je die line verwijdert is het misschien al opgelost. Anders kun je proberen de content div hoogte 100% mee te geven...

[SandaX]

Ik zie nu pas dat het alleen op de sub-pagina's het geval is. Misschien iets duidelijker vermelden in je TS en linken naar een andere pagina, het lijkt namelijk of je die twee vlakken op je index bedoeld.

Hier worden de witte vlakken op de subpagina's inderdaad niet weergegeven in de IE8 -> 7 compatibility view. Probeer die transparante png eens te vervangen door een grotere, niet transparante, image dan kan je in ieder geval uitsluiten dat hij helemaal niet getoond wordt. Ik krijg namelijk een beetje het idee dat IE7 hem voornamelijk niet uitrekt.

Probeer anders ook eens een border rond je #content te gooien om te zien of deze wel mee rekt met je content in IE7.
wat Da Weef zegt dus

[ Voor 5% gewijzigd door SandaX op 31-07-2009 15:02 ]

[spok9]

Hmm... het weghalen van "position: relative" is inderdaad de oplossing. Kan iemand me ook uitleggen waarom Dank voor de hulp in ieder geval

Was overigens inderdaad handiger geweest om naar de goede pagina te linken, maar het was me even ontschoten dat nu net de openingspagina het probleem niet heeft

[Da Weef]

hasLayout issue