[Header]

Jag har en sida som är centrerad med divvar. Vad som stör mig är när sidan blir så lång att den scrollar blir det en sidoförflyttning i Firefox.
För att undvika detta använder jag overflow: -moz-scrollbars-vertical; i CSS, men då validerar inte detta.
Har sökt som hela morgonen efter ett annat sätt att komma runt detta men inte hittat, finns det?

Är det bara att leva med att det blir en sidoförflyttning i Fx eller att css inte validerar.

/R

[Surfaren]

Jag måste nog säga att jag inte förstår problemet...

Menar du att sidans innehåll rör på sig en aning i sidled då scrollbaren dyker upp? Detta har då aldrig jag sett som ett problem iaf...

[Header]

Det är så att sidans innehåll rör sig när scrollen dyker upp. Dem jag har gjort sidan åt tycker det är ett estetiskt problem när det gör så.

Vad jag gjorde då var att lägga in overflow: -moz-scrollbars-vertical; och allt var bra till idag då jag fick telefon om att deras sida inte längre validerade (CSS). Och en förfrågan om det inte gick att lösa.

/R

[Micke Alm]

overflow taggen har inte så mycket grejjer som validerar utöver typ auto, hidden och så... det finns ju overflow-x och overflow-y också som verkar vara ie-specifika taggar, men som dock inte heller validerar.

Men att sidan rör sig lite i sidled är väl ganska naturligt eftersom scrollbaren tar upp plats och alltså gör att 100% av fönstret är 100% - scrollbar... Antingen får du väl se till att ALLTID ha scrollbar där (typ overflow: scroll men det är ju inte så snyggt...

overflow: -moz-scrollbars-vertical har jag aldrig sett eller hört talas om... verkar väl dessutom vara ett ganska kackigt hack om det inte validerar.

om du gör container div:en lite smalare så att den inte går hela vägen ut i kanten så borde det ju ligga still, men då ligger sidan inte heller helt centrerad...

[Surfaren]

Jag kan inte tänka mig nån lösning, annat än möjligen overflow: scroll som Micke påpekade... Ska väl fundera på saken iaf, men jag tror det är kört.

[martine]

Originally posted by Header@Apr 10 2006, 14:29
Vad jag gjorde då var att lägga in overflow: -moz-scrollbars-vertical; och allt var bra till idag då jag fick telefon om att deras sida inte längre validerade (CSS). Och en förfrågan om det inte gick att lösa.

Det verkar som IE löser "platsbristproblemet" annorlunda än t ex FF när scrollbars dyker upp. Har också haft strul med det här. Om man har en box på säg 200x200px och allt inte får plats så löser IE med att lägga scrollbaren ovanpå eventuella marginaler, vilket betyder att innehållet visuellt inte är helt centrerat eftersom scrollbaren ligger till höger. Scrollbarerna blir alltså del av "boxen". I FF etc verkar det som scrollbarer om möjligt hamnar utanför själva boxen så att dimensionerna bibehålls då det är möjligt. (Jag har ingen vidare koll på exakt hur det är, men ovan är typ hur det fungerar - kanske någon annan har detaljstuderat det här?)

Oftast märker man endast av detta om något på sidan är centrerat. Hur det ter sig beror förstås på hur och var man sätter fast bredd och längd. Någonstans måste ju platsen som scrollbarerna tar tas upp av tas ifrån.

overflow: -moz-scrollbars-vertical; fungerar bara i gecko och alltså inte i andra icke-gecko läsare vilket gör den ganska meningslös eftersom den inte fungerar i IE, Safari och Konqueror. Ingen bra lösning. IEs motsvarighet är overflow-y. Antagligen kommer overflow-x och overflow-y validera i CSS3 (kanske redan fungerar i nya geckoversioner?).
Hur vore lösningen att sätta overflow-y och tala om för dina kunder att det validerar under CSS 3? :P
(annars är den enda lösningen antagligen att som Micke Alm föreslog, skapa ett "glapp" på typ 20px på högersidan där scrollbaren kan ramla in när den behövs.)

Edit: overflow-x och -y fungerar i FF, dock ej i Safari (tidsfråga?), nån som har Konqueror??.
Kolla själv:
http://www.styleassistant.de/tips/beispiel73.htm
(Verkar mao vara gjutna för CSS 3)

[dotvoid]

Att -moz... inte validerar är felaktigt av validatorn. CSS2-standarden säger att "vendor-specific identifiers" ska börja med - eller _. T ex har mozilla-projektet valt -moz- och Opera använder -o-. Det finns fler. Så att validatorn inte gillar det ska man inte bry sig om. Att kunna bygga ut CSS med stöd för egen css är en del av standarden..

Att innehållet skiftar åt sidan beror ju på att Firefox inte visar scrollbaren om den inte behövs. Det gör Internet Explorer. Det kan man tycka som man vill om men så är det. Jag tycker man ska försöka förklara det för kunden.

Om ovanstående -moz-css funkar så får du ju istället förklara att det är en del av standarden.

Ref: http://www.w3.org/TR/CSS21/syndata.html#q4

[Header]

Jo visst det skapar en scroll i diven. Det är inte det jag åstadkommer eller vill göra med overflow: -moz-scrollbars-vertical;

I IE så finns ju utrymmet för scrollbar längst till höger, fast om den inte används är den gråmarkerad. Firefox har inte den överhuvudtaget om inte sidan är för lång för webbläsarfönstret. Så vad jag åstadkommer med "ful hacket" är att tvinga fram en likadan scrollbar i Fx som i IE.

Ni kan titta på http://www.sidmarkens.se/ som är vår egen sida där jag nu la in
overflow: -moz-scrollbars-vertical; så är det kanske lite lättare att förstå vad jag menar.

/R

[Mikael Simonsson]

Du kan lösa det genom att lägga in följande i CSS-filen:
html {height: 100.1%;}

[Micke Alm]

tveksamt om dina kunder kommer köpa att "det är w3c:s validator det är fel på... inte min sida!"...

Vad du skulle kunna göra är ju att sätta overflow: auto; på div:en som du har centrerat istället... med andra ord, flytta in scrollbaren på sidan istället för att ha den ute i marginalen... och då självklart sätta overflow: none; på bodyn...