[CSS]Fonts gelijk krijgen in alle browsers - Softwareontwikkeling

woensdag 16 februari 2005 13:42

Acties:

Topicstarter

Ik heb een site gebouwd en nu is het zo dat de fonts in elke browser anders zijn. In IE klopt het mooi met wat ik in gedachte had, maar in Firefox zijn de letters kleiner en worden paragrafen anders geplaatst. Ook in Safari is het weer anders, maar dat lijkt minder problematisch. Ik heb in CSS geprobeerd op te geven hoe groot ik alles graag had, maar dat lijkt het niet op te lossen. Waarschijnlijk doe ik gewoon iets doms of zo, want ik heb weinig verstand van HTML/CSS, maar ik kom er nu in elk geval niet uit. Een voorbeeldje van wat ik bedoel:

IE (goed):
Afbeeldingslocatie: http://student-kmt.hku.nl/~joost1/SiteIEgoed.jpg

Afbeeldingslocatie: http://student-kmt.hku.nl/~joost1/SiteIEgoed.jpg

Firefox (slecht):
Afbeeldingslocatie: http://student-kmt.hku.nl/~joost1/SiteFirefoxfout.jpg

Wat mis is in Firefox:
-letters zijn kleiner;
-de header staat lager.

Die header gaat ook steeds verder omlaag wanneer ik hem vergroot, dat zou toch ook niet moeten, volgens mij?

De volledige code is te zien wanneer je kijkt naar de source van mijn website: http://www.oogst3d.net (of als die het niet doet http://student-kmt.hku.nl/~joost1/Oogst3D/index.php)

De belangrijkste stukjes code zijn denk ik de volgende:

code:

<style type="text/css">
  div
  {
    font-size: small;
    font-family: times;
    x-index: 50;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    direction: ltr;
    letter-spacing: 0;
    word-spacing: 0
  }
  li
  {
    font-size: small;
    font-family: times;
    x-index: 50;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    direction: ltr;
    letter-spacing: 0;
    word-spacing: 0
  }
  h1
  {
    font-size: 20px;
    font-family: arial;
    position: absolute;
    top: 40px;
    left: 250px;
    z-index: 50
  }
</style>

<h1>Coding: my raytracer</h1>

<div style="position: absolute; top: 81px; left: 225px; width: 580; z-index: 50">
A raytracer is a high-quality 3D-renderer and I wrote this one in C++.
With this raytracer I tried to create as many of the features I use every day in Brazil
as I could. I had come quite far when I stopped working on it. Featuring:
</div>

Wat doe ik fout?

Alvast bedankt!

[ Voor 4% gewijzigd door Oogst op 16-02-2005 13:46 ]

Devblog / portfolio
Swords & Soldiers
Awesomenauts
Proun
Cello Fortress

woensdag 16 februari 2005 13:46

Acties:

OkkE

CSS influencer :+

Je gebruikt voor font-size: geen vaste eenheid. Ik persoonlijk vind dit gebruiksvriendelijker, omdat zo de instellingen van de browser gebruikt worden. Maar wil je perse de fonts gelijk hebben zou je de grootte kunnen opgeven in px.

code:

1	font-size: 10px;

_{mophor heeft gelijk, pt is ook niet overal het zelfde, px wel.}

// Edit

Misschien zou het schelen als je de juiste DOCTYPE boven je pagina zet.

code:

HTML 4.01 Strict, Transitional, Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
    
    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
    
    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

[ Voor 67% gewijzigd door OkkE op 16-02-2005 14:06 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 16 februari 2005 13:47

Acties:

Oogst

Topicstarter

Dat had ik in eerste instantie ook gedaan, maar toen gaf Safari ze weer een stuk groter aan. Door small in te stellen zoals ik heb gedaan, klopte het in Safari weer.

[ Voor 54% gewijzigd door Oogst op 16-02-2005 13:47 ]

Devblog / portfolio
Swords & Soldiers
Awesomenauts
Proun
Cello Fortress

woensdag 16 februari 2005 13:58

Acties:

Verwijderd

voor je header: de margin instellen,

verder is die div eigenlijk een p he (let ook op de margins)

punten zijn overigens ook niet in alle browsers gelijk, px wel

[ Voor 25% gewijzigd door Verwijderd op 16-02-2005 13:59 ]

donderdag 17 februari 2005 18:21

Acties:

Oogst

Topicstarter

Bedankt voor de reacties!

Ik heb geprobeerd om het te fixen en inderdaad zijn de fonts nu even groot nu ik px gebruik (Safari heb ik helaas nog niet kunnen proberen bij gebrek aan Mac) en ook de header klopt nu, nu ik de margin heb ingesteld.

Echter, de tekst staat nu te laag in Firefox, terwijl ik ook voor de tekst de margin heb ingesteld.

IE:
Afbeeldingslocatie: http://student-kmt.hku.nl/~joost1/Site2IEgoed.jpg

Afbeeldingslocatie: http://student-kmt.hku.nl/~joost1/Site2IEgoed.jpg

Firefox:

En eentje die niet eens meer past in Firefox:
Afbeeldingslocatie: http://student-kmt.hku.nl/~joost1/Site2FirefoxfoutB.jpg

Ik heb de CSS aangepast tot het volgende nu:

code:

<style type="text/css">
  div
  {
    font-size: 16px;
    font-family: times;
    margin: 0px 0px 0px 0px;
    letter-spacing: 0px;
    x-index: 50;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    direction: ltr;
    letter-spacing: 0;
    word-spacing: 0
  }
  li
  {
    font-size: 16px;
    font-family: times;
    margin: 0px 0px 0px 0px;
    letter-spacing: 0px;
    x-index: 50;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    direction: ltr;
    letter-spacing: 0;
    word-spacing: 0
  }
  h1
  {
    font-size: 25px;
    font-family: arial;
    margin: 0px 0px 0px 0px;
    letter-spacing: 0px;
    position: absolute;
    top: 40px;
    left: 250px;
    z-index: 50
  }
</style>


<h1>
Coding: my raytracer
</h1>

<p style="position: absolute; top: 81px; left: 225px; width: 580; z-index: 50">
blabla</p>

<ul style="position: absolute; top: 154px; left: 200px; width: 580; z-index: 50">
<li>blabla</li>
</ul>

<p style="position: absolute; top: 435px; left: 225px; width: 580; z-index: 50">
<a href="bla" target="_blank">See all of it here</a>
</p>

[ Voor 64% gewijzigd door Oogst op 17-02-2005 19:11 ]

Devblog / portfolio
Swords & Soldiers
Awesomenauts
Proun
Cello Fortress

donderdag 17 februari 2005 19:14

Acties:

Harm

Margin van de <p/> al bekeken?

Daarnaast, wat is x-index?

donderdag 17 februari 2005 19:18

Acties:

Oogst

Topicstarter

OK, ik hoef je vast niet uit te leggen dat ik me nu een ontzettende sukkel voel, wel? Zowel div ipv p als x ipv z.

Anyway, dat lost het idd weer een stukje op, maar nu is de regelhoogte nog niet gelijk in Firefox en in IE, zie ik. Hoe stel ik regelhoogte in?

Devblog / portfolio
Swords & Soldiers
Awesomenauts
Proun
Cello Fortress

donderdag 17 februari 2005 19:32

Acties:

T-MOB

Oogst schreef op donderdag 17 februari 2005 @ 19:18:
OK, ik hoef je vast niet uit te leggen dat ik me nu een ontzettende sukkel voel, wel? Zowel div ipv p als x ipv z.

Anyway, dat lost het idd weer een stukje op, maar nu is de regelhoogte nog niet gelijk in Firefox en in IE, zie ik. Hoe stel ik regelhoogte in?

Ik durf het bijna niet te zeggen, maar dat doe je met "line-height"

Regeren is vooruitschuiven

donderdag 17 februari 2005 19:47

Acties:

Oogst

Topicstarter

Ah, ik verwachte die bij de sectie font of text op http://www.w3schools.com/css/css_reference.asp, maar hij stond dus bij dimension zie ik nu. Nogmaals

Het is nu in elk geval opgelost, bedankt!

Devblog / portfolio
Swords & Soldiers
Awesomenauts
Proun
Cello Fortress

vrijdag 18 februari 2005 02:53

Acties:

T-MOB

Oogst schreef op donderdag 17 februari 2005 @ 19:47:
Ah, ik verwachte die bij de sectie font of text op http://www.w3schools.com/css/css_reference.asp, maar hij stond dus bij dimension zie ik nu. Nogmaals

Wat dat betreft heb je absoluut gelijk. Qua intuïntiviteit is CSS ruk, je hebt font-weight:, text-decoration: en dan ook nog eens color:. Consistentie ontbreekt alom, tenzij je HTML sinds versie 3 hebt bijgehouden en/of bij het w3c werkt. Anyway, blij dat je het nu voor mekaar hebt...

Regeren is vooruitschuiven

maandag 21 februari 2005 13:05

Acties:

Oogst

Topicstarter

Ik heb het bij nader inzien nog steeds niet voor elkaar. Ik heb net eindelijk weer de kans gehad om op een Mac te checken en het blijkt zowel in Safari als in Mac IE op dezelfde manier niet te kloppen. De fonts worden er net wat groter weergegeven, waardoor bepaalde stukken tekst niet binnen het vlak vallen. Ik kan er helaas geen screenshot van maken (want ik weet niks van MACs), maar het is vooral problematisch bij de categorie "i" op mijn site, waar de tekst door elkaar heenloopt nu.

Hoe krijg ik dit gefixed?

Devblog / portfolio
Swords & Soldiers
Awesomenauts
Proun
Cello Fortress