page is not rendering properly in IE

shanenin

By shanenin,
in Website Design & SEO Help

 Share Followers 0

Recommended Posts

shanenin

shanenin

Posted
Posted

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 fond 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:[email protected]">[email protected]</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>  | ©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 **********************/

Link to post
Share on other sites
Falcon1986

Falcon1986

Posted
Posted

You need to close your heading tags. Review the <div> with the 'feature' class and you will see the errors.

<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:[email protected]">[email protected]</a></h2>
	<h3><strong>Business Hours:</strong></h3>
	<h2>9AM(We start answering the phone at 8AM) to 6PM Monday Through Friday</h2>
	<h2>10AM to 3PM Saturday</h2>
	<h2><strong>Please call anytime, anyday! We do our best to answer phones and provide service after hours</strong></h2>
</div>

Secondly, it seems like you are trying to use heading tags as a replacement for font sizes. This does not go against the standard, but you should try to use heading tags properly if SEO is of concern. After I ran the page's HTML through W3C's Validator it made the following observation:

...it is likely that the heading tags are not being used properly. (Headings should reflect the logical structure of the document; they should not be used simply to add emphasis, or to change the font size.)
Link to post
Share on other sites
shanenin

shanenin

Posted
  • Author
Posted

Thanks, that was the problem :-) Such a simple solution. That will be the first thing I will check next time. I kind of suspected I was using the heading tags improperly, but that is the way the original author did it, so I did my best to make changes with my limited coding abilities. Just curious, why does the method I am using, effect SEO?

Link to post
Share on other sites
Falcon1986

Falcon1986

Posted
Posted
Just curious, why does the method I am using, effect SEO?

Within heading tags are found the topics and sub-topics for your page's content. They show search engines how your content is organized so that there can be better crawling and keyword association. A hierarchy is involved with heading tags: H1 can be thought of as the "major topic", H2 is a "sub-topic" of H1, H3 is a "sub-topic" of H2, etc. So when using heading tags in your HTML, you should do so as if writing a well-organized essay. Rarely is going beyond H3 necessary if your page's content is concise and properly arranged.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Followers 0
Go to topic listing