[FF vs IE] DIV background - Softwareontwikkeling

maandag 6 februari 2006 18:58

Acties:

Topicstarter

Ik ben met een site bezig die bestaat uit meerdere divs waarvan de achtergrond een foto moet zijn. (klinkt vaag.. I know..).
Het probleem is nu dat ik van de middelste div (degene waar de content in moet komen te staan) de achtergrond niet op de juiste plek kan krijgen in FF. In IE gaat het (voor de verandering) eens probleemloos.
Voorbeelden:
Afbeeldingslocatie: http://home.student.utwente.nl/g.bos/ff_background.jpg

Afbeeldingslocatie: http://home.student.utwente.nl/g.bos/ff_background.jpg

Afbeeldingslocatie: http://home.student.utwente.nl/g.bos/ie_background.jpg

Dit is de code die ik gebruikt heb.

code:

    <body>
        <div id='container'>
            <div id='top'>
                Top
            </div>
            <div id='center'>
                <div id='left'>
                    left
                </div>
                <div id='menu'>

                </div>
                <div id='main'>
                    <div id='text'>
    
                    </div>
                </div>
                <div id='right'>
                    right
                </div>
            </div>
            <div id='bottom'>
                bottom
            </div>
        </div>
    </body>

code:

/* Pagina structuur */

#container{
    position: absolute;
    left: 50%;
    margin-left: -400px; /* (width/2) zorgt er icm left en position voor dat je een gecentreerde floating box krijgt.*/
    width: 800px;
}

#top{
    position: relative;
    width: 100%;
    height: 100px;
    background: transparent url('../images/top.gif') no-repeat;
}

#center{
    position: relative;
    width: 100%;
    height: 400px;
}

#bottom{
    position: relative;
    width: 100%;
    height: 75px;
    background: transparent url('../images/bottom.gif') no-repeat;
}

#left{
    position: absolute;
    left: 0px;
    top: 0px;
    height: 400px;
    width: 100px;
background: transparent url('../images/left.gif') no-repeat;
}

#menu{
    position: absolute;
    left: 100px;
    top: 0px;
    height: 400px;
    width: 150px;
    overflow: hidden;
    background: transparent url('../images/menu.gif') no-repeat;
}

#main{
    position: relative;
    left: 250px;
    height: 400px;
    width: 450px;
    overflow: auto;
    background: transparent url('../images/main.gif') no-repeat;
    background-attachment: fixed;
}

#text{
    width: 400px;
    margin: 15px;
}

#right{
    position: absolute;
    right: 0px;
    top: 0px;
    height: 400px;
    width: 100px;
    background: transparent url('../images/right.gif') no-repeat;
}

Ik heb al vanalles geprobeerd, maar als ik het in FF fix (door een absolute positie op te geven oid) dan gaat de pagina in IE helemaal flippen...

Weet iemand hoe ik dit wel werkend kan krijgen?

BTW, probleem begon toen ik background-attachement: fixed; ging gebruiken voor de content div. maarja, aangezien dat een vereiste is voor de site...

BTW2, Foto die ik gebruik is om te testen, moet nog wel wat anders komen

The easiest way to solve a problem is just to solve it.

maandag 6 februari 2006 19:01

Acties:

Verwijderd

Gooi gewoon de hele achtergrond in de div die je container hebt genoemd? Of lost dit het probleem niet op?

maandag 6 februari 2006 19:03

Acties:

trinite_t

Topicstarter

het probleem is dat de div die de content bevat straks een ander image moet worden...

The easiest way to solve a problem is just to solve it.

maandag 6 februari 2006 19:06

Acties:

Verwijderd

dan zou ik dit veranderen:

#main{
position: relative;
left: 250px;
height: 400px;
width: 450px;
overflow: auto;
background: transparent url('../images/main.gif') no-repeat;
background-attachment: fixed;
}

wordt:

#main{
position: relative;
left: 250px;
height: 400px;
width: 450px;
overflow: auto;
background: url('../images/main.gif') no-repeat top left;
padding: 0;
margin: 0;
}

*dat transparante kun je volgens mij beter in het plaatje zelf doen..

[ Voor 11% gewijzigd door Verwijderd op 06-02-2006 19:07 ]

maandag 6 februari 2006 19:07

Acties:

RSpliet

*blink*

trinite_t schreef op maandag 06 februari 2006 @ 19:03:
het probleem is dat de div die de content bevat straks een ander image moet worden...

Ja maar het moet toch wel een geheel worden? Dan hoef je (neem ik aan) de foto heel niet te verknippen. Maar vooruit, de div moet niet absolute worden gepositioneerd:

Note: For absolutely positioned elements whose containing block is based on a block-level element, this property is an offset from the padding edge of that element.

Schaadt het niet, dan baat het niet

maandag 6 februari 2006 20:07

Acties:

trinite_t

Topicstarter

als ik alles naar position: relative; zet, dan breekt alles uit elkaar!
Dan gaan alle divs die in center naast elkaar moeten komen te staan onder elkaar staan (wel op hun goede horizontale positie).
En volgens mij staat het image nu nog niet op de goede plek in FF.

The easiest way to solve a problem is just to solve it.

maandag 6 februari 2006 20:38

Acties:

Pixeldude

Dit had ik laatst ook nog, Firefox zet de background img echt fixed dus links boven. Ik heb dit toen opgelost door daarin nog een div te plaatsen zonder achtergrond afbeelding of kleur. En fixed weg te laten uiteraard

maandag 6 februari 2006 21:38

Acties:

trinite_t

Topicstarter

je bedoelt dus voor mij dan, om nog onder de main div een background div te zetten zonder overflow...
hmmz, das idd een goed id! ga ik direct uitproberen!!!

[edit]
Het werkt nu helemaal zoals het zou moeten, in ff en ie $_/-\o_$
Hartstikke bedankt! (en ik gebruikte het id eigenlijk ook al voor die scrollbalk.. dat ik er niet opgekomen ben om 't hier ook voor te gebruiken...

)

[ Voor 42% gewijzigd door trinite_t op 06-02-2006 22:18 ]

The easiest way to solve a problem is just to solve it.