homepage Welcome to WebmasterWorld Guest from 54.145.182.50
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Headings smaller in Firefox
Galceran



 
Msg#: 4308661 posted 10:11 am on May 6, 2011 (gmt 0)

h1 thru h4 are 30% smaller in Firefox4 than IE8. Css and html validate. The relevant sections:
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, acronym, cite, em, img, strong, dl, dt, dd, ol, ul, li, form, label, table, caption, tr, th, td {
background-color : white;
color : black;
font-size : 100%;
margin : 0;
outline : 0;
padding : 0;
}
#body {
background-color : #fff;
font-size : 67.5%;
min-width : 976px;
color : #202020;
font-family : Arial, sans-serif;
}
h1, h2, h3, h4, h5, p, hr, ul, li {
font-size : 1em;
padding-bottom : 0.6em;
}
h1 {
font-size : 2em;
line-height : 30px;
}
h2 {
font-size : 1.875em;
}
h3 {
font-size : 1.56em;
}
h3.seguro {
background-color : #fff;
color : #090;
font-size : 1.56em;
margin : 0 0 1mm 0;
vertical-align : top;
}
h3.obit {
background-color : #fff;
color : #6495ed;
font-size : 1.56em;
margin : 0;
}
h4 {
background-color : #fff;
color : #505050;
font-size : 1.25em;
font-weight : 600;
}
h5 {
background-color : #fff;
color : #505050;
font-size : 1em;
font-weight : 500;
}
p {
font-size : 1em;
line-height : 2;
margin-bottom : 10px;
}
#container td.content {
font-size : 1.3em;
padding: 0 20px 10px 0;
width : 466px;
}

container td.content is the centre column where H1 thru H4 are used. If I change this font-size, Heading sizes are OK but the paragraph size is too large.

 

jennyj

5+ Year Member



 
Msg#: 4308661 posted 1:04 pm on May 6, 2011 (gmt 0)

font sizes in table cells are handled differently between different browsers.
If you really must use a table for your layout (there are many good reasons not too), suggest you change your css
td{font-size:1em}
td.content h1{font-size:2em}
td.content h2{font-size:1.875em}
td.content h3{font-size:1.56em}

and so on

Galceran



 
Msg#: 4308661 posted 1:21 pm on May 6, 2011 (gmt 0)

I used em because the W3C Schools recommend setting the default font-size in percent for the body element and em for all other elements. Saying this allows all browsers to zoom or resize the text.

jennyj

5+ Year Member



 
Msg#: 4308661 posted 1:38 pm on May 6, 2011 (gmt 0)

Oh, absolutely use em for your font sizes
the point I was making was that different browsers treat font sizes inside table cells differently, the css I posted should fix the issue

Galceran



 
Msg#: 4308661 posted 2:04 pm on May 6, 2011 (gmt 0)

Sorry I misunderstood you. Not sure how to implement your solution. Does

td{font-size:1em}

Replace the p element or is it on its own line? Same with the headings do the replace existing elements?

Thanks

Galceran



 
Msg#: 4308661 posted 4:48 pm on May 8, 2011 (gmt 0)

Solved. Changed font-size in container td.content to 14px

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4308661 posted 8:12 pm on May 8, 2011 (gmt 0)

Add this to your boilerplate CSS:

table {font-size: inherit; font-family: inherit;}

For most people in most browsers you will never see a difference. But I've met the occasional browser that goes its own way unless you forcibly bring it into line.

Same goes for anything that the browser could conceivably have an opinion on. Look in particular at the default font settings for Opera. You've got to override every one of those.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved