Mark H Posted September 11, 2010 Share Posted September 11, 2010 I have just been testing some sites in IE7, or rather IE8 Compatibility mode.I have corrected some problems, but I have an issue with text size.My headings, such as <h1> appear a much larger size in IE7 than the up-to-date browsers, putting a very different look on the site.I'm thinking that I can solve this by making a specific <h1> CSS rule....would I be right?If I am right, what would be the best measurement to use? I usually use pixels as a text size CSS rule.Also, what size do browsers usually reproduce these? For example, for Heading 1, what size should I set to gain the effect I have now in Firefox?Thanks,Mark. Link to comment Share on other sites More sharing options...
Ingolme Posted September 11, 2010 Share Posted September 11, 2010 The best practise is to use ems for font sizes.Which size you should use for your <h1> elements is up to you. I use 2 or 3 ems.To use ems in an easy way, give the <html> element a font size of 62.5% (that makes 1em be 10 pixels in most modern browsers)When working with ems, remember that nested elements inherit the em size from their ancestors. Link to comment Share on other sites More sharing options...
Mark H Posted September 12, 2010 Author Share Posted September 12, 2010 If I set the <html> element as 62.5%, will that then affect all my other elements? Would I be best to completely re-wite the CSS rules in order to convert everything to ems?Thanks,Mark.P.S. It is my understanding, and I may be wrong, that ems are a recent addition. As I'm quite happy with the rendering in modern browsers, and the problem I have only realtes to IE7, is this still the best approach?Also, am I right in thinking that writing CSS rules for the h tags will solve the problem? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 12, 2010 Share Posted September 12, 2010 a typical default setting for fonts would include*{padding:0;margin:0;} /*zeros all elements padding, and margins*/body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%;}p {margin:1em 5px;}h1, h2, h3, h4, h5, h6{margin:0.9em 5px;}h1 {font-size:2.5em;}h2 {font-size:2.2em;}h3 {font-size:2em;}h4{font-size:1.7em;}h5 {font-size:1.5em;}h6 {font-size:1.2em;}IE margins for paragraph, are different compared to other browsers so zeroing all elements, and starting from scratch, then redefining the margins, makes them identical. Link to comment Share on other sites More sharing options...
Mark H Posted September 12, 2010 Author Share Posted September 12, 2010 Thank you!That's a great help. I will probably need to adjust to my own requirements, but it is very beneficial to have that run-down.Mark. Link to comment Share on other sites More sharing options...
Mark H Posted September 12, 2010 Author Share Posted September 12, 2010 I've made the <h*> rules and it's working fine, but I shall go back and adjust the necessary CSS to do what you suggest and make it more cross-browser friendly.Mark. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.