IE vs FF når nettleservinduet blir smalere enn page

[tom waits for alice]

Har et design her med et bakgrunnsbilde i body, og på den en page (med diverse elementer inni, selvsagt) med eget bilde som skal aligne pent med det i body. Begge er midstilt:

 

margin: 0pt auto;

background-position: center top;

 

So far so good, bildene er begge pent midtstilt i nettleservinduet. (Så er det et problem med at IE og FF avrunder forskjellig når "midten" havner på en halv pixel (si browservinduet er 1045 pixels bredt, da blir midten 522,5 pixler) og da er det ikke likegyldig om bakgrunnsbildet er 501 eller 502 pixels bredt. Men det er en annen sak.)

 

Temaet for denne tråden er det problemet som oppstår når nettleservinduet blir smalere enn bredden på page. Bildet i body vill alltid midtstille seg i både IE og FF, om vinduet så bare er 50 pixler bredt så ser jeg sentrum av body-bildet. Page oppfører seg på samme måte i IE, men ikke i FF. I sistnevnte bråstopper page når venstrekanten når venstrekanten i vinduet. Gjør jeg vinduet smalere enn det, står venstrekanten i ro, og jeg ser bare mindre og mindre av høyrekanten.

 

Problemet er selvsagt at siden bakgrunnsbildet i body fortsatt flytter seg, så designet i oppløsning. Og det ser ikke pent ut.

 

Opera oppfører seg på samme måte som FF. Safari og Chrome derimot har en tredje variant, der stopper både body og page å flytte seg når page når venstrekanten av vinduet. Bildet i body er bredere enn page, men de to klarer allikevel å scrolle det bare så mye som nødvendig og ikke lenger. Det gjør altså ikke FF og Opera.

 

Strengt tatt har jeg sansen for måten Safari og Chrome oppfører seg på, siden det gjør at navigation ikke forsvinner utenfor vinduet når den er venstrestilt. Men IE's måte er tross alt bedre enn FF og Opera der designet går i oppløsning.

 

Nå kan jeg komme rundt dette ved å ta vekk designelementene fra body. Men jeg er jo fortrinnsvis interessert i at dette skal virke. Noen som har noe erfaring med dette? Er det noen setting som gir et konsistent resultat i ulike nettlesere?

 

Kan desverre ikke linke til siden, da den ikke er live ennå. Men her er en forsøksvis skisse av resultatet i de ulike nettleserne:

 

 

Designet:

         |--------------------------------------|
         |     Body                             |
         ||------------------------------------||
         ||   Page                             ||
         ||                                    ||
         ||------------------------------------||
         |--------------------------------------|

I Internet Explorer

-------------------------------|
dy                             |
------------------------------||
e                             ||
                             ||
------------------------------||
-------------------------------|

I FF og Opera:

-------------------------------|
dy                             |
|------------------------------------|
|   Page                             |
|                                    |
|------------------------------------|
-------------------------------|

Safari og Chrome:

|--------------------------------------|
|     Body                             |
||------------------------------------||
||   Page                             ||
||                                    ||
||------------------------------------||
|--------------------------------------|

 

Geir

Endret 27. november 2008 av tom waits for alice

[tom waits for alice]

Jeg gjorde om siden i alle fall nå, siden vi hadde en deadline. Så da ligger begge bildene i egne elementer. Det rare er at nå oppfører alle platformer seg likt, det vil si at de stopper i kanten av vinduet alle sammen, så jeg må ha endret noe annet underveis.

 

Ikke så mye klokere, men glad for at det virker...

 

Geir .)

Endret 27. november 2008 av tom waits for alice