Text cross browser issue

Question

I have begun creating a new website and this time I really want to make sure I get cross-browser issues dealt with because I see this as being extremely important for my own development skills.

In both Chrome & Firefox, the text I have styled appears as I would expect it to style. This is not the case in IE. In fact what appears in IE is not too different to the font I am writing in here.

Below is the code in my css..

h.title{
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif;
color:#060;
font-size:30px;
}

Below is html

 <h class="title">Contact</h>

View in Chrome and Firefox..

view in chrome

View in IE

view in IE

Any help/explanations would be appreciated many thanks.

Do you mind sharing at least a screenshot so that we know what problem you are seeing? — Terry, Feb 26 '13 at 22:35
Is it a typo in your question? There's actually no HTML element ``. So `h.title` shouldn't do anything. — insertusernamehere, Feb 26 '13 at 22:41
Just updated the post as you probably have seen, images and html added — ManWithNoName, Feb 26 '13 at 22:53

score 0 · Answer 1 · edited May 23 '17 at 12:01

0

Many of the fonts you are trying to use in IE may not be supported by IE. Use @font-face (Google will give you links to loads of tutorials), and read the answer to this question for good advice and tools for using web fonts with IE.

edited May 23 '17 at 12:01

Community

1
1

answered Feb 26 '13 at 22:40

br3w5

4,403
5
33
42

Text cross browser issue

1 Answers1