Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

Using CSS to achieve consistent font weight across browsers?


  • Please log in to reply

#1
stearmandriver

stearmandriver

    Member

  • Member
  • PipPip
  • 67 posts
Hi,

I was wondering - why does the font weight in IE always seem to be a bit heavier than Mozilla or Netscape? I assume this has something to do with the default way IE renders text, but how to standardize it? For instance, I'm working on a simple site for my mother-in-law:
http://www.thesuligo.../bellmarketing/
The style sheet is here:
http://www.thesuligo...marketstyle.css

It's obviously just being designed, and is quite incomplete. I'm just looking for an overall "look" now. I like the weight at which IE displays then font - very readable. Mozilla / Netscape display it lighter and less prominent. When I up the font weight in my style sheet, it looks good in Mozilla / Netscape but is then too heavy in IE. Is there a way to standardize font weight across browsers? The only way I can think of is to use IE conditional statements to call different style sheets based on whether a visitor is using IE or something else. This seems kinda bloated. Surely there's a better way?

Sorry if this is a dumb question... if you couldn't tell, I'm self-taught at this.

One more question, if anyone knows: is there a way to turn a block of text into REALLY fixed-sized font? Absolute size in px still seems resizable in some browsers. I understand that, generally speaking, there are accessibility reasons not to do this... but say you really wanted ABSOLUTE, non-scalable font... can it be done short of graphics?

Thanks for looking...
Joe
  • 0

Advertisements


#2
Ax238

Ax238

    Tech Staff

  • Technician
  • 1,323 posts
Hello Joe,

The only dumb questions are the ones you don't ask...

why does the font weight in IE always seem to be a bit heavier than Mozilla or Netscape? I assume this has something to do with the default way IE renders text, but how to standardize it?

Each browser has its own specific default CSS settings, which can sometimes make it difficult for developers to build websites that maintain the same appearance across all browsers.

You can try Yahoo's CSS reset, which should do what you need:
Yahoo! UI Library: Reset CSS

is there a way to turn a block of text into REALLY fixed-sized font?

I don't think so, at least not the way you are thinking. You have already pointed out the reasons why and provided an alternative solution, so I will not get into that. You may find more help at the following link:
Specifying fonts: Pixel or percentage?

Regards,

Ax
  • 0

#3
stearmandriver

stearmandriver

    Member

  • Topic Starter
  • Member
  • PipPip
  • 67 posts
Hey Ax,

Thanks for the reply. I tried the Yahoo reset, and unfortunately it didn't help. Looking at the CSS, it looks like it just resets all margins and padding to 0, and basically removes any default styling from type, lists, links etc. Good stuff, but would it really be any different than just setting those attributes in your own external style sheet? (Not rhetorical; I really don't know.)

Anyhow, after attaching that sheet to my index page, I had the same problem with font weight differences in IE vs. the other browsers. I'm thinking I'll need to use the IE conditional statements to call one style sheet for IE, and one for other browsers, so I can up the font weight in the sheet for other browsers, and leave IE alone. That, or lose the textured background from the column that holds most of the text, so the lighter font isn't really a distraction (I know, this is probably what I SHOULD do, but mother-in-law likes it and we all know how that goes).

As I'm trying to use this project as a learning experience, and not just something to finish up quickly, I'm curious: does anyone see any real negatives with using the IE conditional statements to call a different style sheet for IE? It's only a couple extra lines in the XHTML that would probably just look like comments, and therefore be ignored, by everything but IE right? Specifically, does anyone see any negatives to SEO, or site performance, doing things this way?

Thanks for the input...
Joe
  • 0

#4
Ax238

Ax238

    Tech Staff

  • Technician
  • 1,323 posts
Hey Joe,

Sorry to hear that didn't work out for you. No, it wouldn't be any different than setting those items in your own stylesheet. What's nice is you can have a browser reset stylesheet that you can include if you want, where you want. Here's another one you could try:
Eric's Archived Thoughts: Reset Styles

As far as conditional statements, they should work fine. Microsoft does promote the use of these statements in some of the MSDN articles I have read. You shouldn't experience any negative effects on SEO or otherwise.

Regards,

Ax
  • 0

#5
stearmandriver

stearmandriver

    Member

  • Topic Starter
  • Member
  • PipPip
  • 67 posts
Great, thanks.

I set it up so the "regular" stylesheet is called, the the IE conditional statement calls the IE stylesheet if the browser is IE. This works great, and has allowed me to really standardize the appearance of the site. Little things I never noticed, like differences in margins or padding, now match perfectly.

Thanks again...
  • 0

#6
Ax238

Ax238

    Tech Staff

  • Technician
  • 1,323 posts
Great, glad you got it working! It was a pleasure assisting you.
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP