/    Sign up×
Community /Pin to ProfileBookmark

How to standardize font-size in both IE & Firefox?

Copy linkTweet thisAlerts:
Jul 26.2007

Hi all..need some help here. ?

I’m having some problems solving the font-size differences at both IE and Firefox browser by viewing it with wide-screen resolution.

[CENTER]

[URL=”http://jessicalim14.ourprofile.org//IE.jpg”]IE (wide-screen)
[/URL]
[URL=”http://jessicalim14.ourprofile.org//Firefox.jpg”]Firefox (wide-screen)[/URL]

[/CENTER]

As you can see, the font-size at Firefox is way more smaller than viewing at IE. Font in IE is bigger and in bold.

But when I view it with CRT monitor, it didn’t appear any font-size differences at both browsers.

[CENTER]

[URL=”http://jessicalim14.ourprofile.org//IE2.jpg”]IE (normal)[/URL]

[URL=”http://jessicalim14.ourprofile.org//Firefox2.jpg”]Firefox (normal)[/URL]

[/CENTER]

How should I standardize the font-size between these two browsers? Is it because the resolution affect the font-size or it’s just because of the different browser?

Please refer to the respective website –> [url]www.niix.com/V2[/url]
Thanks for helping! ?

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelJul 26.2007 — font sizes vary for different browsers. A font-size of 1.0em might be 14-pixels on one browser, and 14.5-pixels on another browser. A standardization needs to occur. Basically, 'zero-ing' the default sizes of everything, and re-stating the desired size.

I have been having good luck using this: * {padding:0; margin:0;}

p {font-size: 100%; line-height:1.0em; margin:16px 0 10px 0;}

html, body {min-height:100%; height:101%; padding-bottom:25px;

font:x-small Arial, Verdana, sans-serif;

voice-family: ""}"";voice-family:inherit;

font-size:small;/*for IE 5.5 */}

html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */

font-size: small; voice-family: ""}"";

voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, helvetica, serif; background-color:none;

font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}

h1{font-size: 1.93em;}

h2{font-size: 1.72em;}

h3{font-size: 1.52em;}

h4{font-size: 1.42em;}

h5{font-size: 1.32em;}

h6{font-size: 1.21em;}[/QUOTE] It is not perfect, but it is alot closer than nothing at all.

Note that I use the universal selector method to strip margins & paddings out. These are different on all browsers also. Change to "zero" and re-state to be 'the same' for every browser.

Of course, -a user can change their prefered default CSS so as to read the page in the fonts and sizes that they prefer.
×

Success!

Help @jessicalim14 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 5.27,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...