Text visas fel i Safari

Utan att vara expert på stilmallar så tror jag att jag ligger nära sanningen om jag påstår att den största anledningen till olikheterna ligger i hur textstorleken är definierad i css-mallen.

Det ser ut som att samma textmall läses in till samtliga webläsare, men storleken är bestämt i enheten ”pt”, vilket ger olika resultat på Mac och Win.

Det finns två sätt att lösa detta:
- göra en stilmall för Win IE och en för övriga, eller
- ange textstorlekar i enhet ”em” istället

Varför det funkade bättre då du testsurfade vet jag inte.

Jag hoppas att någon mer kunnig hittar tråden och antingen kommer med mer exakta tips eller rättar mig vid behov.

Om just detta gör dig till lycklig Mac-ägare vet jag inte, men du kommer troligen att bli en sådan iallafall.

(SÅ stor skillnad är det väl inte på de sidor du hänvisar till? Det går ju iallafall att läsa vad som står. Det finns många många värre exempel.)

Jag tror filuren är inne på helt rätt spår. Att ange texten i punkter ger olika resultat eftersom de olika plattformarna räknar på olika sätt (jag tror att det har att göra med den klassiska 72 dpi vs 96 dpi - men jag är inte säker på det).

Observera att jag säger plattformarna, för problemet är inte specifikt för Safari, Firefox på mac visar texten i samma storlek som Safari gör.

Punkter som enhet går helt enkelt inte att lita på. Vill du ha det lika stort så kan du använda pixlar eller möjligvis em. I ditt fall verkar 8.5pt motsvara 11px på macen när du egentligen vill ha det till 12px.

Men sen får man också acceptera att det kommer att se lite olika ut, just hur text flödar är väldigt svårt att ha kontroll över på webben. Folk har olika webbläsare, plattformar och kanske inte ens samma typsnitt inne osv. Det är ett av skälet till att du ser så få sajter som använder spalter på det sättet (ett annat är att folk är mera vana vid ett linjärt läsande på webben).

Jag tycker att storlekarna ser likvärdiga ut. Dock är Safari-bilden mer ihoptryckt hos Imageshack än Explorer-bilden, vilket lurar ögat lite. Det som inte är samma är radhöjden. Jag har själv råkat ut för detta med just Arial. Om detta bara gäller Arial eller är allmänt vet jag inte.

Specificera line-height till något passande så ska det stämma (bättre).

Du kan läsa mer på Wikipedia. Kolla även W3C-länken på den sidan.

God morgon

Här är en sida du kan testa i båda dina miljöer: http://typetester.maratz.com

När du gjort dina val så klickar du på ”Gett CSS” (uppe till höger).

1. Du ska aldrig använda punkter (pt) för webben. Det använder man för tryck.

2. Du säger heller inte vilka versioner av Safari du testat på. Det är ganska stor skillnad på de första och senaste versionerna av läsaren.

3. Hela idén med webben är att samma webbsida SKA kunna se annorlunda ut beroende på användarens egna önskemål. Därför SKA man göra så att en sida ska se hyfsat OK ut även om en användare kräver jättebokstäver för att kunna läsa. Du kan alltså ALDRIG kontrollera de detaljer du irriterar dig på. Om du så håller på och petar till f-n avlöser dig, så kommer det ALLTID att finnas webbläsare eller individer som visar/ser sidan på ett sätt som du kanske inte gillar. Glöm det. Move on.

I det här fallet tror jag inte det spelar någon roll.

Fast genom lite enkel CSS-ändring så är det väl precis vad han kan göra i det här fallet.

Nej, aldrig.
Användare kan ha sin egen stilmall, de kan ha slängt Arial, de kan ha gjort precis vad som helst så att webbsidor passar deras smak.
Du kan aldrig göra så att en webbsida ser likadan ut i alla läsare och hos alla användare, och man ska försöka så långt det går att ge utrymme för detta faktum.
Det är ett kardinalfel att göra en layout som rasar så fort någon har den minsta lilla avvikelse från idealet.
Det är ibland förjäkligt att det är så, men det är bara att acceptera...

Här är css-filen: http://www.gamecore.se/gzon.css
Ladda hem och kolla.

Exempel ur filen:
.news_multi { font-family: arial, sans-serif; font-size: 8.5pt; color: #228EE9;}