5 replies [Last post]
Tirath.g
Tirath.g's picture
Offline
newbie
Last seen: 2 years 43 weeks ago
Timezone: GMT-4
Joined: 2011-09-26
Posts: 3
Points: 4

Hi,

i have attached below classes to <body> and <h3> element in my html -
body {
font: 11px arial,helvetica;
}
h3 {
font-family: 'Lucida Sans';
}

When I open my html in IE 8, the text inside <h3> tag has Arial font with size 11 px. But when I open my html in Firefox, the text inside <h3> tag has Lucida Sans with size 11 px.

can anyone help with this? i dnt understand whether font property overrides font family? or why is this coming up differntly in differnt browsers?

pls suggest. thnx in advnce.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 28 weeks 6 days ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

It's not necessarily that

It's not necessarily that font is overridden by 'font-family' but that you are specifying one of the property declarations belonging to 'font' after the initial declaration so yes you should be seeing 'Lucida Sans' on your heading tag. Why IE is not behaving could be for a number of reasons but you haven't shown us what you are working with by way of code so it's difficult to be specific.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tirath.g
Tirath.g's picture
Offline
newbie
Last seen: 2 years 43 weeks ago
Timezone: GMT-4
Joined: 2011-09-26
Posts: 3
Points: 4

hi, thanks for looking at

hi,
thanks for looking at this. I have pasted a test html page. If you look at this page in IE and Firefox, you will see the differnce.

Test Page

body {
font: 11px arial;
}
h3 {
font-family: 'Lucida Sans';
}

This is Test Page to check rendering.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 28 weeks 6 days ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

That is NOT! a test page

That is NOT! a test page Wink try creating a proper test page and then see gow things perform.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tirath.g
Tirath.g's picture
Offline
newbie
Last seen: 2 years 43 weeks ago
Timezone: GMT-4
Joined: 2011-09-26
Posts: 3
Points: 4

sorry, i m new to thi sforum,

sorry, i m new to thi sforum, i do not know that html code is not rendereed exactly same. whatever html code i paste here, is rendered by this browser, may be not all html tags/code is supported in this forum. I replaced all "<" with "[" and ">" with "]".can i request to replace "[" with "<" and "]" with ">", that should be a valid html

Edited by Tony, just type the markup and wrap it in code tags

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
body {
font: 11px arial;
}
h3 {
font-family: 'Lucida Sans';
} 
</style>
</head>
<body>
<br />
<h3><a name="This_is_Test_Page_to_check_rendering">This is Test Page to check rendering.</a></h3>
</p><p>
</body>
</html> 

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 1 year 31 weeks ago
Adelaide, Oz
Timezone: GMT+10.5
Joined: 2007-06-10
Posts: 1596
Points: 340

.

Quote:

When I open my html in IE 8, the text inside tag has Arial font with size 11 px. But when I open my html in Firefox, the text inside tag has Lucida Sans with size 11 px.

I got caught out on this recently so I'd advise checking your browser defaults/preferences Wink

Also please not that 11px is NOT the equivalent of what you see as 11pt in a word processing program!

11px is the equivalent of 7.5pt. Try that in your word program and see if it's comfortable to read a whole page of text with your monitor an arm's length away.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile