font sizes do not render properly in IE

Question

shanenin 0 Posting Whiz in Training

13 Years Ago

I had a website that was made for me a while back. I am trying to update the info. I am doing my best to make changes to the code. It renders fine in all the major browsers except IE. This page in particular does not work, http://brighteyedcomputer.com/test/site/contact . The font size gets progressively larger as it goes down the page.

this is the code for the html doc

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bright-Eyed Computer</title>
<meta name="keywords" content="computer, repair, computer repair, networking, spyware removal, upgrading, Hardware installation, web design, website design, Rochester, Minnesota, MN" />
<meta name="description" content="A computer repair business based in Rochester, Minnesota that specializes in general computer repair, upgrades, networking, Operating system installation, and web site design." /> 
<meta name="ROBOTS" content="ALL"/>
<link rel="stylesheet" href="emx_nav_left2.css" type="text/css" />
<script type="text/javascript" src="wind.js"></script>
</head>
<body>
<div class="skipLinks">skip to: <a href="#content">page content</a> | <a href="#pageNav">links on this page</a> | <a href="#globalNav">site navigation</a> | <a href="#siteInfo">footer (site information)</a> </div>
<div id="masthead">


  <img src="header.jpg" alt="" /></div>
  
<!-- end masthead -->
<div id="pagecell1">
  <!--pagecell1-->
  <img alt="" src="tl_curve_white.gif" height="6" width="6" id="tl" /> <img alt="" src="tr_curve_white.gif" height="6" width="6" id="tr" />
  
  
  <div id="pageNav">
    <div id="sectionLinks"> <a href="index.html">Home</a> <a href="virus.html">Virus/Spyware Removal</a> <a href="price.html">Computer Repair</a>  <a href="price.html">Pricing</a><a href="contact.html">Contact Us</a></div>
 </div>  <div id="content">
    <div class="feature"> 
<h3>Come See Us!</h3>  
<h2>832 7th St NW, Rochester, MN (next to the Ye Olde Butcher Shop) <h2>
<h3>Call Us Today! </h3> 
<h2>(507)252-0334<h2>
<h3>Send Us An Email! </h3>
<h2><a href="mailto:info@brighteyedcomputer.com">info@brighteyedcomputer.com</a> <h2>
<h3><b>Business Hours:</b></h3>
<h2>9AM(We start answering the phone at 8AM) to 6PM Monday Through Friday</h2>
<h2>10AM to 3PM Saturday</h2>
<h2><b>Please call anytime, anyday! We do our best to answer phones and provide service after hours</b></h2>
    </div>
	<div class="story"></div>
	
  </div>
  <div id="siteInfo"><center><a href="about.html">About Us</a> | <a href="javascript:na_open_window('win', 'privacy.html', 0, 0, 400, 400, 0, 0, 0, 1, 0)">Privacy Policy</a> | <a href="contact.html">Contact Us</a> | <a href="javascript:na_open_window('win', 'code.htm', 0, 0, 400, 400, 0, 0, 0, 1, 0)">Coding Rights</a>  | &copy;2006 Bright-Eyed Computer</center> </div>
</div>
<!--end pagecell1-->
<br />

</body>
</html>

this is the css doc it uses:

/***********************************************/
/* emx_nav_left.css                            */
/* Use with template Halo_leftNav.html         */
/***********************************************/

/***********************************************/
/* HTML tag styles                             */
/***********************************************/
body{
	line-height: normal;
	margin: 0px;
	padding: 0px;
	width: auto;
	height: auto;
	float: inherit;
	clear: both;
	font-variant: normal;
	background-color: #00CCFF;
	margin-top: 10px;
}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
	color: #005FA9;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}

/************** header tag styles **************/

h1{
 font: bold 120% Arial,sans-serif;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

h2{
 font: bold 114% Arial,sans-serif;
 color: #006699;
 margin: 0px;
 padding: 0px;
}

h3{
 font: bold 100% Arial,sans-serif;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

h4{
 font: 100% Arial,sans-serif;
 color: #333333;
 margin: 0px;
 padding: 0px;
}

h5{
 font: 100% Arial,sans-serif;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}


/*************** list tag styles ***************/

ul{
	list-style-type: square;
	left: auto;
	font: bold 120% Arial,sans-serif;
    color: #334d55;
    margin: 0px;
    padding: 0px;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

/********* form and related tag styles *********/

form {
	margin: 0;
	padding: 0;
}

label{
 font: bold 1em Arial,sans-serif;
 color: #334d55;
}
				
input{
font-family: Arial,sans-serif;
}

/***********************************************/
/* Layout Divs                                 */
/***********************************************/
#pagecell1{
	position:absolute;
	top: 253px;
	left: 20px;
	right: 2%;
	width:95.6%;
	background-color: #ffffff;
}

#tl {
	position:absolute;
	top: -1px;
	left: -1px;
	margin: 0px;
	padding: 0px;
	z-index: 100;
}

#tr {
	position:absolute;
	top: -1px;
	right: -1px;
	margin: 0px;
	padding: 0px;
	z-index: 100;
}

