Jump to content

Litet CSS tips till er som kodar hemsidor


Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 month later...

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...