Avatar billede Slettet bruger
03. juni 2012 - 22:57 Der er 19 kommentarer

Forskelligt udseende i browsere

Jeg ved godt browsere viser nogle koder lidt forskelligt, hvilket jeg allere der synes er virkelig irriterende.

Men har lavet en html fil kun bestående af html og css. Chrome læser den smukt. Mens firefox og ie læser den nærmest helt anderledes, jeg har brugt "Helvetica Neue Mager" i de sidstnævnte læser dem den som en tyk times new roman skrift?
Hvad sker der?

Håber i kan hjælpe konkret men måske også har noget links eller råd til det med de viser det forskelligt??
Avatar billede keysersoze Ekspert
03. juni 2012 - 23:03 #1
Først så tager du et kig på denne artikel http://www.web-dev.dk/post/DOCTYPE-og-valid-kode-ens-udseende-i-Internet-Explorer-og-FireFox.aspx og søger for at din side opfylder de nævnte krav - er der styr på de ting lægger du et link så vi kan se hvad der reelt går galt.
Avatar billede Wally1973 Praktikant
03. juni 2012 - 23:59 #2
Husk på at fonts kræver helt speciel behandling, da du ikke kan forvente at alle andre på internettet har de samme fonts som dig.
Formentligt er Helvetica Neue Mager ikke en standard font og den tykke times new roman du ser i stedet for er den standard font, som vil blive vist for alle dem der ikke har den specielle font du har valgt.
Avatar billede olebole Juniormester
04. juni 2012 - 00:07 #3
<ole>

Tag dig ikke så meget af det med 'Helvetica Neue Mager'. Alle vi andre har ikke den skrift installeret, så vi vil uanset browser se den med dennes default skrift, hvis intet andet er anført. Default skriften er som regel Times New Roman  *o)

/mvh
</bole>
Avatar billede olebole Juniormester
04. juni 2012 - 00:08 #4
Sorry, Wally ... jeg havde hentet kaffe uden at opdatere browseren  =)
Avatar billede Wally1973 Praktikant
04. juni 2012 - 00:34 #5
Intet problem.
Flere der siger det samme tyder jo bare på at der er noget om det. :)
Avatar billede montago Praktikant
04. juni 2012 - 08:57 #6
Guys... Det er værre endnu

Selvom man tager en af de default installerede fonte, er der stadig stor forskel i renderingen. Dette skyldes forskelle i WebKit, Gecko og hvad de ellers hedder.

Desværre er Chrome her en af de værste. Letter-spacing er således meget dårligt understøttet.
http://www.webdeveloper.com/forum/showthread.php?t=228414

Men i dette (#0) tilfælde er det nok bare fonten som ikke er installeret.
Avatar billede montago Praktikant
04. juni 2012 - 09:00 #7
nu kom jeg i tanke om hvad jeg ville skrive.
Een af grundene til forskellen i font-rendering er grafik-motoren som bliver brugt: GDI+, DirectWrite og hvad det ellers hedder:

her en artikel om det IE bruger http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
Avatar billede olebole Juniormester
04. juni 2012 - 14:59 #8
@montago: Har du testet? Prøv at lave to P elementer, som du begge styler til en font-size på f.eks. 75px. Sæt så den ene til at vise 'Helvetica Neue Mager' og den anden 'Times New Roman'. Test den så i Chrome, Firefox og IE:

<div style="font-size:72px">
    <p style="font-family:'Helvetica Neue Mager'">Ællebælle OleBole fortælle</p>
    <p style="font-family:'Times New Roman'">Ællebælle OleBole fortælle</p>
</div>


Forskellen på tekstlængden i IE og Chrome er 7px. Det svarer til ca. 0.9% af den samlede tekstlængde. Kan det skabe problemer, har man næppe forstået begrebet 'webdesign'  *o)
Avatar billede montago Praktikant
04. juni 2012 - 15:30 #9
Hej Ole

Nej, det er ikke verdens undergang at der er forskel på tekstrendering.

men jeg er alligevel lidt trist over det på en af mine hjemmesider:

<style>
p
{
  font-family: "georgia","times new roman",serif;
  font-size: 0.8em;
 
}
</style>
<p>Test streng som ser forskellig ud</p>

