...

View Full Version : How to standardize font-size in both IE & Firefox?



jessicalim14
07-26-2007, 05:36 AM
Hi all..need some help here. :confused:

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


IE (wide-screen) : jessicalim14.ourprofile.org//IE.jpg

Firefox (wide-screen): jessicalim14.ourprofile.org//Firefox.jpg

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.



IE (normal): jessicalim14.ourprofile.org//IE2.jpg

Firefox (normal): jessicalim14.ourprofile.org//Firefox2.jpg

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 --> www.niix.com/V2
Thanks for helping! :)

inko9nito
07-26-2007, 05:45 AM
Try creating a separate stylesheet specifically for IE and fixing the size there. Add:


<!--[if IE]>
<link rel="stylesheet" type="text/css" href="layout/stylesheet_ie.css" />
<![endif]-->

to the header, after the regular stylesheet link.

Looks fine on my LCD. No idea why it doesn't have the text size difference on the CRT though. Are you saying you're testing it on 2 different computers?

Jutlander
07-26-2007, 10:36 AM
My font-sizes are exactly the same when I view that site and those 4 images you gave are the same too?

ahallicks
07-26-2007, 11:06 AM
If you set a font-size it will be the same size in both browsers at the same resolution, especially if you set the size in pixels because that is exactly how many pixels it will be.

If you are using the heading tags <h1>, <h2> etc then the font-size will vary because each browser has its own default font-size for these and some other attributes. All you need to do is set your own specific size for the element you are using and it will look the same in all browsers size-wise.

On a side note, those links above don't work (maybe it's the extra / ?) they all link to a fwslogo.gif for what I presume is your web host.

Jutlander
07-26-2007, 11:08 AM
You shouldn't set it with pixels though cause IE users won't be able to resize. Use 'em' or '%'.

jessicalim14
07-26-2007, 11:26 AM
Try creating a separate stylesheet specifically for IE and fixing the size there. Add:


<!--[if IE]>
<link rel="stylesheet" type="text/css" href="layout/stylesheet_ie.css" />
<![endif]-->

to the header, after the regular stylesheet link.

Looks fine on my LCD. No idea why it doesn't have the text size difference on the CRT though. Are you saying you're testing it on 2 different computers?

You mean that I have to create another style.css just for the code you'd given me?

Yes, I had tested it on many computers before. Some widescreen view it same and some doesn't. My friend said it might be affected by the resolution. Higher resolution will stretch the website. Is it true? I doubt about that.
But I knew that both browsers' default font-size are different. IE is meant to be bigger than Firefox's. That's why I wanted to know the ways to standardize the font-size.

Jutlander
07-26-2007, 11:32 AM
No, you shouldn't create a separate stylesheet just for IE, that will only lead to trouble later (when you edit something, you must then remember to do it on both stylesheets, which is a mess, i've tried it). Do as ahallicks suggested. When you set the font size, it will look the same on both browsers.

jessicalim14
07-26-2007, 11:35 AM
I didn't know why my image can't be viewed if I linked with the URL. It only will work when you copy-paste the link to view it. Sorry for the inconvenience o..
I'd also re-uploaded the images as I'd resized it previously and it's hard to see the differences. Only the printscreen with widescreen is different but for normal screen..the font-size remains the same.

inko9nito
07-27-2007, 03:14 AM
No, you shouldn't create a separate stylesheet just for IE, that will only lead to trouble later (when you edit something, you must then remember to do it on both stylesheets, which is a mess, i've tried it). Do as ahallicks suggested. When you set the font size, it will look the same on both browsers.

Not necessarily. IE stylesheet should only be used for exceptions.

Say, style.css has h1 size set to 14 pixels but you want it to be 16px in IE, then style_ie.css should redefine that rule with a different size. It basically works as an override.

No need to repeat all the other rules that are the same for both browsers. So, at the end, your style_ie.css will only have one rule if that's the only thing you want to change for IE.

ahallicks
07-27-2007, 10:04 AM
Not sure if anyone has mentioned this yet, but by the looks of it you have the IE font-size set higher in the browser rather than being anything to do with your site. I sometimes find this happen with Firefox, where it loads a page and uses their font sizes 'plus a few more!'

Check your font-size settings in the browser as well.

jessicalim14
07-30-2007, 04:12 AM
I'd set the text size as Medium in IE and Normal in Firefox already. Thanks for your remind, ahallicks.
Guys, let's say my client using website builder to create his website. And his style.css is totally BLANK. (just discover this) Meaning he didn't depend on his css stylesheet to help standardize the font-size.
Do I have a better way to solve this?

inko9nito
08-06-2007, 12:38 AM
I'd set the text size as Medium in IE and Normal in Firefox already. Thanks for your remind, ahallicks.
Guys, let's say my client using website builder to create his website. And his style.css is totally BLANK. (just discover this) Meaning he didn't depend on his css stylesheet to help standardize the font-size.
Do I have a better way to solve this?

So does he have the styles defined in the document itself in the header? Or does he still use stuff like <font size="2"> everywhere?

Both of these scenarios are horrible for SEO (search engine optimization) and if he wants to be found in search engines he needs to get rid of inline formatting and embedded styles (in header), and spend some extra time on moving those styles to an external stylesheet.

Not only is it good for SEO, it also makes the file size smaller and therefore makes it load a lot faster.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum