Background image position IE vs FF

[monnick]

Ik ben bezig met een nieuwe layout, te zien op: http://www.tomrunia.nl/FDservice/
Na veel gedoe dacht ik eindelijk het rechter donkergrijze image op de juiste plek te hebben, in firefox is dit ook het geval. Maar tot mijn grote ergernis klopt het allemaal niet zo mooi in Internet Explorer

Het probleem zit hem dus in het positioneren van de background image van de div "container". Deze positie heb ik als volgt verwerkt in mijn CSS sheet:

Cascading Stylesheet:

#container {
    width: 554px;
    margin-left:auto;
    margin-right:auto;
    background-image:url(images/Website-FD-Services_09.gif);
    background-repeat:no-repeat;
    background-position: right 176px;
}

Dus dmv 'background-position' de bg image rechts uitlijnen en de hoogte handmatig instellen in pixels. Maar dit werkt dus niet naar behoren in IE. (zoals jullie kunnen zien)

Ik heb al diverse dingen geprobeerd, waaronder het ook handmatig aanduiden van de horizontale uitlijnen (dus in pixels). Maar dit haalt ook niks uit.

Nu ben ten einde raad en weet niet hoe ik dit probleem kan oplossen, verder kan ik ook niet echt zoeken aangezien ik niet weet waarop. "background-position IE FF" levert geen resultaten op.....

Ik hoop dat iemand mij kan helpen met een passende oplossing.

De pagina is w3c HTML valid

[Geert.H]

Het zou iets te maken kunnen hebben met het feit dat ie altijd een scrollbar in beeld heeft. Hierdoor is het midden bij IE anders dan bij FF.
(onzin in dit geval)

Verder zou je eens kunnen kijken naar de padding/margins van bepaalde objecten. Misschien dat je die even op nul moet zetten (of er rekening mee moet houden).

[ Voor 5% gewijzigd door Geert.H op 07-01-2008 17:09 ]

[RM-rf]

Geert.H schreef op maandag 07 januari 2008 @ 17:07:
Het zou iets te maken kunnen hebben met het feit dat ie altijd een scrollbar in beeld heeft. Hierdoor is het midden bij IE anders dan bij FF.

klopt, aangezien dat ook een lelijke verspringing oplevert bij links tussen pagina's die wel en die niet scroll, kies ik er zelf ook meestal voor om de scrollbar ook bij firefox standaard in beeld te laten zijn:

via CSS-code:

Cascading Stylesheet:

:root { overflow-y: scroll !important; }

kun je dat doen en op dat moment gedragen msie en firefox zich gelijk en houden een gelijke breedte aan.. én verspringt het midden niet meer al naar gelang er wel of niet een scrollbar verschijnt.

maar idd lijkt het hier niet het probleem te zijn, aangezien die rechter-tab gewoon in een element staat...
ik vermoed eerder dat de inhoud in dat element mogelijk gecentreerd wordt ipv links uitgelijnd..

ik zou bv

Cascading Stylesheet:

#container {
    width: 554px;
    margin-left:auto;
    margin-right:auto;
    background-image:url(images/Website-FD-Services_09.gif);
    background-repeat:no-repeat;
    background-position: right 176px;
        text-align: left;
}

eens proberen.

[ Voor 24% gewijzigd door RM-rf op 07-01-2008 17:16 ]

[monnick]

Dank voor jullie reacties.

@ RM-rf: ik heb je code verwerkt in mijn CSS sheet, de scrollbar verschijnt nu keurig zoals het hoort.

Echter dit verhelpt niet het probleem. Het lijkt wel of de container in IE een veel kleiner aantal pixels breed is dan de container in FF, hoewel ze natuurlijk wel dezelfde width hebben (namelijk 554px). Pas als ik de container width zodanig vergroot tot zo'n 610px (dus 56px meer dan de werkelijke breedte van de breedte) ziet de layout er in IE goed uit, de afbeelding is dan 'goed' rechts uitgelijnd. Maarja, als ik dat doe ziet de layout er in FF weer vern**kt uit, want dan ziet er een enorme ruimte tussen de content div en de background img.

Ik hoop dat iemand een nette oplossing kan bedenken, want zoals al reeds vermeld kan ik het niet oplossing (ook niet na uitgebreid googelen).

En, doormiddel van een browser-check een verschillende style zowel IE als FF maken is zeker not-done?

EDIT: na het posten van dit bericht zie ik dat je je post ge-edit hebt RM-rf. En warempel die simpele "text-align:left;" deed het 'm! Je bent een held, na zoveel gekut deze charmante oplossing is geweldig

[ Voor 10% gewijzigd door monnick op 07-01-2008 17:25 ]

[Verwijderd]

wat ook veel gesodemieter kan schelen is een andere doctype:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Dan doen FF en IE6 in ieder geval een beetje hetzelfde...