forskellen er ret slående :(
Avatar billede olebole Juniormester
04. juni 2012 - 16:25 #10
Hvis du tænker på længden, så tjaaa. Resten af tekstrenderingen synes jeg er et langt større problem. HTML-tekst renderes generelt som lort og døde øgler (undskyld mit fransk) - men vi er rystende ligeglade, for vi er ikke længere vandt til at se professionelt formateret skrift.

Vi har efter PC'ens fremkomst vænnet os til at se tekst, skrevet ud fra en browser. Det er nemlig, hvad verdens mest udbredte tekstbehandlingsprogram Word er ... en squide browser!

En skrift er konstrueret sådan, at hver enkelt tegn har sin egen default spacing på hver side. Derudover indbygger man flere (ofte rigtig mange) hundrede knibe/spærrepar - altså kombinationer af tegn, som skal have mere eller mindre luft mellem sig, end de to tegns defaul spacing. Disse par lægges i en liste - en såkaldt kerning table. Derfor tager det ofte adskillige år at designe en god font.

Disse kerning tables blæser Word og andre HTML/CSS-baserede tekstprogrammer højt og flot på, hvilket betyder, at teksten står, som var den kastet ned på papiret med en møggreb.

Da folk ikke længere ved, hvordan velformateret skrift ser ud - og der ikke er lærere tilbage, der kan huske det - accepteres øjebæer bare blankt, og sådan vil det forblive at være fremover. Godt, at de sidste udlærte typografer snart er døde, så de ikke længere skal plages  *o)
Avatar billede mireigi Novice
05. juni 2012 - 17:39 #11
@olebole:
Nu du er i gang, skal vi så ikke lige tage den der med Serif vs Sans Serif på websider også? :)

En gammel traver, men årsag til megen splid.
Avatar billede olebole Juniormester
05. juni 2012 - 19:04 #12
@mireigi: Jo, det kan vi da godt  =)

Da man i begyndelsen af 90'erne skabte WWW og HTML, så man fornuftigt nok på årtiers læseforskning og valgte en serifskrift (skrift med fødder) som de første browseres standardskrift.

Serifferne er - som så meget andet indenfor typografien - en reminiscens fra håndskriften. De binder tegnene flydende sammen i et meningsfuldt skriftbillede. Der er tydelig evidens for, at læsehastigheden bliver dramtisk forbedret, når man læser en trykt tekst, sat med en serifskrift - i forhold til samme tekst, sat med sans-serif (uden fødder).

Uheldigvis har senere forskning vist, at det modsatte er gældende, når teksten læses på en monitor. Det har dog ikke ændret browsernes adfærd ... de anvender stadig en serifskrift som standard skrift. Til gengæld har vi fået skrifter, specielt udviklet til skærmvisning - f.eks. Verdana og Arial. De bruges så skræmmende ofte til printet tekst, hvilket de er alt andet end velegnet til ... tjah  =)
Avatar billede mireigi Novice
05. juni 2012 - 19:10 #13
@olebole: Præcis. Og prøv så lige at overbevise firma X om det, når de bestiller et website, hvor skrifttypen skal være den samme som de bruger internt til alle deres dokumenter (Courier New).

Det er til at få lange løg og dårlig mave af :(
Avatar billede scootergrisen Nybegynder
17. juni 2012 - 19:57 #14
Porschemb > Har du link til din side hvor det ser forskelligt ud ?
Det meget nemmere og teste for mig hvis du har et link.
Ellers må du skrive koden her.
Avatar billede olebole Juniormester
17. juni 2012 - 20:06 #15
#14: Har du overhovedet læst tråden? I så fald ville du vide, den forlængst er besvaret  =)
Avatar billede scootergrisen Nybegynder
18. juni 2012 - 02:09 #16
#15 > Hvor står at spørgeren har fået svar på sit spørgsmål ?
Avatar billede olebole Juniormester
18. juni 2012 - 14:37 #17
Det står ganske tydeligt skrevet i #15 - men det er rystende overflødigt for enhver med indsigt i HTML/CSS. Det er vanskeligt at forestille sig noget mere elementært  =)
Avatar billede scootergrisen Nybegynder
19. juni 2012 - 00:12 #18
#17 > Men det jo ikke dig der har oprettet spørgsmålet så hvordan ved du spørgeren har fået svar når han/hun ikke har skrevet siden spørgsmålet blev oprettet ?

Og der står jo også at der ikke er noget svar til spørgsmålet når inden man går ind på det.
Avatar billede olebole Juniormester
19. juni 2012 - 01:26 #19
Har du noget at bidrage med, eller kan du bare ikke modstå lysten til at smide med badeanden?

Om tråden står opført som besvaret har jo intet at gøre med, om spørgsmålet er blevet korrekt besvaret. Det er det forlængst.

Hvordan jeg ved det? Fordi det er et klassisk problem, som har været oppe i hundredevis af gange på Eksperten - og fordi jeg ville være elendig til mit håndværk, hvis jeg ikke kunne gennemskue problemet med det samme. Det er jeg ikke  =)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester