Font showing incorrectly in Internet Explorer: HTML 5, CSS, Internet Explorer

by: ack154Posted on 2009-10-28 at 06:47:19ID: 25683153

What are you using to declare your font sizes in CSS? There can be rendering differences between using "px" or "em" or other sizes even. I believe using "em" is a little more proper, but perhaps using "px" will even it out?

by: renazonsePosted on 2009-10-28 at 06:52:16ID: 25683197

You probably either need to completely remove the font-size 100% setting from here:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%; 
}

Or change it to something like 98%...IE reads this differently from other browsers. As ack154 said "em" is the best way to get your font sizes to look the same in all browsers.

by: rafique12Posted on 2009-10-28 at 08:34:01ID: 25684396

This was actually one of the first things we tried but it didn't work! I have also removed the CSS file from the template but it still shows incorrectly. In addition, i copied the page source and previewed it in I.E using my localhost and still the problem still occurs.

Here is the code:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> 
<head> 
<title>Tamedo - Tamedo Home</title> 
<base href="http://www.tamedo.com/" /> 
	<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
	
	<meta name="description" content="" /> 
	<meta name="keywords" content="" /> 
 
    <meta name="robots" content="all" /> 
    <meta name="robots" content="index, follow" /> 
    <meta name="revisit-after" content="7 days" /> 
    <meta name="version" content="1.0" /> 
    <meta name="copyright" content="" /> 
    <link rel="shortcut icon" href="favicon.ico" /> 
 
 
	<!-- Cascading Style Sheets --> 
	<link rel="stylesheet" type="text/css" media="screen" href="templates/portal/assets/css/screen.css" /> 
 
	
	<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" media="screen" href="templates/portal/assets/css/ie.css" />
	<![endif]--> 	
 
    <!-- JavaScripts --> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
    <script type="text/javascript" src="templates/portal/assets/js/jquery.innerfade.js"></script> 
	<script type="text/javascript" src="templates/portal/assets/js/jquery.newsticker.js"></script> 
	<script type="text/javascript" src="templates/portal/assets/js/jquery.functions.js"></script> 
	
	<!-- Lightbox --> 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js"></script> 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js"></script> 
	<script type="text/javascript" src="templates/portal/assets/js/lightview.js"></script> 
 
	<!--[if IE 6]>
	<script src="assets/js/pngfix.js"></script>
	<![endif]--> 	
</head> 
<body> 
 
<!-- container --> 
<div class="container"> 
 
	<!-- quick navigation --> 
	<div class="quicknav"> 
		
		<div class="wrapper"> 
	
			<div class="clientlogin"> 
			<a href="login.html" title=" :: :: fullscreen: true" rel="iframe" class="lightview">Client Login</a>			
			
			
			</div> 
		
		</div> 
	
	</div> 
	<!-- // quick navigation --> 
 
	<!-- wrapper --> 
	<div class="wrapper"> 
		
		<!-- header --> 
		<div class="header clearfix"> 
				
			<h1><a href="#">Logo Here</a></h1> 
		
			<ul class="nav"> 
				<li><a href="#">Web Hosting</a></li> 
				<li><a href="#">Domain Names</a></li> 
				<li><a href="#">Services</a></li> 
				<li><a href="#">Support</a></li> 
				<li><a href="#">About Us</a></li>				
			</ul> 
				
		</div> 
		<!-- // header --> 
		
		<!-- content --> 
		<div class="content-top"></div> 
		<div class="content"> 
			
			<!-- main content --> 
			<div class="main-content clearfix"> 
				
				<!-- post it! --> 
 
				<!-- // post it! --> 
				
				<!-- page title --> 
				<div class="title clientarea"> 
 
					<h1>Tamedo Home</h1> 
					<h2><a href="index.php">Tamedo Home</a><h2> 
				
				</div> 
				<!-- // page title --> 
								
				<!-- sidebar --> 
				<div class="sidebar"> 
				
  <ul class="subnav"> 
      <li><a href="index.php" title="Tamedo Home">Tamedo Home</a></li> 
      <li><a href="clientarea.php" title="Client Area">Client Area</a></li> 
      <li><a href="announcements.php" title="Announcements">Announcements</a></li> 
      <li><a href="knowledgebase.php" title="Knowledgebase">Knowledgebase</a></li> 
      <li><a href="submitticket.php" title="Support Tickets">Submit Ticket</a></li> 
      <li><a href="downloads.php" title="Downloads">Downloads</a></li> 
      <li><a href="cart.php" title="Order">Order</a></li> 
    </ul> 
	
 
	
	
					
 
				</div> 
				<!-- // sidebar --> 
				
