SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    West Des Moines, IA
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question about fonts between browsers

    Here's a quick question. I'm wondering why I can't get certain fonts to look the same between browsers. Here's the CSS I'm using:

    font: xx-large "Verdana", Arial, Helvetica, sans-serif,;
    color: #ffff00;
    font-weight: bold;


    Basically, I want this font to be very big, yellow and bold. It looks fine in IE, but in FireFox, the font is very small and not bold. It still stays yellow, though.

    Can someone enlighten me to a better way to specifically indicate the same font size and style between different browsers? Is there a specifid way to code things so it will look the same throughout?

    Also, is there a way to get all that font information on one line in CSS? Seems silly that I have to use three.

    Everything else in CSS makes some degree of sense to me, but I still have the hardest time with fonts...

    Thanks in advance!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Mozilla and ie6 are exactly the same size unless you are using ie in quirks mode when the font size will be bigger.

    Ie5, ie5.5. (and ie6 in quirks mode) are exactly one keyword size out and will render the next size up to what they should.

    If you have a look in FAQ sticky thread this is explained in the section under text-sizing.

    Unfortunately, text sizing is more complicated than it needs to be and does cause quite a lot of headaches. For one of the most thorough invesigations into font-sizing have a look here:

    http://www.thenoodleincident.com/tut...x_lesson/font/

    Hope that helps.

    Paul

    BTW you can set the font weight in the font shorthand but not the colour.

  3. #3
    SitePoint Addict Synaesthesiac's Avatar
    Join Date
    Aug 2004
    Posts
    359
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tom Brazelton
    I'm wondering why I can't get certain fonts to look the same between browsers.
    This might be a shot in the dark, but instead of:

    font: xx-large "Verdana", Arial, Helvetica, sans-serif;
    color: #ffff00;
    font-weight: bold;

    Try this:

    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #ffff00;

    The main difference here, is you would be assigning an exact value to each property, rather than combining properties (font family and size in one property) and using non-exact values which, in my experience, just causes trouble betwixt browsers.

    Quote Originally Posted by Tom Brazelton
    Also, is there a way to get all that font information on one line in CSS? Seems silly that I have to use three.
    You can put the entire declaration in one line, separating the properties by semi-colons. Giving each property its own line just makes it easier to reference, but isn't necessary in order for it to work.

    i.e.:

    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #ffff00;

    is the same as:

    font-family: verdana, arial, helvetica, sans-serif; font-size: 20px; font-weight: bold; color: #ffff00;

    Good luck!

    Daniel
    Danielion
    Imagine a world without hypothetical scenarios...

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I just thought it worth mentioning that if you set the font-size in pixels then obviuosly it will be more or less the same between browsers but then users of IE will be unable to change the size with the browser controls as theyw would with keywords or ems/%.


    You can put the entire declaration in one line, separating the properties by semi-colons. Giving each property its own line just makes it easier to reference, but isn't necessary in order for it to work.
    You've missed the point there lol

    You can set all the font properties in one line using the shorthand of font.

    e.g.
    Code:
    h1 {font: bold italic small caps 150%/1.2 Times, serif}
    The bare minimum when using font is the font-size and the font family. When using the shorthand version any keyword values not given are reset to default.

    However I find that ir can be a little confusing merging them all together and prefer to specify them individually.

    Paul


Bookmarks

Posting Permissions

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