/    Sign up×
Community /Pin to ProfileBookmark

crazy text size variation across browsers

Copy linkTweet thisAlerts:
Nov 26.2007

Head caput! Can anyone help?
I tweaked a website I’m working on last week, and can’t work out why there are now huge differences in headings and other CSS specified categories across browsers. The only consistent size is the <p>. What on earth have I done to my website???

You can see the home page at:
[url]http://www.ashby-design.co.uk/weepress/index.html[/url]

The external css is at:
[url]http://www.ashby-design.co.uk/weepress/css/default.css[/url]

View in Firefox (BIG) and Safari (SMALL) to see big variation in headings, <li> in the top navigation rung… among others. I’ve added specific alternative sizing for Internet Explorers 5.5,6 and 7, as follows (but didn’t need these until this week…)

#topnav li {font-size: 1.5em;}
#footer li {font-size: 1.5em;}
.quoteright {font-size: 1.7em;}
.quoteleft {font-size: 1.7em;}

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangNov 26.2007 — This will probably explain it: http://webkit.org/blog/67/strange-medium/

If you temporarily change all fonts to Verdana you should see a dramatic change.
Copy linkTweet thisAlerts:
@bydesignauthorNov 26.2007 — Bugger…

So to get what I want I'll have to do differential tweaking for my good friend Safari
Copy linkTweet thisAlerts:
@bydesignauthorNov 26.2007 — PS much appreciated. I'm a self-taught designer working on my own and without this forum and the generous tips I get from people, I would waste a heckofalotta time
Copy linkTweet thisAlerts:
@WebJoelNov 26.2007 — What I have been doing (and it isn't perfect, as there is still some font-size variation in my works x-browsers but not nearly so much as it used to be..), is to state in BODY{font-size:0;} to make ALL fonts "zero", then, re-state them a second time, to the desired default size:

body {font-size:0; font-size:1.0em;...}

I suppose that a browser can still get this wrong, if it doesn't get "em" right. I've read of a 'trick' something like "[I]font-size:66%; font-size:1.0em;[/I]" that makes "1.0em" equal to "10px" (instead of maybe being 9.5px or 10.5px, etc). Advantage here: I'm not sure, unless you wanted some text to be [I]non[/I]-resizeable, and some other text to [I]be[/I] re-sizeable (em-height is re-sizeable). I guess it keeps the math even(?). 1em = 10px, 2em = 20px, etc. Has anyone heard of such a thing?

I didn't know about the 'verdana' trick... I do know that verdana is a 'made for the web' font, though.
×

Success!

Help @bydesign spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...