Member Avatar for yaragalla_mural

Hi i have "font-size" defined in my css. This is working fine with all other browsers but it have a different appearence in IE9. So I want to avoid this style when the browser is IE else it has to work for the rest of the browsers. How to achieve this?

  • 4 Contributors
  • 9 Replies
  • 873 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by Member #46692

Dani AI

Generated

Browsers and operating systems use different font renderers and fallbacks, so a rule that looks “off” in one browser usually means the page is relying on whatever serif font the OS supplies rather than a controlled stack. was right to push for diagnosing the root cause instead of hiding styles for a specific browser; ’s quick fix of picking a single installed face shows the symptom can be removed, but it also highlights why cross‑platform testing matters. ’s reset suggestion was a reasonable check — when that didn’t change anything, the issue pointed at font selection and rendering, not a reset.

A practical troubleshooting checklist: inspect the computed font in the browser devtools to confirm which file the browser is actually using; check for inherited rules or media queries that change size/weight; ensure the document is in standards mode (valid DOCTYPE) and not in compatibility/quirks mode; test at 100% zoom and with typical OS font‑smoothing settings; and verify the font weight you ask for is actually available (browsers can synthesize weights and that alters appearance).

For a robust solution prefer a short, realistic font stack and explicit metrics (numeric weight and a unitless line-height) or a hosted webfont if consistent rendering across platforms is required. Use progressive enhancement rather than browser hacks; reserve browser-specific adjustments for rare cases and apply them by a single class or server-side detection if unavoidable.

Example of a safer approach (replace the family names with ones you choose):

.label {
  font-family: "Georgia", "Palatino Linotype", "Times", serif;
  font-weight: 700;
  line-height: 1.25;
}

Finally, validate the appearance on the target OS/browser combinations (virtual machines or remote testing services) so the chosen stack gives acceptable results for the audience rather than just the developer’s machine.

Recommended Answers

All 9 Replies

Member Avatar for Assembly Guy

According to this, it is fully supported in IE9. Could you please post the line of code you're using it in so we can help you better?

Member Avatar for yaragalla_mural

I am not saying that IE does not support but it is havig a different look than other browsers so how to hide this style only for ie?

font-size: 20px;

I also have read the following about downside comments but they are also not working. I tried them in my css file.

Click Here

Member Avatar for Assembly Guy

Those comments you mentioned are intended to be put in with HTML, not CSS. I would suggest tracking down why it's not looking the same in IE as other browsers, this would find the root cause, rather than just putting an extra layer of complication into your web pages what with the conditional statements and all.

Member Avatar for yaragalla_mural

ok. Even i dont like putting those comments. The following is the complete css that i am using for text.

.label{ 
    font-family: serif;
    font-weight: bold;
    font-size: 20px;    
}

This css have different appearence in chrome and mozilla. In IE it is pretty bad. If anybody have an idea on dealing this, please help me out.

Member Avatar for paulkd

You might need a css reset.

Member Avatar for yaragalla_mural

will try that and will let you know.

Member Avatar for yaragalla_mural

No it is not css reset. It did not make any difference. If anybody have a solution please help.

Member Avatar for yaragalla_mural

instead of using geniric familes like "serif" when used specific "font family" like "Times New Roman" everything went fine. All the look and feel have been fixed in all browsers including IE. Thanks for all your time.

Member Avatar for Member #46692

I stopped reading at 'times new roman' and 'everything looks fine.'

But on a serious note, 'serif' will pick up the first serif font available. It may look all ok now on your machine, but other users say on a linux systems may not have 'times new roman' so it will look different.

In general this is ok. If you don't mind using a little more bandwidth you can embed google fonts. This seems to be all the rage at the moment but even these can look different across different browsers and OS's

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.