[CSS] Background-image wordt niet gerenderd in IE/FF

[r0bert]

> ga naar huidige/laatste vraag


Ik ben al een tijdje aan het klooien geweest om 2 divjes goed naast elkaar te krijgen en de container mee te laten sizen. Dat heb ik eindelijk voor elkaar (volgens mij), maar nu krijg ik het probleem dat ie de background-image met repeat-y niet wil renderen

Hij renderd de background-color wel helemaal, maar de image maar zover als de rechter div rijkt.

*snip* van mijn code:

HTML:

<div id="elBody">
    <div class="stlBodyRow">
        <div style="">
            <h1><span>//</span>item 1</h1>
                <p>testen of ie<br />dsf<br /><br /><br />of ie het goed doet het goed doet<br />bdf<br />sdfd</p>
        </div>
        <div style="margin-left:1px;">
            <h1><span>//</span>wat dan ook</h1>
                <p>ds<br />sd</p>
        </div><div style="float:none;clear:left;">&nbsp;</div>
    </div>
    <div class="stlBodyRow">
        <div style="">
            <h1><span>//</span>geblaat</h1>
                <p></b>testen of iegoed doet<br />bdf<br />sdfd</p>
        </div>
        <div style="margin-left:1px;">
            <h1><span>//</span>opvulling</h1>
                <p></p>dsf<br /><br /><br />of ie het goed dds<br />sd</p>
        </div><div style="float:none;clear:left;">&nbsp;</div>
    </div>
</div>

stukje van mijn CSS

Cascading Stylesheet:

h1 span
{   font-size       :   7pt;
    padding-right   :   1px;
}

/* ............. */

div#elBody
{   float           :   right;

    width           :   479px;
    _width          :   479px;
}
    div#elBody div
    {   float           :   none;
        clear           :   left;
        background-color    :   red;
        background-image    :   url('./bordervert.gif');
/*     background-image    :   url('http://www.robertdewilde.nl/OnlineMeppel/tmp/bordervert.gif');  */
        background-repeat   :   repeat-y;
    }
        div#elBody div div
        {   clear           :   none;
            float           :   left;
            
            width           :   239px;
            _width          :   239px;
        }
            div#elBody div div h1
            {   margin-left     :   0px;
                color           :   rgb(255,150,0);        
            }
            siv#elBody div div p
            {   margin:0;padding:0;
                margin         :   10px 10px 10px 10px;
                font-size       :   9pt;
            }

iemand enig idee hoe ik dit moet fixxen?

[ Voor 75% gewijzigd door r0bert op 11-05-2005 19:46 ]

[André]

Dat komt vermoedelijk doordat de div daar ophoudt qua content en daarom stopt dat lijntje ook. Als ik een height toevoeg aan de div#elBody div div dan werkt het wel. Trouwens als ik een border aan die class geef dan verschijnen er overal en nergens borders, volgens mij zit het allemaal een beetje raar in elkaar

[r0bert]

Die borders kloppen volgens mij wel hoor (als je in FF kijkt iig. in IE moet je nat. eerst weer de width aanpassen).

Maargoed, die background stopt inderdaad bij de content, maar die zou door moeten lopen tot onderen. Want je ziet aan de background-color wel dat ie eigenlijk doorloopt tot onder aan. Daarom snap ik niet waarom de background-color wel wordt gerenderd tot daar, maar de background-image niet.

* r0bert staat op het punt om tables te gaan pakken

[r0bert]

Nouja, laten bovenstaande dan maar zitten, heb het min of meer opgelost, het werkt in iedere geval. Maar nu het volgende, ik weet niet of het mogelijk is...

ik heb mijn divjes in de volgende structuur staan:

HTML:

<div class="row"><!-- position: relative? //-->
    <div class="cell">
        <h1>Titel van item</h1>
        <p>content van item</p>
        <div class="reactiebottom">reactie</div> <!-- position: absolute; bottom: 0;? //-->
    </div>
    <div class="cell">
        <h1>Titel rechts</h1>
        <p>content van item</p>
        <div class="reactiebottom">reactie</div>
    </div>
</div>

nu wil ik graag dat de reactie op de bottom komt van het item. Maar dat werkt maar bij 1 van beiden (links of rechts) en niet bij beiden, want dat heeft er weer mee te maken dat ie maar tot de onderkant van de content telt.


zoals het er nu uit ziet:
http://www.robertdewilde.nl/OnlineMeppel/tmp/index2.html
zoals het eruit moet komen te zien

[ Voor 37% gewijzigd door r0bert op 11-05-2005 19:45 ]

[Pixeldude]

Mag ik vragen hoe je die schaduw van plan was te maken?

[Zoefff]

Volgens mij kan dat door de reactie absoluut te positioneren binnen de class rechts, en vervolgens bottom: 0; mee te geven.

Zoals beschreven in http://www.alistapart.com/articles/footers

[r0bert]

@Skyline GTR: background met repeat-y @ container en body met repeat global.

@Zoefff: zal 's even kijken, hoop echt dat het werkt
edit: Hmm die link was niet echt wat ik zocht volgens mij. Dat ging over parents en childs, hier zit dus nog een element tussen. En wat je bedoelt met class rechts weet ik ook nog niet helemaal..

[ Voor 44% gewijzigd door r0bert op 11-05-2005 21:25 ]