[HTML/CSS] background-positioning in Firefox 1.5

[Mathijs1]

Na het installeren van de nieuwe firefox (1.5) merkte ik dat een pagina die voorheen in firefox prima werkte vreemd doet. Een voorbeeld: http://matweb.info/rommel. In IE is het background plaatje prima gecentreerd, zowel verticaal als horizontaal, zoals ook in de stylesheet staat beschreven:

code:

background: url("http://matweb.info/images/deadend.jpg");
background-position: center;
background-repeat: no-repeat;

Maar met FireFox 1.5 werkt de verticale alignment niet, hij zet het midden van het plaatje niet op 50% van de pagina, maar helemaal bovenaan, waardoor je alleen nog maar de onderste helft ziet.

volgens http://nanobox.chipx86.com/browser_support_css.php zou versie 1.5 de betreffende css tag met de waarde 'center' gewoon moeten ondersteunen, maar dat doet ie dus niet..

Iemand een verklaring?

PS: meer info over deze css tag: http://www.w3schools.com/css/pr_background-position.asp

[Verwijderd]

Misschien eens background-position: center center; proberen, ondanks dat het zou moeten werken.
en zo zie je maar.....FF is ook niet zaligmakend.

[ Voor 22% gewijzigd door Verwijderd op 03-12-2005 08:39 ]

[Mathijs1]

Al geprobeerd, helpt helaas ook niet. CSS ziet 'background-positioning: center' namelijk als 'background-positioning: center center', dus die 2e center doet dan niet zoveel.

[crisp]

Cascading Stylesheet:

html, body { min-height: 100%; }

[Currahee]

Ik ben ook eens dagenlang op zoek geweest naar de oplossing van dat probleem, maar ook niet kunnen vinden , waarna ik van de background maar een gewone image heb gemaakt en de lay-out ietwat heb aangepast. Als je een image (niet background) in het midden wil plaatsen kun je de volgende css code gebruiken

.image {
position: absolute;
left: 50%;
top: 50%;
margin-left: -(halve breedte plaatje)px;
margin-top: -(halve hoogte plaatje)px;
border: 0px;
}

Misschien dat op één of andere manier deze css zo verwerkt kan worden dat hij toch een background zowel horizontaal als verticaal kan centreren.

[Mathijs1]

dit lijkt te werken:

code:

html {min-height: 100%;}

thnx!

[ Voor 3% gewijzigd door Mathijs1 op 04-12-2005 00:50 ]