IE9 Typography Issue

[chaseman]

If you look at my blog with IE9: http://www.webprofitideas.com

 

You'll notice that the letter-spacing is WIDER than with Chrome or Firefox, any ideas why and how to fix it?

 

The spaces between the arrows and the lists-items is quite bigger too.

[cssfreakie]

well conditional comments are always a nice option for this, just adjust the letter-spacing for ie9 if you don't know what causes it.

But what could be  the problem (just a wild guess) instead of that you say font-size:100%;

say font-size:1em; or maybe even font-size:16px;

From the top of my head and without verifying the manual (do if your interested) percentages depend on an external standard, so if that external standard changes, the size changes.

 

try to set letter-spacing to 0.04em for IE and see what happens

[chaseman]

I've researched it a little bit, as far as I've understood it, I can only use conditional comments in the HTML document, which means it's not possible to use it inside the CSS file, right?

 

That again means I'll have to use the CSS code inside the HTML document as in-style right?

[cssfreakie]

I am not sure where you searched, but I would never advice someone to use inline style except for html emails nor advice to use css hacks inside a stylesheet.

 

By using conditional comments you can make a tiny extra stylesheet to target a specific browser.

http://www.google.nl/#hl=en&xhr=t&q=conditional+comments&cp=14&pf=p&sclient=psy&biw=1280&bih=715&source=hp&aq=0&aqi=&aql=&oq=conditional+co&pbx=1&fp=9d1033e7128502dd

first link.

keywords in google: conditional comments !

 

inside them you can add instructions varying from javascript script tags, link tags, pretty much anything that is clientside.

if you still have no idea, have a look at the source code of wow-europe.com starting at line 6 or so.

 

p.s. Keep in mind though your stylesheet does not have a backup font incase someones computer does not have that specific font. always add extra fonts that have the same dimensions with a final back up font like sans-serif or serif

[chaseman]

The first entry in your Google query links to this site: http://www.quirksmode.org/css/condcom.html

 

And this is the quote I read:

 

Since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files. I'd have preferred to put the special styles in the CSS file, but that's impossible. You can also put an entire new <link> tag in the conditional comment referring to an extra style sheet.

 

That's why I thought I can only use them inside the HTML document as an in-style.

 

-> But I get it now I can as well simply link to the CSS file itself instead of using inline style, I could have thought of that myself =D

 

 

I've cleaned my CSS files up a bit and I now ONLY have two letter-spacing comments.

 

I've learned to use the conditional comments correctly, and now everything is working as expected, thanks for your help.

[cssfreakie]

from quirksmode:

You can also put an entire new <link> tag in the conditional comment referring to an extra style sheet.

that is exactly what i meant and i think i said.

 

as far as: where does something get it's style from..?, use firebug and see. there is a video on my blog if you never worked with it. or youtube it. just to be sure: firebug is an addon for firefox. chrome, and opera have one build in.

 

IE9 als has a similar inspector as firebug (press F12) you can even go back to IE7 that way and see where does something get it's style from

 

[chaseman]

Thanks a lot, I still didn't get the hang out of Firebug, I will look at your video, maybe that will help me understanding Firebug.

 

EDIT: your video was very helpful, I understand Firebug better now =D

[cssfreakie]

oh just something that is missing in that video, but than again I only had 5 min. at the right side there is a style tab. if you click that you can also select a hover state, pretty useful for menu's and stuff.