<!-- right column --> 
<div class="col-right"> 
<table width="100%" border="0" align="center" cellpadding="10" cellspacing="0"> 
  <tr> 
    <td><div align="center"><a href="clientarea.php"><img src="templates/portal/images/clientarea.png" border="0" alt="" /></a></div></td> 
    <td width="50%"><strong><a href="clientarea.php">Client Area</a></strong><br /> 
      View & update your account details</td> 
    <td><div align="center"><a href="announcements.php"><img src="templates/portal/images/announcements.png" border="0" alt="" /></a></div></td> 
    <td><strong><a href="announcements.php">Announcements</a></strong><br /> 
      View our latest news & announcements</td> 
  </tr> 
  <tr> 
    <td><div align="center"><a href="submitticket.php"><img src="templates/portal/images/submitticket.png" border="0" alt="" /></a></div></td> 
    <td><strong><a href="submitticket.php">Submit Ticket</a></strong><br /> 
      Submit a trouble ticket</td> 
    <td><div align="center"><a href="downloads.php"><img src="templates/portal/images/downloads.png" border="0" alt="" /></a></div></td> 
    <td><strong><a href="downloads.php">Downloads</a></strong><br /> 
      View our library of downloads</td> 
  </tr> 
  <tr> 
    <td><div align="center"><a href="supporttickets.php"><img src="templates/portal/images/supporttickets.png" border="0" alt="" /></a></div></td> 
    <td><strong><a href="supporttickets.php">Support Tickets</a><br /> 
    </strong>View and respond to existing tickets</td> 
    <td><div align="center"><a href="knowledgebase.php"><img src="templates/portal/images/knowledgebase.png" border="0" alt="" /></a></div></td> 
    <td width="50%"><strong><a href="knowledgebase.php">Knowledgebase</a></strong><br /> 
      Browse our KB for answers to FAQs</td> 
  </tr> 
  <tr> 
    <td><div align="center"><a href="affiliates.php"><img src="templates/portal/images/affiliates.png" border="0" alt="" /></a></div></td> 
    <td><strong><a href="affiliates.php">Affiliates</a></strong><br /> 
      Join our affiliate program or view earnings</td> 
    <td><div align="center"><a href="cart.php"><img src="templates/portal/images/cart.png" border="0" alt="" /></a></div></td> 
    <td><strong><a href="cart.php">Order</a></strong><br /> 
      Place a new order with us</td> 
  </tr> 
  <tr> 
    <td><div align="center"><a href="contact.php"><img src="templates/portal/images/contact.png" border="0" alt="" /></a></div></td> 
    <td><strong><a href="contact.php">Pre-Sales Contact Us</a></strong><br /> 
      Place any pre-sales enquiries here</td> 
    <td><div align="center"><a href="domainchecker.php"><img src="templates/portal/images/domainchecker.png" border="0" alt="" /></a></div></td> 
    <td><strong><a href="domainchecker.php">Domain Checker</a></strong><br /> 
      Check the availability of a domain</td> 
  </tr> 
  <tr> 
    <td><div align="center"><a href="serverstatus.php"><img src="templates/portal/images/serverstatus.png" border="0" alt="" /></a></div></td> 
    <td><strong><a href="serverstatus.php">Server Status</a></strong><br /> 
      View live status info for our servers</td> 
    <td><div align="center"><a href="networkissues.php"><img src="templates/portal/images/networkissues.png" border="0" alt="" /></a></div></td> 
    <td><strong><a href="networkissues.php">Network Issues</a></strong><br /> 
      Read about current and scheduled network outages</td> 
  </tr> 
</table> 
<h2>Latest Announcements</h2> 
<p>31/07/2009 - <a href="announcements/1/This-is-a-test-announcement-lets-see-how-this-works.html">This is a test announcement, lets see how this works?</a><br /> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque...</p> 
 
</div> 
<!-- // right column --> 
 
			</div> 
			<!-- // main content --> 
											
		</div> 
		<div class="content-btm"></div> 
		<!-- // content --> 
		
		<!-- footer --> 
		<div class="footer">			
			<p><a href="#">Home</a> &#183; <a href="#">Web Hosting</a> &#183; <a href="#">Domain Names</a> &#183; <a href="#">Services</a> &#183; <a href="#">Support</a> &#183; <a href="#">About Us</a></p> 
		</div> 
		<!-- // footer --> 
	
	</div> 
	<!-- // wrapper --> 
	
</div> 
<!-- // container --> 
 
</body> 
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:

Select all Open in new window

by: rafique12Posted on 2009-10-28 at 08:37:50ID: 25684436

If you delete the first body tag down to the first sidebar the problem goes away! This is very confusing since there is no CSS file attached!!!!!!!!

by: renazonsePosted on 2009-10-28 at 08:39:06ID: 25684456

Apply this just before </head> and it fixes it:

<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { font-size: 98%; }
</style>

by: renazonsePosted on 2009-10-28 at 08:43:05ID: 25684512

I see now...there's an open <h2> that's applying it to the page:

                        <div class="title clientarea">

                              <h1>Tamedo Home</h1>

                              <h2><a href="index.php">Tamedo Home</a><h2> 

                        </div>

by: rafique12Posted on 2009-10-28 at 09:52:01ID: 31646952

I thought could only be a browser issue but in fact its human error. Thankyou for your help!

Question

Font showing incorrectly in Internet Explorer

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

HTML 5

CSS

Internet Explorer

Hypertext Markup Language (HTML)

Cascading Style Sheets (CSS)

Internet Explorer Web Browser

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press