[CSS] background-image wel in IE niet in firefox

[Jazzle]

Ik ben een beetje aan het stoeien met een wordpress template, maar nu loop ik tegen een probleem op dat ik alleen in firefox en google chrome heb, de achtergrond van een div wordt gewoon helemaal niet getoond. Het gaat om de volgende url: klik. De css staat hier. Zoals je ziet loopt onder IE de balk door zegmaar, maar onder firefox is hij niet te zien (wel de linker en rechterkant maar dat zijn aparte div's). Ik heb het al op meerdere manieren geprobeerd (in andere div's etc) maar op geen van de manieren wil hij hem laten zien. ik denk dus dat ik iets heel simpels over het hoofd zie, maar ik kan het niet vinden

[crisp]

je .alignleft en .alignright zijn floats, die moet je dus 'clearen'
Als alternatief kan je overflow:hidden of auto op #wrapper zetten

[Jazzle]

crisp schreef op maandag 08 december 2008 @ 21:45:
je .alignleft en .alignright zijn floats, die moet je dus 'clearen'
Als alternatief kan je overflow:hidden of auto op #wrapper zetten

Jij hebt het over de witte achtergrond onder de footer neem ik aan?
Vergeten duidelijk te vermelden, ik bedoel de menu balk bovenaan!

Dat de footer nog gecleart moet worden ben ik me van bewust, er kloppen meer dingen nog niet

[crisp]

Voor #header geldt hetzelfde; ook die bevat enkel floats

[Jazzle]

crisp schreef op maandag 08 december 2008 @ 22:15:
Voor #header geldt hetzelfde; ook die bevat enkel floats

Je hebt gelijk, ik zie het.
Maar nu zie ik alsnog iets anders over het hoofd, de rechter zijkant staat niet op dezelfde lijn nu (in alle browsers). Als je te lang bezig bent aan dezelfde code zie je na een tijdje echt niks meer

[crisp]

Jazzle schreef op maandag 08 december 2008 @ 22:38:
[...]

Je hebt gelijk, ik zie het.
Maar nu zie ik alsnog iets anders over het hoofd, de rechter zijkant staat niet op dezelfde lijn nu (in alle browsers). Als je te lang bezig bent aan dezelfde code zie je na een tijdje echt niks meer

Da's een bug in zo'n beetje alle browsers
Oplossing is door de markup te veranderen:

HTML:

<div id="header">
    <div id="topbar_left"></div>
    <div id="topbar_right"></div>
    <div class="topmenu">
        <ul>
            <li><a href="http://dev.jazzle.nl">Frontpage</a></li>
            <li class="page_item page-item-2"><a href="http://dev.jazzle.nl/?page_id=2" title="About">About</a></li>
        </ul>
    </div>
</div>

Dus: eerst de floats, dan de rest

[crisp]

Overigens heb je genoeg 'hooks' om het ook zonder die twee loze divs te doen:

HTML:

<style type="text/css">
#header {
    margin-top: 30px;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    background: url(images/topbar_left.gif) no-repeat top left;
}
.topmenu {
    margin-left: 20px;
    background: url(images/topbar_right.gif) no-repeat top right;
}
.topmenu ul {
    height: 30px;
    list-style: none;
    margin-right: 20px;
    background: url(images/topbar_bg.gif) repeat-x;
}
.topmenu ul li {
    float: left;
    margin-right: 10px;
}
</style>
<div id="header">
    <div class="topmenu">
        <ul>
            <li><a href="http://dev.jazzle.nl">Frontpage</a></li>
            <li class="page_item page-item-2"><a href="http://dev.jazzle.nl/?page_id=2" title="About">About</a></li>
        </ul>
    </div>
</div>

[Jazzle]

Die bug kende ik niet ,
Dat er genoeg 'hooks' zijn om aan te koppelen ben ik me van bewust, maar maakt het wel erg onoverzichtelijk. Of heeft het nog andere voordelen om andere hooks te 'hergebruiken'? (neem aan dat de grootte niet zo veel uit maakt?)

[crisp]

Het houdt je markup 'schoner'...

[Jazzle]

Ik dacht dat het nu werkte, maar even getest in een virtual pc met IE6, en daar klopt het nog steeds niet:

[crisp]

tsja, IE6...

en als je het met mijn alternatieve styling (zonder die 2 loze floatende divs) probeert?

[Jazzle]

crisp schreef op woensdag 10 december 2008 @ 00:22:
tsja, IE6...

en als je het met mijn alternatieve styling (zonder die 2 loze floatende divs) probeert?

Ik had het geheel iets aangepast waardoor er nog maar 1 div gebruikt kon worden (dus maar 1 kant). Ik heb daarom gewoon een gif met transparency gemaakt die allebij de zijkanten heeft met 860 doorzichtige pixels er tussen, dat werkt prima in alle browsers