[CSS] horizontaal en verticaal centreren scrollable object - Softwareontwikkeling

zaterdag 18 november 2006 14:33

Acties:

Topicstarter

Nee, dit is niet het zoveelste "hoe-zet-ik-mijn-pagina-in-het-midden" topic, dit is een andere vraag. Ik heb een simpele image-gallery gemaakt bestaande uit een rij met foto's achter elkaar. Dit blok is 1000 pixels breed en moet in het midden van de pagina staan. Als de inhoud breder is dan 1000 pixels moet er in het blok een scrollbar verschijnen. Dit werkt perfect. In Firefox... Internet Explorer 6 en 7 zien het net even anders en doen iets heel vreemds. Zie dit voorbeeld.

Mijn vraag: hoe zorg ik dat IE doet wat ik wil en mij hetzelfde laat zien als FF? Hieronder nog even de code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Image Gallery Probleem</title>
    <style>
        html, body
        {
            margin: 0px;
            padding: 0px;
            font-family: Trebuchet MS, Verdana, Arial;
            font-size: 12px;
            background-color: #454545;
            height: 100%;
            width: 100%;
        }

        #container
        {
            position: relative;
            margin: auto;
            width: 1000px;
        }

        #imagebar
        {
            background-color: #292827;
            white-space: nowrap;
            overflow: auto;
            height: 490px;
            width: 100%;
            margin-top: 5px;
            background: url(pix/structure/imagebar_background.gif);
            background-position: center;
            background-repeat: repeat-x;
        }

        #imagebar img
        {
            margin-left: 5px;
            margin-right: 5px;
            margin-top: 12px;
            display: inline;
        }
    </style>
</head>

<body>

<table style="height: 100%; width: 100%;" cellspacing="0" cellpadding="0">
<tr>
<td>

<div id="container">

    <div id="imagebar">
        <img src="pix/content/voorbeeld_01.jpg" />
        <img src="pix/content/voorbeeld_01.jpg" />
        <img src="pix/content/voorbeeld_01.jpg" />
        <img src="pix/content/voorbeeld_01.jpg" />
        <img src="pix/content/voorbeeld_01.jpg" />
        <img src="pix/content/voorbeeld_01.jpg" />
        <img src="pix/content/voorbeeld_01.jpg" />
        <img src="pix/content/voorbeeld_01.jpg" />
    </div>

</div>
</td>
</tr>
</table>

</body>

</html>

Ik doe vast iets heel doms, maar ben nu al een half uur aan het kloten en zoeken en kom er niet uit. Wie o wie helpt mij?

edit: nog twee screenshots ter verduidelijking

Afbeeldingslocatie: http://tweakers.net/ext/f/e4f8a0e4a75d69f47401c9908af37b53/thumb.jpg

Firefox (goed) - klik voor groter

Afbeeldingslocatie: http://tweakers.net/ext/f/92185ab0fb80924ada68ddffa0c50686/thumb.jpg

Internet Explorer (fout) - klik voor groter

[ Voor 9% gewijzigd door posttoast op 18-11-2006 14:46 ]

omniscale.nl

zaterdag 18 november 2006 14:38

Acties:

Verwijderd

Misschien ligt het aan mij, maar FF en IE geven precies hetzelfde weer.
Heb je toevallig een printscreen van hoe het er bij jou uitziet?

zaterdag 18 november 2006 14:45

Acties:

posttoast

Topicstarter

Verwijderd schreef op zaterdag 18 november 2006 @ 14:38:
Misschien ligt het aan mij, maar FF en IE geven precies hetzelfde weer.
Heb je toevallig een printscreen van hoe het er bij jou uitziet?

Hmmm, dat is vaag! Bij deze de screenshots:

Firefox (goed) - klik voor groter

Internet Explorer (fout) - klik voor groter

omniscale.nl

zaterdag 18 november 2006 14:50

Acties:

MAZZA

Barbie is er weer!

Vreemd want ook bij mij werkt het prima

zaterdag 18 november 2006 14:51

Acties:

Technicality

Vliegt rechtsom...

Doe eens een harde refresh? Bij mij ziet het er ook bijna hetzelfde uit (alleen de donkere rand onder je plaatjes is in IE minder dik).

zaterdag 18 november 2006 14:55

Acties:

posttoast

Topicstarter

OK, er gebeurt iets heel vreemds:

als ik in IE mijn cache leeg maak en vervolgens de pagina voor de eerste keer open gaat het goed. Refresh ik vervolgens, dan gaat het weer mis. Dit gebeurt zowel in IE6 als IE7. Wat zou dat kunnen zijn?

omniscale.nl

zaterdag 18 november 2006 18:07

Acties:

Verwijderd

Die tabel geeft het probleem waardoor je pagina naar rechts opschuift.

zaterdag 18 november 2006 21:29

Acties:

posttoast

Topicstarter

Verwijderd schreef op zaterdag 18 november 2006 @ 18:07:
Die tabel geeft het probleem waardoor je pagina naar rechts opschuift.

Verdomd, je hebt helemaal gelijk. Hier een aangepaste versie. Heel vreemd dat dit probleem bij mij pas na een refresh optreedt in IE.

Wel balen dat die tabel weg moet dan, want de enige andere oplossing om verticaal te centreren die ik ken is om met negatieve marges te gaan werken. En dat vind ik ontzettend slordig (onder anderen omdat je content wegvalt wanneer de browser kleiner wordt gemaakt). Iemand suggesties?

Bedankt in ieder geval Thommy!

omniscale.nl