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

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... ;)

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

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...

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. ;)

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? :rolleyes: :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)

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

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

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

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...

Ärligt talat, det är ju verkligen petitesser!! Designen förstörs ju på intet sätt! Att sidan hoppar till i FF utan -moz... när man ändrar fönsterstorlek är ju ingen att hetsa upp sig över. Tycker du borde slopa -moz... i css:en om den inte är helt nödvändigt (?) och förklara för dina kunder att det är normal, korrekt, standardmässigt fönsterbeteende. Dessutom löser inte -moz:en att Safari (2-3% av marknaden) fortfarande beter sig "fel". Om du absolut måste ha någon css för detta så använd hellre overflow-y så att det kommer validera i css3 (och strunta i -moz som aldrig kommer stödjas av andra webläsare och som Mozilla bara använder tills standard finns.)

Edit: som vanligt hann någon före:
Micke Alm Bra förslag igen. Det köper jag.
Mikael Simonsson Kul! :lol: Låter inte heller helt som en standardlösning...

Jag tror nog att de flesta kunder är förståndiga nog att förstå saker om man förklarar det för dem. Naturligtvis säger man inte "det är inte fel på mina prylar" utan man förklarar på ett sakligt sätt hur det fungerar.

I övrigt tycker jag fortfarande som martine ovan att man bör låta webbläsarna fungera som det är tänkt istället för att hela tiden kämpa emot dem. Jag tror nog de flesta kunder skulle förstå det också.

Det hela handlar om att kunden köper kompetens - inte bara html-kod. Det bör man visa ibland också och ge riktiga råd till kunden.

Jo, fast tycker inte riktigt om det då måste man ta ställning till vad för upplösning, har besökaren någon eller några toolbars, för att undvika få dubbelscroll på sidan, som jag tycker är jättejobbigt.

Har pratat med kunden och vi har kommit överens om att sidan är ju centrerad i fx fast när den blir för lång kommer det en scrollbar till höger i Fx och tar lite utrymme. Så det ser ut som sidan ändrar sin centrering. Det estetiska problemet som dem tycker finns med att scrollbaren kommer och tar plats får dom leva med, om cssen ska validera. Man får en:

* Line: 5 Context : body

Invalid number : overflow Parse Error - -moz-scrollbars-vertical

Blir lite less när det ska gnällas, nu har det inte bara varit detta med den här kunden.
Tack för all hjälp.

/R

EDIT: Ser när jag skrivit detta att jag också ser lite gnällig ut, men lite OT så ett exempel från i fredags, kunden ringer och funderar om jag inte begriper vad jag gör!
- ??

- När vi tittar på sidan i min och i kollegans dator är den gröna färgen på logotypen olika nyanser, den ser mycket mörkare ut på min dator.

- Jag försöker svara på ett diplomatiskt sätt att det kanske beror på olika skärmar/inställningar.

- Vi tänker då inte betala fullt pris om det inte ser likadant ut på alla datorer.

OSV.


Ha nu en bra kväll, för nu tänker jag gå från datorn en stund.

/R

Header, provade du att lägga in "html {height: 100.1%;}"? Det är en lösning som föreslås på flera ställen om du söker. Den validerar och påverkar inte IE, men firefox tvingas att alltid visa en scrollbar på högersidan.

Av ren nyfikenhet har jag provat detta nu på morgonen samt html { height: 100%; margin-bottom: 1px; }.

Vad jag upptäckte som var mindre kul med detta "hack" var att i xhtml får man dubbla scrollbars, hur kul är det?

Jag kan tänka mig att ditt "hack" med -moz-scrollbars-vertical spökar ;)

Läs mer här:
http://www.hicksdesign.co.uk/journal...ow-even-better

Får kolla upp det bättre om det skulle bli aktuellt igen. Känns som det inte är något stort problem, men det är klart att om frågan dyker upp igen kan det vara bra att veta.

Vad kunden vill ha är en nedtonad scrollbar i Fx (likadant sim i IE) om sidan inte är så lång att den behöver scrolla för att slippa se sidoförflyttningen som blir när scrollbaren dyker upp. För att få det att se ut så kommer jag inte på nått annat än -moz-scrollbars-vertical.

<div> floatad till höger med bakgrundsbild som ser ut som en scrollbar som den riktiga scrollbaren får lägga sig ovanpå ;D

Har sagt det men säger det igen. overview-y: scroll; med overview-x: hidden; fungerar (ger nedtonad om den inte behövs) i Firefox. Känns bättre att använda det eftersom det känns mindre som ett hack, om det är just FF som behöver det. Dessutom kommer det validera i css3.

Men.... Om man overflow-y:scroll och overflow-x:hidden får man dubbla scrollbars i IE.

Suck! Enkelt blir det väl aldrig. Man får väl gömma den från IE då. Hur vore:Det borde väl funka? Dessutom är det egentligen ett dumt förslag att ha overflow-x: hidden; eftersom folk med små skärmar inte kan se hela sidan om bredden på sidan är större än skärmen.
Provade overview-y i w3c:s validator, validerar som css3, och det fungerar som sagt i Firefox. Provade html { height: 101%; } verkar fungera i de flesta icke-IE-läsare, men det ger ett i mitt tycke oprofessionellt intryck, känns som dålig design att ha en scrollbar som bara scrollar en ynka bit utan mening. Frustrerande, tycker jag eftersom jag alltid vill scrolla ner eller göra fönstret lite större så den försvinner. Är nog bara en lösning för kämpiga, knepiga kunder.

Tillbaks till problemet dubbla scrollbars, har inte sett det själv, men har hört att det har att göra med IE6:s xhtml-rendering. Om man tar bort andra raden i doctypen så ska det lösa sig eftersom IE ramlar tillbaks i quirksmode. Men det är nog inte vad man vill, det är ju ett steg tillbaka.
En annan lösning som jag sett är att lägga in en xml-tag innan doctypen. Detta är valid xhtml eftersom xhtml-dokument alltid är xml-dokument. Även detta låter IE ramla tillbaks i quirksmode eftersom den inte ser doctypen eftersom den inte är först... Men återigen, man vill kanske inte ha IE i quirksmode??...Till sist, jag har själv inte provat några av de här sista lösningarna så jag vet inte om det löser problemet. Tala om hur det går om du provar det.