PDA

View Full Version : Internet Explorer display problem.



Justin
02-26-2008, 07:12 AM
I'm designing a site with Dreamweaver. And when I check for browser compatibility (Firefox, Netscape, Opera and Internet Explorer) from within Dreamweaver, it shows me this message: "No browser check errors".

The pages work fine and the positioning of everything is in proper place when previewed in the four above-mentioned browsers. But IE displays: "Error on page" or "Done but with errors" at the left bottom corner of the browser. Only IE shows this error message. This happens when I hover a mouse over the navigation links and this makes me to believe it is a hyperlink issue. Please, does anyone know how to fix this problem? How can I direct IE to avoid this error message. I'll really appreciate any help now.

The following is the CSS stylesheet:


body{
color: #333333;
padding: 0px;

font: normal 14px/1.166 Arial, Helvetica, sans-serif;
}

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

a:link, a:visited{
color: #0000FF;
text-decoration: none;
font: 12px Arial, Helvetica, sans-serif;
}

a:hover{
text-decoration: none;
}

/************** 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: #FFFFFF;
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;
}

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: 131px;
left: 50px;
right: 50px;
width:900px;
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;
}

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

#content{
margin:0px;
border-left: 1px solid #ccd2d2;
float: right;
width: 657px;
text-align: left;
padding: 13px 10px 0px 0px;
}


/***********************************************/
/* 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%;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
top: 20px;
}

#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;
padding: 0px;
margin: 0px;
left: 134px;
z-index: 100;
width: 631px;
}


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: url(../images/horizontalnav_over.gif);

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

}

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

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

#siteInfo{
border-top: 1px solid #cccccc;
font-size: small;
color: #000000;
background: #2A1F55;
height: 35px;
width: 850px;
padding-top: 10px;
padding-bottom: 10px;
}

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

#advert{
padding: 10px;
}

#advert img{
display: block;
}

/********************* end **********************/
#Layer3 #facts {
float: right;
width: 668px;
}
#outerwrapper {
margin: 0px auto;
width: 850px;
}
#outerwrapper #Layer1 #logo {
float: left;
width: 531px;
}
#outerwrapper #Layer1 #Layer2 #nav {
height: 22px;
width: 550px;
margin-top: 5px;
margin-left: 150px;
margin-right: 150px;
}
#outerwrapper #Layer3 {
position: relative;
width: 850px;
border-bottom: thin solid #FF00FF;
height: 782px;
}
#outerwrapper #Layer3 #facts #adsense_home {
height: 60px;
background: #CAFFFF;
margin-bottom: 5px;
}
#outerwrapper #Layer3 #pagename {
font: italic 24px "Times New Roman", Times, serif;
color: #FFFFFF;
background: #2A1F55;
text-align: center;
width: 100%;
}
#outerwrapper #Layer3 #leftnav {
font: 14px Arial, Helvetica, sans-serif;
color: #000000;
background: #CCCCFF;
float: left;
height: 750px;
width: 180px;
}
#outerwrapper #Layer3 #facts #base #poor_people {
background: #C4FFFF;
}
#Layer3 #facts #base #info {
background: #C4FFFF;
}
#outerwrapper #Layer3 #facts #base #info {
height: 366px;
background: url(../images/block2.png) no-repeat;
}
#outerwrapper #siteInfo #copyright {
background: #E6FFFF;
text-align: center;
}
#outerwrapper #Layer3 #leftnav #sponsor {
background: #E8E8FF;
}
#outerwrapper #Layer3 #leftnav #ad {
background: #C4FFFF;
height: 79px;
}
#outerwrapper #siteInfo #foter_links {
width: 825px;
margin-right: auto;
margin-left: auto;
}
#outerwrapper #siteInfo #copyright {
width: 825px;
margin-right: auto;
margin-left: auto;
}
#outerwrapper #Layer1 #logo #google_search {
}
#outerwrapper #Layer3 #facts #base #poor_people {
height: 160px;
}
#outerwrapper #Layer3 #facts #base #poor_people #google_search {
height: 155px;
}
#outerwrapper #Layer3 #facts #base #webdesign {
font: 13px/26px Arial, Helvetica, sans-serif;
color: #000000;
}
#outerwrapper #Layer1 #logo #motto {
font: 24px/26px "Times New Roman", Times, serif;
color: #FFFF00;
text-align: center;
}

Basil
02-26-2008, 07:18 AM
That means there's a javascript error on the page.

Justin
02-26-2008, 07:42 AM
Hi Basil,

How then can I correct this error? Do I need to post the page's codes here as well?

Basil
02-26-2008, 07:45 AM
You can post it here or just link to a copy of the page.

Early Out
02-26-2008, 07:48 AM
You also have to ask yourself whether it's worth the effort to track it down. Does the page display properly in IE? If so, I'd be inclined to ignore the warning. I've visited countless sites, including large, professional news sites for example, that display that warning in IE.

You could post a link to your site (better than posting all the code). You might also try feeding the code into a validator, like here (http://validator.w3.org/).

Justin
02-26-2008, 08:00 AM
Hi again Basil,

The main page is http://www.mexabet.org/index.php . That's the page I'm working on now. I have already published it, so that someone else can take a look and diagnose it. The codes are as follows:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mexabet.org: Lifting Up Lives</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#Layer1 {
position:relative;
width:850px;
height:130px;
background-color:#2A1FAA;
z-index:1;
background-image: url(images/Header_background.gif);
}
#Layer2 { position:absolute;
width:100%;
height:32px;
border:1px none #000000;
z-index:1;
left: 0px;
top: 95px;
background: #FFFFAE url(images/horizontalnav_background.gif);
}
body {
margin-top: 0px;
}
#outerwrapper #Layer3 #facts #base #missionwrap {
font: 18px Arial, Helvetica, sans-serif;
color: #FF0000;
text-align: center;
background: #B9FFFF;
}
#outerwrapper #Layer3 #facts #base #hometext {
background: url(images/block.png);
height: 500px;
text-align: left;
}
#outerwrapper #Layer3 #facts #pickback {
height: 118px;
background: #FFF4D7;
}
#outerwrapper #Layer3 #leftnav #ad #enquiry_form {
line-height: 26px;
height: 26px;
}
#outerwrapper #Layer3 #facts #base #info #photo_placer {
padding-top: 100px;
}
-->
</style>
</head>