#masthead{
	/*position: absolute;*/
	top: 0px;
	margin-left: auto;
	margin-right: auto;
	width:656px;
	height: 158px;
	border-top-color: #00CCFF;
	border-bottom-color: #00CCFF;
	background-color: #00CCFF;
	border-color: #00CCFF;
	outline-color: #00CCFF;
	
}

#pageNav{
	float: left;
	width:178px;
	padding: 0px;
	background-color: #F5f7f7;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	font: small Verdana,sans-serif;
}

#content{
	padding: 0px 10px 0px 0px;
	margin:0px 0px 0px 178px;
	border-left: 1px solid #ccd2d2;
}


/***********************************************/
/* Component Divs                              */
/***********************************************/
#siteName{
	margin: 0px;
	padding: 16px 0px 8px 0px;
	color: #ffffff;
	font-weight: normal;
}

/************** utility styles *****************/

#utility{
	font: 75% Verdana,sans-serif;
	position: absolute;
	top: 16px;
	right: 0px;
	color: #919999;
}

#utility a{
	color: #ffffff;
}

#utility a:hover{
	text-decoration: underline;
}

/************** pageName styles ****************/

#pageName{
	padding: 0px 0px 14px 10px;
	margin: 0px;
	border-bottom:1px solid #ccd2d2;
}

#pageName h2{
	font: bold 175% Arial,sans-serif;
	color: #000000;
	margin:0px;
	padding: 0px;
}

#pageName img{
	position: absolute;
	top: 0px;
	right: 6px;
	padding: 0px;
	margin: 0px;
}

/************* globalNav styles ****************/

#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url(glbnav_background.gif);
}

#globalNav img{
	margin-bottom: -4px;
 
}

#gnl {
	position: absolute;
	top: 0px;
	left:0px;
}

#gnr {
	position: absolute;
	top: 0px;
	right:0px;
}

#globalLink{
	position: absolute;
	top: 6px;
	height: 22px;
	min-width: 640px;
	padding: 0px;
	margin: 0px;
	left: 10px;
	z-index: 100;
}


a.glink, a.glink:visited{
  	font-size: small;
  	color: #000000;
	font-weight: bold;
	margin: 0px;
	padding: 2px 5px 4px 5px;
	border-right: 1px solid #8FB8BC;
}

a.glink:hover{
  	background-image: url(glblnav_selected.gif);
	text-decoration: none;
}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{
	position: absolute;
	top: 84px;
	left: 0px;
	/*width: 100%;*/
	min-width: 640px;
	height: 20px;
	padding: 0px 0px 0px 10px;
	visibility: hidden;
	color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
	font-size: 80%;
	color: #ffffff;
}

.subglobalNav a:hover{
	color: #cccccc;
}

/*************** search styles *****************/

#search{
	position: absolute;
	top: 5px;
	right: 10px;
	z-index: 101;
}

#search input{
  font-size: 70%;
  margin: 0px  0px 0px 10px;
 }
 
#search a:link, #search a:visited {
	font-size: 80%;
	font-weight: bold;
	
}

#search a:hover{
	margin: 0px;
}


/************* breadCrumb styles ***************/

#breadCrumb{
	padding: 5px 0px 5px 10px;
	font: small Verdana,sans-serif;
	color: #AAAAAA;
}

#breadCrumb a{
	color: #AAAAAA;
}

#breadCrumb a:hover{
	color: #005FA9;
	text-decoration: underline;
}


/************** feature styles *****************/

.feature{
	padding: 20px 0px 10px 10px;
	font-size: 80%;
	min-height: 200px;
	height: 200px;
}
html>body .feature {height: auto;}

.feature h1{
	font: bold 175% Arial,sans-serif;
	color: #000000;
	padding: 0px 0px 5px 0px;
}

.feature h3{
	font: bold 150% Arial,sans-serif;
	color: #000000;
	padding: 0px 0px 5px 0px;
}


.feature h2{
	font:  115% Arial,sans-serif;
	color: #000000;
	padding: 0px 0px 5px 0px;
}



.feature img{
	float: left;
	padding: 0px 10px 0px 0px;
}




/*************** story styles ******************/

