FF slechter dan IE? background in div

[raymond88]

In het midden heb ik een verloop zitten middels een background-image. Nou blijkt dat FireFox deze niet goed opneemt (het is een jpg'tje..). Nou snap ik totaal niet, waarom 'ie dit doet... Want iedere andere browser heeft er geen last van, met uitzondering van Safari dan, naast FF.

Kan iemand me uit de brand helpen?

http://bit.ly/baGIBh

 

[Ellasar]

Bij mij ziet hij er in ff en ie hetzelfde uit. in opera echter iets beter (in ie en ff zie ik 1 pixel rij in de kop afbeelding links van het logo (van boven naar beneden)

Verder identiek

ie9
ff 4
opera 11

 

[jjw]

En in Safari op de Mac ziet het er ook geweldig uit.

grtjs jjw

 

[raymond88]

Ow.. raar. Ik zie het idd nu ook goed. Weet dan ook totaal niet waar het fout gegaan is, want ik heb gewoon een dag niets meer veranderd. IE en Chrome hadden er sowieso geen last van toen ik het testte, maar FF en Safari dus wel.

Anyways, met betrekking tot die 1px linksboven; ik heb dat stukje als een background image gedaan voor heel de site. Heeft iemand misschien dan een betere oplossing, om deze pixel te voorkomen. Heb nog nooit zoiets gedaan welk doorloopt, vandaar dat ik het op deze manier op wou lossen. Hij staat gewoon gecentered constant, maar dat maakt het plaatje wel best breed. Vandaar bij een iets andere breedte dat het net die pixel verschilt.

 

[csshunter]

Hoi raymond88,
Op dit moment staat het bg-image in alle elementen (!), dwz zonder tegenbericht verderop in de css wordt het overal geplaatst:

* {
    padding: 0px;
    margin: 0px;
    background: url(background.png) no-repeat;
    background-position: 50% 0%;
}

Ik zou 'm alleen in de body zetten:

* {
    padding: 0px;
    margin: 0px;
}
html, body {
    height: 100%;
}
body {
    background: #000000 url(background.png) no-repeat 50% 0;
    color: #FFFFFF;
    font-size:12px;
    font-family: Arial, sans-serif;
}

De ene px lijkt 'm verder te zitten in afrondingsverschillen bij de %-berekening. Met:

#outtercontainer {
    width: 961px;
    ...
}

... sluit het logo òf naadloos aan, òf overlapt het logo de background.png met 1px (afhankelijk van een even of oneven resultaat).
Nieuw probleem is dan: overlap van de twee semi-transparante png's geeft dan een 1px kolommetje dat juist iets lichter is dan daarnaast.
Maar dat valt te verhelpen door de zwarte achtergrond rechtstreeks in de png's te zetten, en de transparantie er uit te halen.

Als je de #outtercontainer mooi op 960px wilt houden, kan je ook in de background.png aan de rechterkant (dus op 371px vanaf links) nog een 1px breed aansluitend stukje zetten, dan ben je er ook.

• Dwz met deze background.png doet ie 't ook, als de uiterste linkerkant van het logo eveneens niet-transparant wordt gemaakt (dan zijn beiden daar niet-transparant en kunnen ze rustig overlappen).

Met vriendelijke groet,
CSShunter

 

[raymond88]

OK, thanks. Ja van een kant is het ook niet nodig inderdaad om hem doorzichtig te hebben. Misschien voor het veranderen van de achtergrondkleur wel handiger, maar dat zal toch niet gebeuren.

Mijn outtercontainer is wel 960px, zou het niet durven om er 961 van te maken haha. Wel apart dat ik mijn background image op 1701px heb staan

Bedankt voor de oplossing!