<body>
<div class="outerwrapper" id="outerwrapper">
<div id="Layer1">
<div class="logo" id="logo"><img src="images/logo.gif" alt="Mexabet Foundation Logo" width="531" height="65" />
<div id="motto">Lifting Up Lives </div>
</div>
<div id="Layer2">
<div class="glink" id="nav"><a href="index.php" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">Home</a><a href="aboutus/index.php" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">Profile</a><a href="projects/index.php" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">Projects</a><a href="contactus.php" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">Contact Details </a><a href="http://www.mexabet.org/PHPFormGen/use/ContactForm/form1.html" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">Inquire More </a><a href="news/index.php" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">News </a><a href="policy/privacy_policy.php" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">Policy </a></div>
</div>
</div>
<div id="Layer3">
<div class="pagename" id="pagename"> Helping To Fight Poverty, Disease And Suffering in Africa!</div>
<div class="facts" id="facts">
<table width="100%" border="0" cellpadding="0" cellspacing="4" id="base">
<tr>
<td width="335" align="center" bgcolor="#FFFFFF"><div class="missionwrap" id="missionwrap">Mexabet Foundation </div></td>
<td width="335" rowspan="2" align="center" valign="top" bgcolor="#E8E8FF"><div class="poor_people" id="poor_people">
<div id="google_search"><!-- SiteSearch Google -->
<form method="get" action="http://www.mexabet.org/search_results.php" target="_top">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="middle"></img></a>
<br/>
<input type="hidden" name="domains" value="www.mexabet.org;www.mexabet.com;www.mexabet.net"></input>
<label for="sbi" style="display: none">Enter your search terms</label>
<input type="text" name="q" size="31" maxlength="255" value="" id="sbi"></input>
<label for="sbb" style="display: none">Submit search form</label>
<input type="submit" name="sa" value="Search" id="sbb"></input>
</td></tr>
<tr>
<td nowrap="nowrap">
<table>
<tr>
<td>
<input type="radio" name="sitesearch" value="" checked id="ss0"></input>
<label for="ss0" title="Search the Web"><font size="-1" color="#000000">Web</font></label></td>
<td>
<input type="radio" name="sitesearch" value="www.mexabet.org" id="ss1"></input>
<label for="ss1" title="Search www.mexabet.org"><font size="-1" color="#000000">www.mexabet.org</font></label></td>
</tr>
<tr>
<td>
<input type="radio" name="sitesearch" value="www.mexabet.com" id="ss2"></input>
<label for="ss2" title="Search www.mexabet.com"><font size="-1" color="#000000">www.mexabet.com</font></label></td>
<td>
<input type="radio" name="sitesearch" value="www.mexabet.net" id="ss3"></input>
<label for="ss3" title="Search www.mexabet.net"><font size="-1" color="#000000">www.mexabet.net</font></label></td>
</tr>
</table>
<input type="hidden" name="client" value="pub-5255973242321890"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="channel" value="2877193402"></input>
<input type="hidden" name="ie" value="ISO-8859-1"></input>
<input type="hidden" name="oe" value="ISO-8859-1"></input>
<input type="hidden" name="safe" value="active"></input>
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#2A1F55;VLC:663399;AH:center ;BGC:FFFFFF;LBGC:2A1F55;ALC:0000FF;LC:0000FF;T:000 000;GFNT:0000FF;GIMP:0000FF;LH:43;LW:207;L:http://www.mexabet.org/images/wordart_logo.gif;S:http://www.mexabet.org/index.php;FORID:11"></input>
<input type="hidden" name="hl" value="en"></input>
</td></tr></table>
</form>
<!-- SiteSearch Google --></div>
</div>
<div class="info" id="info">
<div id="photo_placer"><img src="images/Poverty_ridden_people.gif" alt="Poverty_Ridden People" name="Poverty_ridden_people" width="190" height="140" border="0" id="Poverty_ridden_people" /></div>
</div></td>
</tr>
<tr>
<td width="335" valign="top" bgcolor="#E8E8FF"><div class="hometext" id="hometext"> Mexabet.org is a foundation established by the Chairman/CEO of <a href="http://www.mexabet.com/index.php" target="_blank">Mexabet.com</a>, to provide life&rsquo;s basic needs, encouragement and hope to the needy in Africa who are living under deplorable conditions. Some of these people live in war-torn areas and have lost everything they possessed during the war, some including whole family members. Most have been dispossessed of their lands, thereby making it impossible for them to even have a roof to shelter their heads or a piece of land to cultivate crops for daily sustenance. That&rsquo;s why we care! Mexabet.org is a non-profit charity organization that is entirely philanthropic, in the true sense of the vocabulary. <a href="aboutus/index.php">Read more.....</a>
<p><span class="project_intro style3">There is an adage that says &ldquo;Give a hungry man food today and he will eat to his satisfaction, but tomorrow he will be hungry again&rdquo;. That&rsquo;s why we have crafted some viable projects to assist and guide our beneficiaries to be self-reliant. As follows are the list of projects we have at hand, and how we strive to fulfill our mission in those areas. <a href="projects/index.php">Read more....</a> </span></p>
</div></td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#E8E8FF"><div id="webdesign">Web design by<a href="http://webdesigning.mexabet.com/" target="_blank"> Webdesigning.mexabet.com</a></div></td>
</tr>
</table>
<div class="adsense_home" id="adsense_home">
<script type="text/javascript"><!--
google_ad_client = "pub-5255973242321890";
//home468x60, created 12/23/07
google_ad_slot = "8197420034";
google_ad_width = 468;
google_ad_height = 60;
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="pickback"></div>
</div>
<div class="leftnav" id="leftnav">
<div class="homeless_boy" id="homeless_boy">
<div align="center"><img src="images/homeless1.gif" alt="Homeless Boy" name="homeless1" width="140" height="148" vspace="10" border="0" id="homeless1" /></div>
</div>
<div class="ad" id="ad">
<div align="center" id="enquiry_form"></div>
</div>
<div class="sponsor" id="sponsor">Sponsor a poor child today. help a helpless child to get an education and a better future! </div>
<div class="join_hands" id="join_hands">Let's make this world a better place for all. </div>
</div>
</div>
<div class="footer" id="siteInfo">
<div align="center" id="foter_links">
<table width="100%" border="0" cellspacing="0" cellpadding="2" bgcolor="#CCCCCC">
<tr>
<td width="100%" align="center"><a href="index.php">Home</a> | <a href="aboutus/index.php">Profile</a> | <a href="projects/index.php">Projects</a> | <a href="contactus.php">Contact Details </a> | <a href="http://www.mexabet.org/PHPFormGen/use/ContactForm/form1.html">Inquire More</a> | <a href="news/index.php">News Aricles </a> | <a href="policy/privacy_policy.php">Privacy Policy </a></td>
</tr>
</table>
</div>
<div class="copyright" id="copyright">Copyright &copy; 2007-2008 <a href="index.php">Mexabet.org</a>. All rights reserved.</div>
</div>
</div>
</body>
</html>

