Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.

    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!
    Last edited by jessicalim14; 07-26-2007 at 10:31 AM.

  • #2
    New Coder
    Join Date
    Jul 2005
    Location
    TX
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try creating a separate stylesheet specifically for IE and fixing the size there. Add:

    Code:
    <!--[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?
    Last edited by inko9nito; 07-26-2007 at 04:49 AM.
    Life is a game. The plot sucks but the graphics are awesome!

  • #3
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    My font-sizes are exactly the same when I view that site and those 4 images you gave are the same too?
    .
    .

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #5
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    You shouldn't set it with pixels though cause IE users won't be able to resize. Use 'em' or '%'.
    .
    .

  • #6
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by inko9nito View Post
    Try creating a separate stylesheet specifically for IE and fixing the size there. Add:

    Code:
    <!--[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.

  • #7
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    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.
    .
    .

  • #8
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    New Coder
    Join Date
    Jul 2005
    Location
    TX
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Jutlander View Post
    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.
    Life is a game. The plot sucks but the graphics are awesome!

  • #10
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #11
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #12
    New Coder
    Join Date
    Jul 2005
    Location
    TX
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jessicalim14 View Post
    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.
    Life is a game. The plot sucks but the graphics are awesome!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •