PDA

View Full Version : All I get is the page background color when previewing webpage using IE -- PLEASE HELP!


grujaz10
11-08-2008, 07:20 PM
Hello,

I'm relatively new to Dreamweaver and website design, but I think I have a working understanding of CSS and Dreamweaver.

Anyways, I created a new site (not published yet). I set a page background color (of red) (code below), and when I "page preview" in IE, all I see is the background color on the whole page. None of the tables or text show up (eventhough they have different background color). The page preview works fine in Firefox however.

I need to make sure this is not a real problem, and I would also like to check how the page looks in IE.

PLEASE HELP! I'M GOING CRAZY OVER HERE!!!
Thanks,


body {
margin-top: 0px;
margin-bottom: 4%;
background-color: #880B16;
font-size: 10px;
color: #000;
width: 950px;
text-align: left;
margin-left: auto;
margin-right: auto;
}

grujaz10
11-08-2008, 07:22 PM
btw, the IE page preview does work for another site I also designed (in another site folder)???

Below is the complete code for my Template page:

<!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">
<script src="../SpryAssets/SpryTooltip.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />
<link href="../CSS Style Sheets/link styles.css" rel="stylesheet" type="text/css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Health Beyond Limits</title>
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-bottom: 4%;
background-color: #880B16;
font-size: 10px;
color: #000;
width: 950px;
text-align: left;
margin-left: auto;
margin-right: auto;
}
</style>
<style type="text/css">
ul.MenuBarVertical
{
margin: 0 auto ;
width: 8em;
}
a:link {
text-decoration: none;
font-weight: 400;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #9CF;
font-weight: 500;
}
a:active {
text-decoration: none;
color: #FFFFC6;
font-size: 1em;
}
</style>
<link href="../CSS Style Sheets/title.css" rel="stylesheet" type="text/css" />
<link href="../CSS Style Sheets/telephone.css" rel="stylesheet" type="text/css" />
<link href="../CSS Style Sheets/alignment.css" rel="stylesheet" type="text/css" />
<link href="../CSS Style Sheets/body text.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="950" border="0" cellspacing="0" cellpadding="0" align="center">
<tr bgcolor="#892034">
<td width="614" height="41" bgcolor="#880B16" class="blackcolor">&nbsp;</td>
</tr>
<tr bgcolor="#892034">
<td height="24" bgcolor="#880B16" class="blackcolor">&nbsp;</td>
</tr>
</table>
<table width="950" border="0" cellspacing="0" cellpadding="0" align="center">
<tr bgcolor="#880B16" class="centeralign">
<td width="60" class="toplinkbar"><a href="../index.html" class="whitecolor">HOME</a></td>
<td width="93" class="whitecolor">WHAT WE DO</td>
<td width="72" class="whitecolor">ABOUT US</td>
<td width="139" class="whitecolor">CURRENT PROJECTS</td>
<td width="155" height="22" class="whitecolor">RECIPIENT COUNTRIES</td>
<td width="72" class="whitecolor">HBL NEWS</td>
<td width="101" class="whitecolor">GLOBAL NEWS</td>
<td width="61"><a href="../faq.html" class="whitecolor">FAQ</a></td>
<td width="10" class="whitecolor">|</td>
<td width="81" class="whitecolor">SEARCH</td>
<td width="108"><span class="donatetext"><a href="../donate.html" class="whitecolor">DONATE TODAY</a></span></td>
</tr>
</table>
<table width="950" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td bgcolor="#892034"><img src="../Pictures/line-red.jpg" width="950" height="2" /></td>
</tr>
</table>
<table width="950" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td bgcolor="#880B16">&nbsp;</td>
</tr>
</table>
<!-- TemplateBeginEditable name="EditRegion1" -->
<table align="center" width="950" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="55" bgcolor="#EBEBEB">&nbsp;</td>
</tr>
</table>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="EditRegion2" -->
<table align="center" width="950" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#EBEBEB">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr bgcolor="#EBEBEB">
<td height="350">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td bgcolor="#EBEBEB">&nbsp;</td>
<td>&nbsp;</td>
<td bgcolor="#EBEBEB">&nbsp;</td>
</tr>
</table>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="EditRegion3" -->
<table align="center" width="950" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="150" bgcolor="#EBEBEB">&nbsp;</td>
</tr>
</table>
<!-- TemplateEndEditable -->
<table align="center" width="950" border="0" cellspacing="0" cellpadding="0">
<tr class="centeralign">
<td height="30" class="boldtelephone">US (888) 888 - 8888</td>
<td><a href="../contact us.html" class="whitecolor">CONTACT US</a></td>
<td><a href="../hospitalpage.html" class="whitecolor">FOR HOSPITALS</a></td>
<td><a href="../joinus.html" class="whitecolor">JOIN US</a></td>
<td><a href="../mediacenter.html" class="whitecolor">MEDIA CENTER</a></td>
<td><a href="../privacypolicy.html" class="whitecolor">PRIVACY POLICY</a></td>
<td><a href="../tellafriend.html" class="whitecolor">TELL A FRIEND</a></td>
<td class="whitecolor" id="sprytrigger1">EMAIL NEWSLETTER SIGN-UP</td>
</tr>
</table>
<div class="tooltipContent" id="sprytooltip1"><table width="375" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="375" height="31" bgcolor="#333366" class="emailtitle">JOIN OUR E-NEWSLETTER</td>
</tr>
<tr>
<td height="18" bgcolor="#333366"><hr /></td>
</tr>
<tr>
<td bgcolor="#333366"><p>Sign-Up for our e-newsletter so that you can be the first to know how all the H.B.L. projects are doing, where H.B.L. needs your help most, and a summary of the most important news.</p>
<p>&nbsp;</p></td>
</tr>
<tr>
<td height="35" bgcolor="#333366" class="centeralign"><form id="form1" name="form1" method="post" action="">
<label>
<input name="email newsletter" type="text" class="normal" id="email newsletter" size="35" />
</label>
<label>
<input name="submit" type="submit" class="emaillinks" id="submit" value="Submit" />
</label>
</form></td>
</tr>
</table></div>

<script type="text/javascript">
<!--
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1", {offsetX:-280, offsetY:-270, hideDelay:1000, useEffect:"fade", closeOnTooltipLeave:true});
//-->
</script>
</body>
</html>

Cary
11-08-2008, 11:35 PM
You have this code coming before the head of your page:

<script src="../SpryAssets/SpryTooltip.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />
<link href="../CSS Style Sheets/link styles.css" rel="stylesheet" type="text/css" />

It needs to be within the head of your page.

You also have your embedded styling starting with this:
<style type="text/css">
<!--


However, you never closed that comment, so the rest of the page is essentially commented out. There are several more errors. Always be sure to check the validation of your page. The Web Developer add-on for Firefox makes it really easy to validate local html and css pages.

Cary
11-08-2008, 11:40 PM
There are several more errors...

Apparently, fixing the above problems takes care of most of the errors. You'll only have two left, a missing alt attribute for one of your images and an ID with a space in its name. That's not allowed.

grujaz10
11-09-2008, 12:32 AM
Cary, thank you very very much. I moved the first quoted code into the head of the page, and I just deleted the "<!--" altogether, and it now shows up.

btw, is that a good fix, or was that not the way to do it?

Also, I ran the validation (both as XML and as Markup), but it did not bring back any errors. The only .jpg I have on this page (template) is the "line-red", where would I need to put the alt attribute (can you please show me the correct code?). And can you show me which ID tag has an improper space.


On a side note, how did you think the page looked? Professional, clean, etc.?

Thanks again Cary,

Cary
11-09-2008, 06:57 AM
Cary, thank you very very much. I moved the first quoted code into the head of the page, and I just deleted the "<!--" altogether, and it now shows up.

btw, is that a good fix, or was that not the way to do it?

Yes, that's fine. Older browsers, too old to worry about, required the comments around the styling so they wouldn't show up at the top of the page, or something like that.

The only .jpg I have on this page (template) is the "line-red", where would I need to put the alt attribute (can you please show me the correct code?).

That's the one. Just use an empty alt attribute like this:

<img src="../Pictures/line-red.jpg" width="950" height="2" alt="" />

And can you show me which ID tag has an improper space.

Around line 146 you have this:
<input name="email newsletter" type="text" class="normal" id="email newsletter" size="35" />

"email newsletter" has the space which needs to be removed.

On a side note, how did you think the page looked? Professional, clean, etc.?

I can't really give a fair assessment of how it looks as I don't have the benefit of seeing it styled. However, with regard to the coding, it's better to use css for the layout rather than tables. That would also keep the html smaller and cleaner. You are using some css, so that's a good start.

grujaz10
11-09-2008, 07:25 AM
Thanks again for the reply. Regarding styling with CSS, do you know of any good resources on learning to style with CSS?

I've read the advantages of using CSS for styling, I just don't know how to position everything. But on another note, I've also read that using tables is also a good way to make compatible webpages???

Cary
11-09-2008, 07:44 AM
I'll admit that I prefer learning from books, so I like "CSS Mastery", "Bulletproof Web Design" and "Mastering CSS with Dreamweaver CS3".

If you prefer web-based tutorials:

http://www.w3schools.com/css/

http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/