PDA

View Full Version : New website in CS3, Almost There - Code shows errors when validating


macsolutions
01-21-2008, 02:52 PM
I have just finished my website using DW CS3, but when I check the code it gives me lots of errors; such as:

tag: " td" allows optional closing tag. closing tag: "tr" closes "td" context. Validation will proceed as if context is closed.[XHTML 1.0 transitional]

The tag:"td" is not allowed within: "td" It is only allowed within: tr.[XHTML 1.0 transitional]

Could someone please help as I do not fully understand Code.

I have yet to add my meta data, but I think I am almost there. I would also welcome any pointers on improving my site.

http://www.macsolutions.co.uk (http://www.macsolutions.co.uk/)

Many Thanks
Tom

<!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=UTF-8" />

<title>Macsolutions | Apple Macintosh Specialists</title>
<link rel="Shortcut Icon" href="/favicon.ico">

<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:active {
color: #777777;
}
-->
</style></head>

<body>
<div align="center">
<table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<!--DWLayoutTable-->
<tr>
<td width="66" height="47"></td>
<td colspan="6" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="667" height="47" valign="middle"><h2><a href="../index.html" target="_self">HOME</a><span style="color: #939393"> | </span><a href="Support/support.html" target="_self">SUPPORT</a><span style="color: #939393"> | </span><a href="Repairs/repairs.html" target="_self">REPAIRS </a><span style="color: #939393">| </span><a href="Recovery/recovery.html">RECOVERY<span style="color: #939393"> |</span></a><a href="Productivity/productivity.html"> PRODUCTIVITY<span style="color: #939393"> |</span></a> <a href="IT Management/IT Management.html" target="_self">IT MANAGEMENT<span style="color: #939393"> | </span></a><a href="Wireless Home/Wireless home.html">WIRELESS HOME<span style="color: #939393"> | </span></a><a href="Wireless Home/Wireless home.html" target="_self">IPOD REPAIRS</a></h2></td>
</tr>
</table></td>
<td width="67"></td>
</tr>

<tr>
<td height="85">&nbsp;</td>
<td colspan="6" valign="top"><img src="Artwork/Banner.gif" alt="banner" width="667" height="84" /></td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="34"></td>
<td colspan="3" valign="middle"><img src="Artwork/Acse.gif" alt="acse" width="174" height="22" /></td>
<td width="333">&nbsp;</td>
<td width="22">&nbsp;</td>
<td width="117"></td>
<td></td>
</tr>
<tr>
<td height="14"></td>
<td width="49"></td>
<td width="3"></td>
<td width="143"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td height="240">&nbsp;</td>

<td colspan="6" valign="top"><img src="Solutions/Solutions.jpg" width="667" height="240" /></td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="25"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="43"></td>

<td rowspan="2" align="center" valign="middle"><img src="Solutions/Solutions logo.gif" alt="logo" width="32" height="32" /></td>
<td colspan="4" align="left" valign="middle"> <h1><img src="Solutions/solutions-header.gif" alt="header" width="239" height="18" align="middle" /></h1></td>
<td>&nbsp;</td>
<td></td>
</tr>

<tr>
<td height="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>


<tr>
<td height="5"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="232"></td>
<td></td>
<td></td>
<td colspan="2" valign="top"> <p align="justify"><img src="Solutions/Solutions-copy.gif" alt="copy" width="471" height="232" align="top" /></p></td>
<td>&nbsp;</td>
<td></td>
<td></td>
</tr>
<tr>
<td height="21"></td>
<td></td>
<td></td>
<td>&nbsp;</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div align="center">
<table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#1B1B1B">
<!--DWLayoutTable-->
<tr>
<td width="800" height="25" valign="top"><img src="Artwork/Panel-Corners.gif" alt="panel corners" width="800" height="16" /></td>
</tr>
</table>
</div>
<div align="center">
<table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#1b1b1b">
<!--DWLayoutTable-->
<tr>
<td width="615" rowspan="3" valign="top"><img src="Artwork/footer-p1.gif" alt="footerp1" width="615" height="42" /></td>
<td width="170" height="14" valign="top" bgcolor="#000000"><img src="Artwork/Footer-p3.gif" alt="footerp3" width="170" height="13" /></td>
<td width="15" rowspan="3" valign="top"><img src="Artwork/footer-p2.gif" alt="footerp2" width="15" height="42" /></td>
</tr>
<tr>
<td height="16" align="center" valign="middle" bgcolor="#000000"><p align="right" class="emailpadding"><a href="mailto:support@macsolutions.co.uk" class="emailpadding">support@macsolutions.co.uk</a></p></td>
</tr>
<tr>
<td height="12" valign="top"><img src="Artwork/Footer-p4.gif" alt="footerp4" width="170" height="12" /></td>
</tr>
</table>
</div>

<div align="center">
<table width="802" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="24" height="5"></td>
<td width="251"></td>
<td width="196"></td>
<td width="331"></td>
</tr>
<tr>
<td height="14"></td>
<td valign="middle"><h3><img src="Artwork/site-design.gif" alt="site design" width="225" height="11" hspace="2" /></h3></td>
<td colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="508" height="14" align="right" valign="top"><h4><a href="Tuition/Tuition.html" target="_self">TUITION</a><span style="color: #939393"> | </span><a href="Web Development/web_development.html" target="_self">WEB DEVELOPMENT </a><span style="color: #939393">| </span><a href="Service Rates/service_rates.html" target="_self">SERVICE RATES <span style="color: #939393">| </span></a><a href="About Us/about us.html" target="_self">ABOUT US<span style="color: #939393"> |</span></a><a href="About Us/about us.html" target="_self"> </a><a href="Contact Us/Contact Us.html" target="_self">CONTACT US</a></h4></td>
<td width="19"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="5"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="1"></td>
<td colspan="3" valign="top"><img src="Artwork/base-line.gif" alt="baseline" width="759" height="1" align="middle" /></td>
</tr>
<tr>
<td height="3"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="49"></td>
<td colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->

<tr>
<td width="447" height="25" valign="top"><h3><img src="Artwork/copyright.gif" alt="copyright" width="332" height="25" /></h3></td>
</tr>
<tr>
<td height="24">&nbsp;</td>
</tr>

</table></td>
<td>&nbsp;</td>
</tr>
</table>
</div>
</body>
</html>

Cary
01-21-2008, 11:35 PM
I only see two errors when validating.

The link tag on line 7 wasn't closed.

<link rel="Shortcut Icon" href="/favicon.ico" />

The img tag on line 60 needs an alt attribute.

d a v e
01-22-2008, 06:24 AM
the img on line 60 also needs a long description http://www.w3.org/TR/html4/struct/objects.html#adef-longdesc-IMG

as you can't fit that much in the alt attributes. the LD (long description) should use all the text from the image, contained in a simple html document.

i wonder why you didn't use normal text for your main copy?
using that much text as an image means that it takes longer to load (though not soo much), can't be read be search engines, can't be read by screen readers or by those browsing with graphics off, can't bre resized by the user if they need it bigger. :(

macsolutions
01-22-2008, 07:27 AM
Thanks for the reply. Could you tell me what code and description I should put for a long description relating to the image.

I fully understand and agree that the text should be placed on the page and not as an image. The reason I did this was because the text does not look as it does in photoshop, nice and crisp, in Dreamweaver it looks bold and bloated, possibly because it is white text on a black background.

Is there a solution to the text problem?

macsolutions
01-22-2008, 08:30 AM
After looking into the text problem, the only solution I could find was related to the Font Weight which can be applied in CSS.

It seems that the lowest weight is 100, but I find that this is still too heavy when the font is light on a black background.

Is there a way of making the weight lower than 100, possibly through a script?

Tom

d a v e
01-22-2008, 10:29 AM
e.g. <IMG src="sitemap.gif"
alt="HP Labs Site Map"
longdesc="sitemap.html">

then make a very simple page with the long description in it the same way you would make any other html page.

did you try specifying something like arial or verdana first in your font declaration?

macsolutions
01-22-2008, 10:31 AM
Attached is an image of what my site copy looks like with text, not as an image.http://www.macsolutions.co.uk/mstext.gif

macsolutions
01-22-2008, 10:33 AM
My text declaration is ariel, verdana, helvetica, sans serif.

macsolutions
01-22-2008, 10:38 AM
Sorry Dave, but I am not very conversant with Code regarding the IMG src. Could you step it out for me. Thanks

d a v e
01-22-2008, 10:44 AM
i'm not on a mac but i get the same thing in windows safari... seems to be the anti-aliasing for white on black is a bit severe!! in safari if you choose the light anti-aliasing it looks ok, but your users aren't going to do that ;)

i see you tried a light grey too: i tried using #e0e0e0 with some increased line height

line-height:1.6;

and that helps some...

<heresy>you could always switch to a pc </heresy> ;)

i guess your stuck with it as there's no way of making the font lighter. try with arial and increasing the line height on the p's and ul's

domedia
01-22-2008, 12:48 PM
the img on line 60 also needs a long description http://www.w3.org/TR/html4/struct/objects.html#adef-longdesc-IMG
Just a quick note that this is a optional description of the image, a supplement of the alt attribute. It is not required.