Justin
02-26-2008, 08:17 AM
The pages display perfectly well In all the browsers, including Internet Explorer. Why I really want to track it down is because I do some small-time web designing for clients. And you know I wouldn't want some clients to misread this IE error message. That's why I'm mostly concerned. Does IE need additional information?

I even have another sub-domain of mine that IE also has this error message issue, even though all the web pages display well in all the browsers, including IE. And Dreamweaver says there's no browser error on the pages. The homepage of that other sub-domain is located at http://sitebuilder.mexabet.com/
(http://sitebuilder.mexabet.com/index.html)

Basil
02-26-2008, 08:32 AM
The error is coming from the onmouseover events you have on your navigation links.


<div class="glink" id="nav">
<a href="index.php" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">Home</a>
<a href="aboutus/index.php" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">Profile</a>
<a href="projects/index.php" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">Projects</a>
<a href="contactus.php" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">Contact Details </a>
<a href="http://www.mexabet.org/PHPFormGen/use/ContactForm/form1.html" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">Inquire More </a>
<a href="news/index.php" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">News </a>
<a href="policy/privacy_policy.php" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">Policy </a>
</div>

They're calling an "ehandler" function that doesn't exist. If you don't know why they're there then just take them out. Right now they serve no purpose.


<div class="glink" id="nav">
<a href="index.php" id="gl1" class="glink">Home</a>
<a href="aboutus/index.php" id="gl2" class="glink">Profile</a>
<a href="projects/index.php" id="gl3" class="glink">Projects</a>
<a href="contactus.php" id="gl4" class="glink">Contact Details</a>
<a href="http://www.mexabet.org/PHPFormGen/use/ContactForm/form1.html" id="gl5" class="glink">Inquire More</a>
<a href="news/index.php" id="gl6" class="glink">News</a>
<a href="policy/privacy_policy.php" id="gl6" class="glink">Policy</a>
</div>

It's not an IE error by the way, javascript errors are simply not displayed the same way in other browsers.

Justin
02-26-2008, 10:17 AM
Basil,

Your diagnosis seems to have taken care of the problem. I have removed those lines on the homepage, as you advised. And no more error message from IE. I will now go on to do the same on the rest of the pages.

Initially those pages had drop-down menu navigation links, before I decided to remove them. But what I didn't know was that I needed to remove the ehandler codes.

Thanks to you and Early Out who responded and ultimately gave me an answer.