.story {
	padding: 10px 0px 0px 10px;
	font-size: 90%;
}

.story h3{
	font: bold 125% Arial,sans-serif;
	color: #000000;
}

.story p {
	padding: 0px 0px 10px 0px;
}

.story a.capsule{
	font: bold 1em Arial,sans-serif;
	color: #005FA9;
	display:block;
	padding-bottom: 5px;
}

.story a.capsule:hover{
	text-decoration: underline;
}

td.storyLeft{
	padding-right: 12px;
}


/************** siteInfo styles ****************/

#siteInfo{
	clear: both;
	border-top: 1px solid #cccccc;
	font-size: small;
	color: #cccccc;
	padding: 10px 10px 10px 10px;
	margin-top: 0px;
}

#siteInfo img{
	padding: 4px 4px 4px 0px;
	vertical-align: middle;
}


/************ sectionLinks styles **************/

#sectionLinks{
	margin: 0px;
	padding: 0px;

}

#sectionLinks h3{
	padding: 10px 0px 2px 10px;
	border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
	display: block;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #cccccc;
	background-image: url(bg_nav.jpg);
	font-weight: bold;
	padding: 3px 0px 3px 10px;
	color: #21536A;
}

#sectionLinks a:hover{
	border-top: 1px solid #cccccc;
	background-color: #DDEEFF;
	background-image: none;
	font-weight: bold;
	text-decoration: none;
}


/************* relatedLinks styles **************/

.relatedLinks{
	margin: 0px;
	padding: 0px 0px 10px 10px;
	border-bottom: 1px solid #cccccc;
}

.relatedLinks h3{
	padding: 10px 0px 2px 0px;
}

.relatedLinks a{
	display: block; 
}


/**************** advert styles *****************/

#advert{
	padding: 10px;
}

#advert img{
	display: block;
}

/********************* end **********************/

web-design

5 Contributors
6 Replies
166 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by drjohn

All 6 Replies

eno_diputs 0 Newbie Poster

13 Years Ago

On line 32:

<h2>832 7th St NW, Rochester, MN (next to the Ye Olde Butcher Shop) <h2>

The ending h2 tag was incorrect, it should've been:

<h2>832 7th St NW, Rochester, MN (next to the Ye Olde Butcher Shop) </h2>

Check if this fixes everything, if there's still a problem, post again or check out the html validator

http://validator.w3.org

eno_diputs 0 Newbie Poster

13 Years Ago

I just checked and apparently, lines 34 and 36 have the same problem: incomplete closing h2 tag.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Cool&Awesome 7 Junior Poster in Training · Answer 1 · 2010-11-28T20:26:37+00:00

Hi Shanenin,

I see in css that for most of the text containing tags font-size is not defined in the first place, and where it is defined, it's in relative values (small, 90%) so pretty much everything about sizing is left to browsers to decide, and we all know IE...

So try defining some precise font-size in px.

If that doesn't help try using IE conditional comments (easy to google out, even easier to use) to give IE specific instructions on how to handle fonts.

VulcanDesign 0 Light Poster · Answer 2 · 2010-11-28T20:53:03+00:00

Also, that code is really very messy. Don't have all those headers. Try having maybe ONE header tag and making the other titles bold. It will clean things up.

shanenin 0 Posting Whiz in Training · Answer 3 · 2010-11-28T23:44:38+00:00

Thanks very much. Properly closing those tages solved the problem. Such a simple answer. That will be the first thing I check the next time I have a problem. Thanks again :-)

drjohn 56 Posting Pro in Training · Answer 4 · 2010-11-29T07:36:38+00:00

Hi Shanenin,
I see in css that for most of the text containing tags font-size is not defined in the first place, and where it is defined, it's in relative values (small, 90%) so pretty much everything about sizing is left to browsers to decide, and we all know IE...
So try defining some precise font-size in px.
If that doesn't help try using IE conditional comments (easy to google out, even easier to use) to give IE specific instructions on how to handle fonts.

There is nothing wrong with defining font sizes in percentages and it works very well. Defining font sizes in pixels, which you are suggesting, creates a large problem - the user can't make the text bigger when using view > zoom, as IE (quite rightly in my opinion) regards the font size declared in pixels as a fixed size, so does not enlarge it (unlike other browsers which seem to think changing the defined pixel size is a good idea). If you wish to make the site accessible to users with poor eyesight, users who are liable to have the text zoomed to a larger size, then you have to use percentage or ems for your font sizes. Most experts advise against setting a font size in pixels for this reason. A less accessible site will loose you users who, if they can't read the content easily, will try elsewhere.

font sizes do not render properly in IE

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers