Litet CSS tips till er som kodar hemsidor

[RyuuShujin]

Tänkte bara komma med ett litet CSS-tips många av er känner säkert till det men förhoppningsvis hjälper det någon

Om man gör en hemsida som är centrerad och alltså visas mitt på skärmen med tomrum på sidorna så kommer det alltid att funka perfekt i Internet Explorer (IE). Men i Firefox (FF) uppstår ofta ett litet problem. I IE visas alltid srollbaren på höger sida men i FF visas den bara när den behövs dvs. när innehållet på sidan inte får plats på skärmen. Om man då har en lång sida och en lite kortare sida (t.ex. en sida med en meny eller liknande) så kommer det se ut som att sidan hoppar till i sidled när man växlar mellan dem eftersom scrollbaren bara dycker upp på en av dem.

Det finns dock en liten fix som gör så att srollbaren alltid visas även i FF. Lägg bara följande kodsnutt i hemsidans CSS-fil.

 html {
 overflow-y:scroll;
 overflow-x:auto;
 }

Funkar klockrent!

En parantes dock, för att få koden att validera enligt W3C webbstandard måste man validera enligt CSS level 3 och inte 2.1.

[Gäst al6]

Vet exakt vad du menar, detta är perfekt för alla seriösa designers Bra att det är standard också.

[RyuuShujin]

Kan tillägga att det tog lång tid att hitta en kod som löste problemet utan att skapa nya. En variant jag hade ledde till att det vart dubbla scrollbars i IE medans de såg rätt ut i FF. En annan variant gjorde så att scrollbaren längst ned på skärmen inte dök upp om upplösningen på skärmen vart för låg.

Så mycket besvär för ett sånt simpelt problem

[Nicklas]

Praktiskt. Funkar detta på t.ex Opera och Safari också tro eller de har kanske inte samma "problem" som Firefox?

[Gäst al6]

Det är iaf ett problem i Opera så det skadar ju inte att använda. Det kan ju vara så att någon ny webbläsare sticker upp i framtiden (Chrome) som har "problemet" och då är det ju bra att ha löst det redan innan man får ett problem.