Please help with validating my page

**Ryan Fitton** · 07-09-2007, 03:45 PM

Hi, have been trying for ages to validate my page on w3c using their HTML Validator, I have been using the BETA which has HTML Tidy built into it. But I have been having no look, i have used the HTML Tidys suggested code, but it has made my logo go to the bottom of the page instead of the top and I dont know why.

Here is the generated code that HTML Tidy gives me:

HTML Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org">
<link rel="shortcut icon" href="favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ryan Fitton - All About Me</title>
<link rel="stylesheet" type="text/css" href="css/blue.css">
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="css/blue.css">
<link rel="alternate stylesheet" type="text/css" media="screen" title="red-theme" href="css/red.css">
<link rel="alternate stylesheet" type="text/css" media="screen" title="orange-theme" href="css/orange.css">
<link rel="alternate stylesheet" type="text/css" media="screen" title="pink-theme" href="css/pink.css">
<script src="style_switch/styleswitch.js" type="text/javascript">
/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script language="javascript" type="text/javascript">
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
win=window.open(mypage,myname,settings);}
// -->
</script>
<link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css">
<script type="text/javascript" src="chromejs/chrome.js">
/***********************************************
* Chrome CSS Drop Down Menu- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<style type="text/css">
 div.c5 {text-align: center}
 div.c4 {width: 623; height: 59}
 div.c3 {width: 150px;}
 div.c2 {width: 650; height: 86}
 p.c1 {text-align: center}
</style>
</head>
<body>
<div class="border c5">
<div class="c5">
<table>
<tr>
<td width="7" height="1" bgcolor="#FFFFFF"> </td>
<td width="657" height="1" bgcolor="#FFFFFF" align="center">
<p class="c1"> </p>
<div class="chromestyle c2" id="chromemenu">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="about_me.htm" rel="dropmenu1">About Me</a></li>
<li><a href="#" rel="dropmenu2">Other Stuff</a></li>
<li><a href="contact_me.htm" rel="dropmenu3">Contact Me</a></li>
</ul>
</div>
<!-- About Me Menu -->
<div id="dropmenu1" class="dropmenudiv"><a href="about_me.htm">Who Am I?</a> <a href="my_hobbies.htm">My Hobbies</a> <a href="my_favorite_stuff.htm">My Favorite Stuff</a></div>
<!-- Other Stuff Menu -->
<div id="dropmenu2" class="dropmenudiv"><a href="links.htm">Links</a> <a href="photo_gallery.htm">Photo Gallery</a> <a href="music_player.htm" onclick="NewWindow(this.href,'music_player','310','340','no','center');return false" onfocus="this.blur()">Music Player</a></div>
<!-- Contact Me Menu -->
<div id="dropmenu3" class="dropmenudiv c3"><a href="contact_me.htm">Contact Me</a> <a href="mailto:ryan.fitton@hotmail.co.uk?Subject=E-Mail%20from%20website">E-Mail</a></div>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script></td>
<td width="7" height="1" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="671" height="1" bgcolor="#FFFFFF" colspan="3">
<div class="spacer"><img border="0" src="images/spacer.gif" width="698" height="20" alt="** PLEASE DESCRIBE THIS IMAGE **"></div>
</td>
</tr>
<tr>
<td width="7" height="21" bgcolor="#FFFFFF"> </td>
<td width="657" height="1" bgcolor="#FFFFFF">
<div class="title">Home</div>
</td>
<td width="7" height="1" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="7" height="1" bgcolor="#FFFFFF"> </td>
<td width="657" height="1" bgcolor="#FFFFFF">
<div class="body c4">Welcome to my website, I hope you enjoy browsing it!
<p>Last updated: <!--webbot bot="Timestamp" S-Type="EDITED"
        S-Format="%A, %d %B %Y" startspan -->Saturday, 07 July 2007<!--webbot bot="Timestamp" endspan i-checksum="56626" --></p>
</div>
</td>
<td width="7" height="1" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="671" height="1" bgcolor="#FFFFFF" colspan="3">
<div class="spacer"><img border="0" src="images/spacer.gif" width="698" height="20" alt="** PLEASE DESCRIBE THIS IMAGE **"></div>
</td>
</tr>
<tr>
<td width="7" height="1" bgcolor="#FFFFFF"> </td>
<td width="657" height="1" bgcolor="#FFFFFF">
<div class="photo"><img border="0" src="images/mitsubishi_lancer_evolution_1.png" width="351" height="194" alt="** PLEASE DESCRIBE THIS IMAGE **"></div>
</td>
<td width="7" height="1" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="671" height="1" bgcolor="#FFFFFF" colspan="3"><img border="0" src="images/spacer.gif" width="698" height="20" alt="** PLEASE DESCRIBE THIS IMAGE **"></td>
</tr>
<tr>
<td width="671" height="1" bgcolor="#FFFFFF" colspan="3">
<div class="photo"><img border="0" src="images/line.gif" width="552" height="1" alt="** PLEASE DESCRIBE THIS IMAGE **"></div>
</td>
</tr>
<tr>
<td width="7" height="1" bgcolor="#FFFFFF"> </td>
<td width="657" height="1" bgcolor="#FFFFFF">
<div class="designed_by">Website designed and managed by <a href="mailto:ryan.fitton@hotmail.co.uk?Subject=E-Mail%20from%20Ryan%20Fitton%20website">Ryan Fitton</a>.</div>
</td>
<td width="7" height="1" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="7" height="1" bgcolor="#FFFFFF"> </td>
<td width="657" height="1" bgcolor="#FFFFFF">
<div class="copyright"><a href="mailto:ryan.fitton@hotmail.co.uk?Subject=E-Mail%20from%20Ryan%20Fitton%20website">Ryan Fitton</a> Copyright © 2007. All rights reserved.</div>
</td>
<td width="7" height="1" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="7" height="1" bgcolor="#FFFFFF"> </td>
<td width="657" height="1" bgcolor="#FFFFFF">
<div class="image_bottom"><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://h1.ripway.com/ryanfitton/css/blue.css" target="_blank"><img border="0" src="images/vcss.gif" alt="This page is is validated CSS" width="88" height="31"></a><a href="http://www.w3.org/Style/CSS/" target="_blank"><img border="0" src="images/mwcts.png" width="88" height="31" alt="** PLEASE DESCRIBE THIS IMAGE **"></a></div>
</td>
<td width="7" height="1" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="671" height="1" bgcolor="#FFFFFF" colspan="3"><img border="0" src="images/spacer.gif" width="698" height="20" alt="** PLEASE DESCRIBE THIS IMAGE **"></td>
</tr>
</table>
</div>
<table cellspacing="0" cellpadding="0" width="155" border="0">
<tr>
<td width="663" height="1" colspan="3" bgcolor="#FFFFFF">
<div class="spacer"><img border="0" src="images/spacer.gif" width="698" height="20" alt="** PLEASE DESCRIBE THIS IMAGE **"></div>
</td>
</tr>
<tr>
<td width="10" height="1" bgcolor="#FFFFFF"></td>
<td width="680" height="1" bgcolor="#FFFFFF">
<div class="theme">Choose a theme: <select name="switchcontrol" size="1" onchange="chooseStyle(this.options[this.selectedIndex].value, 30)">
<option value="none" selected="selected">Default style</option>
<option value="blue-theme">Blue Theme</option>
<option value="red-theme">Red Theme</option>
<option value="orange-theme">Orange Theme</option>
<option value="pink-theme">Pink Theme</option>
</select></div>
</td>
<td width="9" height="1" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="663" height="1" colspan="3" bgcolor="#FFFFFF">
<div class="logo_header"><a href="index.htm"><img border="0" src="images/logo.png" width="611" height="124" alt="** PLEASE DESCRIBE THIS IMAGE **"></a></div>
</td>
</tr>
<tr>
<td width="663" height="1" colspan="3" bgcolor="#FFFFFF">
<div class="spacer"><img border="0" src="images/spacer.gif" width="698" height="20" alt="** PLEASE DESCRIBE THIS IMAGE **"></div>
</td>
</tr>
</table>
</div>
</body>
</html>

So could someone please help me with the code.

**jscheuer1** · 07-09-2007, 04:35 PM

Tidy is just a robot of sorts, if it messes up your layout, don't use it. I see you have a number of things going on on the page besides simply HTML code. If your goal is to validate the page and to develop good habits in the process, you should use a strict DOCTYPE:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

and then resolve any validation issues line by line. The validator usually gives clues as to how to resolve problems, but if you have trouble with any particular issue, we can probably help.

Changing to a strict DOCTYPE may mess up your layout. Changes to the style can usually fix this.

However, in all likelihood, your layout is more complex than need be and should be first simplified.

In any case, this (with a little color added for links and broken image symbols and some items centered relative to an apparently left aligned block level element that is about 700px wide) is about what your code looks like without the style, scripts or images:

* Home
* About Me
* Other Stuff
* Contact Me

Who Am I? My Hobbies My Favorite Stuff
Links Photo Gallery Music Player
Contact Me E-Mail

** PLEASE DESCRIBE THIS IMAGE **

Home

Welcome to my website, I hope you enjoy browsing it!

Last updated: Saturday, 07 July 2007

** PLEASE DESCRIBE THIS IMAGE **

** PLEASE DESCRIBE THIS IMAGE **

** PLEASE DESCRIBE THIS IMAGE **
** PLEASE DESCRIBE THIS IMAGE **

Website designed and managed by Ryan Fitton.

Ryan Fitton Copyright � 2007. All rights reserved.

This page is is validated CSS** PLEASE DESCRIBE THIS IMAGE **

** PLEASE DESCRIBE THIS IMAGE **
** PLEASE DESCRIBE THIS IMAGE **

Choose a theme:

** PLEASE DESCRIBE THIS IMAGE **
** PLEASE DESCRIBE THIS IMAGE **

So, without a link to your page with its attendant resources, I can't tell what it even looks like. Even if I had that, I couldn't be sure how you want it to look.

If you have an invalid copy of the page that 'looks right' in a particular browser, give us a link to it and the browser name and version. We also could perhaps make use of a link to the valid version that looks wrong.

**Ryan Fitton** · 07-09-2007, 04:45 PM

here is the html tidy version of my index page: http://h1.ripway.com/ryanfitton/index2.htm

And this is what i want it to look like: http://h1.ripway.com/ryanfitton/index.htm

**jscheuer1** · 07-09-2007, 05:25 PM

I did just what I advised you to do, went line by line with the validator (using your invalid version). If you want to do the css or go for a strict DOCTYPE (both of which would be good ideas), you really need to learn how to do most of these corrections yourself.

I will give you a few clues. Much invalid HTML is just tags or attributes out of place due to earlier incomplete changes to the code or simply to overuse of unneeded and/or invalid tags/attributes. That was most of it, that and missing alt attributes for images. You can compare the valid code below to your invalid version to see the changes. For future reference, if you go strict:

If an attribute isn't allowed and it is needed for layout, style can usually fill the gap.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ryan Fitton - All About Me</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/blue.css">
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="css/blue.css">
<link rel="alternate stylesheet" type="text/css" media="screen" title="red-theme" href="css/red.css">
<link rel="alternate stylesheet" type="text/css" media="screen" title="orange-theme" href="css/orange.css">
<link rel="alternate stylesheet" type="text/css" media="screen" title="pink-theme" href="css/pink.css">
<script src="style_switch/styleswitch.js" type="text/javascript">
/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script language="javascript" type="text/javascript">
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
win=window.open(mypage,myname,settings);}
// -->
</script>
<link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css">
<script type="text/javascript" src="chromejs/chrome.js">
/***********************************************
* Chrome CSS Drop Down Menu- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>

<body><div align="center">
<div class="border">
<div align="center">
  <center>

<table cellSpacing="0" cellPadding="0" width="155" border="0">
  <tr>
    <td width="663" colspan="3" bgcolor="#FFFFFF"><div class="spacer">
    <img alt="" border="0" src="images/spacer.gif" width="698" height="20"></div>
    </td>
  </tr>
  <tr>
    <td width="10" bgcolor="#FFFFFF">
    </td>
    <td width="680" bgcolor="#FFFFFF">
    <div class="theme">
Choose a theme: <select name="switchcontrol" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 30)">
<option value="none" selected="selected">Default style</option>
<option value="blue-theme">Blue Theme</option>
<option value="red-theme">Red Theme</option>
<option value="orange-theme">Orange Theme</option>
<option value="pink-theme">Pink Theme</option>
</select>

</div>
    </td>
    <td width="9" bgcolor="#FFFFFF">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="663" colspan="3" bgcolor="#FFFFFF"><div class="logo_header"><a href="index.htm"><img alt="" border="0" src="images/logo.png" width="611" height="124">
        </a>
      </div>
    </td>
  </tr>
  <tr>
    <td width="663" colspan="3" bgcolor="#FFFFFF"><div class="spacer">
    <img alt="" border="0" src="images/spacer.gif" width="698" height="20"></div>
    </td>
  </tr>
  <tr>
    <td width="7" bgcolor="#FFFFFF">
      &nbsp;</td>
    <td width="657" bgcolor="#FFFFFF" align="center">
      <p align="center">&nbsp;<div class="chromestyle" id="chromemenu" style="width: 650; height: 86">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="about_me.htm" rel="dropmenu1">About Me</a></li>
<li><a href="#" rel="dropmenu2">Other Stuff</a></li>
<li><a href="contact_me.htm" rel="dropmenu3">Contact Me</a></li>
</ul>
</div>

<!-- About Me Menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="about_me.htm">Who Am I?</a>
<a href="my_hobbies.htm">My Hobbies</a>
<a href="my_favorite_stuff.htm">My Favorite Stuff</a>
</div>

<!-- Other Stuff Menu -->
<div id="dropmenu2" class="dropmenudiv">
<a href="links.htm">Links</a>
<a href="photo_gallery.htm">Photo Gallery</a>
<a href="music_player.htm" onclick="NewWindow(this.href,'music_player','310','340','no','center');return false" onfocus="this.blur()">Music Player</a>
</div>

<!-- Contact Me Menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="contact_me.htm">Contact Me</a>
<a href="mailto:ryan.fitton@hotmail.co.uk?Subject=E-Mail from website">E-Mail</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
    </td>
    <td width="7" bgcolor="#FFFFFF">
      &nbsp;</td>
  </tr>

  <tr>
    <td width="671" bgcolor="#FFFFFF" colspan="3"><div class="spacer">
    <img alt="" border="0" src="images/spacer.gif" width="698" height="20"></div></td>
  </tr>
  <tr>
    <td width="7" height="21" bgcolor="#FFFFFF">
      &nbsp;</td>
    <td width="657" bgcolor="#FFFFFF"><div class="title">Home
      </div>
    </td>
    <td width="7" bgcolor="#FFFFFF">
      &nbsp;</td>
  </tr>
  <tr>
    <td width="7" bgcolor="#FFFFFF">
      &nbsp;</td>
    <td width="657" bgcolor="#FFFFFF"><div class="body" style="width: 623; height: 59">Welcome
        to my website, I hope you enjoy browsing it!
        <p>Last updated: <!--webbot bot="Timestamp" S-Type="EDITED"
        S-Format="%A, %d %B %Y" startspan -->Saturday, 07 July 2007<!--webbot bot="Timestamp" endspan i-checksum="56626" -->
      </div>
    </td>
    <td width="7" bgcolor="#FFFFFF">
      &nbsp;</td>
  </tr>
  <tr>
    <td width="671" bgcolor="#FFFFFF" colspan="3"><div class="spacer">
    <img alt="" border="0" src="images/spacer.gif" width="698" height="20"></div></td>
  </tr>
  <tr>
    <td width="7" bgcolor="#FFFFFF">
      &nbsp;</td>
    <td width="657" bgcolor="#FFFFFF"><div class="photo"><img alt="" border="0" src="images/mitsubishi_lancer_evolution_1.png" width="351" height="194"></div></td>
    <td width="7" bgcolor="#FFFFFF">
      &nbsp;</td>
  </tr>
  <tr>
    <td width="671" bgcolor="#FFFFFF" colspan="3">
    <img alt="" border="0" src="images/spacer.gif" width="698" height="20"></td>
  </tr>
  <tr>
    <td width="671" bgcolor="#FFFFFF" colspan="3">
    <div class="photo"><img alt="" border="0" src="images/line.gif" width="552" height="1"></div></td>
  </tr>
  <tr>
    <td width="7" bgcolor="#FFFFFF">
      &nbsp;</td>
    <td width="657" bgcolor="#FFFFFF"><div class="designed_by">Website
        designed and managed by <a href="mailto:ryan.fitton@hotmail.co.uk?Subject=E-Mail from Ryan Fitton website">Ryan
        Fitton</a>.</div></td>
    <td width="7" bgcolor="#FFFFFF">
      &nbsp;</td>
  </tr>
  <tr>
    <td width="7" bgcolor="#FFFFFF">
      &nbsp;</td>
    <td width="657" bgcolor="#FFFFFF"><div class="copyright">
    <a href="mailto:ryan.fitton@hotmail.co.uk?Subject=E-Mail from Ryan Fitton website">
    Ryan Fitton</a> Copyright © 2007. All rights reserved.
    </div></td>
    <td width="7" bgcolor="#FFFFFF">
      &nbsp;</td>
  </tr>
  <tr>
    <td width="7" bgcolor="#FFFFFF">
      &nbsp;</td>
    <td width="657" bgcolor="#FFFFFF"><div class="image_bottom">
    <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://h1.ripway.com/ryanfitton/css/blue.css" target="_blank"><img border="0" src="images/vcss.gif" alt="This page is is validated CSS" width="88" height="31"></a><a href="http://www.w3.org/Style/CSS/" target="_blank"><img alt="" border="0" src="images/mwcts.png" width="88" height="31"></a>
    </div></td>
    <td width="7" bgcolor="#FFFFFF">
      &nbsp;</td>
  </tr>
  <tr>
    <td width="671" bgcolor="#FFFFFF" colspan="3">
    <img alt="" border="0" src="images/spacer.gif" width="698" height="20"></td>
  </tr>
</table>

  </center>
</div>
</div>
</div>
</body>

</html>

**Ryan Fitton** · 07-09-2007, 09:12 PM

Thanks for your help. I am so glad you have helped me vaidate my website. Any way next time I will try and do it my self, if i can!

**Twey** · 07-09-2007, 10:41 PM

Here is a very bad valid Strict layout that should work the same:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ryan Fitton - All About Me</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/blue.css">
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="css/blue.css">
<link rel="alternate stylesheet" type="text/css" media="screen" title="red-theme" href="css/red.css">
<link rel="alternate stylesheet" type="text/css" media="screen" title="orange-theme" href="css/orange.css">
<link rel="alternate stylesheet" type="text/css" media="screen" title="pink-theme" href="css/pink.css">
<script src="style_switch/styleswitch.js" type="text/javascript">
/***********************************************
* Style Sheet Switcher v1.1- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
win=window.open(mypage,myname,settings);}
// -->
</script>
<link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css">
<script type="text/javascript" src="chromejs/chrome.js">
/***********************************************
* Chrome CSS Drop Down Menu- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>

<body><div style="text-align: center; margin: 0 auto;">
<div class="border">
<div style="text-align: center; margin: 0 auto;">

<table cellSpacing="0" cellPadding="0" style="border: 0 none; width: 155px;">
  <tr>
    <td style="width: 663px; background-color: white;" colspan="3"><div class="spacer">
    <img alt="" src="images/spacer.gif" style="border: 0 none; width: 698px; height: 20px;"></div>
    </td>
  </tr>
  <tr>
    <td style="width: 10px; background-color: white;">
    </td>
    <td style="width: 680px; background-color: white;">
    <div class="theme">
Choose a theme: <select name="switchcontrol" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 30)">
<option value="none" selected="selected">Default style</option>
<option value="blue-theme">Blue Theme</option>
<option value="red-theme">Red Theme</option>
<option value="orange-theme">Orange Theme</option>
<option value="pink-theme">Pink Theme</option>
</select>

</div>
    </td>
    <td style="width: 9px; background-color: white;">&nbsp;
    </td>
  </tr>
  <tr>
    <td style="width: 663px; background-color: white;" colspan="3"><div class="logo_header"><a href="index.htm"><img alt="" style="border: 0 none; width: 611px; height: 124px;" src="images/logo.png">
        </a>
      </div>
    </td>
  </tr>
  <tr>
    <td style="width: 663px; background-color: white;" colspan="3"><div class="spacer">
    <img alt="" style="border: 0 none; width: 698px; height: 20px;" src="images/spacer.gif"></div>
    </td>
  </tr>
  <tr>
    <td style="width: 7px;background-color: white;">
      &nbsp;</td>
    <td style="width: 657px; text-align: center; background-color: white;">
      <p style="text-align: center;">&nbsp;<div class="chromestyle" id="chromemenu" style="width: 650px; height: 86px;">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="about_me.htm" rel="dropmenu1">About Me</a></li>
<li><a href="#" rel="dropmenu2">Other Stuff</a></li>
<li><a href="contact_me.htm" rel="dropmenu3">Contact Me</a></li>
</ul>
</div>

<!-- About Me Menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="about_me.htm">Who Am I?</a>
<a href="my_hobbies.htm">My Hobbies</a>
<a href="my_favorite_stuff.htm">My Favorite Stuff</a>
</div>

<!-- Other Stuff Menu -->
<div id="dropmenu2" class="dropmenudiv">
<a href="links.htm">Links</a>
<a href="photo_gallery.htm">Photo Gallery</a>
<a href="music_player.htm" onclick="NewWindow(this.href,'music_player','310','340','no','center');return false" onfocus="this.blur()">Music Player</a>
</div>

<!-- Contact Me Menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="contact_me.htm">Contact Me</a>
<a href="mailto:ryan.fitton@hotmail.co.uk?Subject=E-Mail from website">E-Mail</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
    </td>
    <td style="width: 7px; background-color: white;">
      &nbsp;</td>
  </tr>

  <tr>
    <td style="width: 671px; background-color: white;" colspan="3"><div class="spacer">
    <img alt="" style="border: 0 none; width: 698px; height: 20px;" src="images/spacer.gif"></div></td>
  </tr>
  <tr>
    <td style="width: 7px; height: 21px; background-color: white;">
      &nbsp;</td>
    <td style="width: 657px; background-color: white;"><div class="title">Home
      </div>
    </td>
    <td style="width: 7px; background-color: white;">
      &nbsp;</td>
  </tr>
  <tr>
    <td style="width: 7px; background-color: white;">
      &nbsp;</td>
    <td style="width: 657px; background-color: white;"><div class="body" style="width: 623px; height: 59px;">Welcome
        to my website, I hope you enjoy browsing it!
        <p>Last updated: <!--webbot bot="Timestamp" S-Type="EDITED"
        S-Format="&#37;A, %d %B %Y" startspan -->Saturday, 07 July 2007<!--webbot bot="Timestamp" endspan i-checksum="56626" -->
      </div>
    </td>
    <td style="width: 7px; background-color: white;">
      &nbsp;</td>
  </tr>
  <tr>
    <td style="width: 671px; background-color: white;" colspan="3"><div class="spacer">
    <img alt="" style="border: 0 none; width: 698px; height: 20px;" src="images/spacer.gif"></div></td>
  </tr>
  <tr>
    <td style="width: 7px; background-color: white;">
      &nbsp;</td>
    <td style="width: 657px; background-color: white;"><div class="photo"><img alt="" style="border: 0 none; width: 351px; height: 194px;" src="images/mitsubishi_lancer_evolution_1.png"></div></td>
    <td style="width: 7px; background-color: white;">
      &nbsp;</td>
  </tr>
  <tr>
    <td style="width: 671px; background-color: white;" colspan="3">
    <img alt="" src="images/spacer.gif" style="border: 0 none; width: 698px; height: 20px;"></td>
  </tr>
  <tr>
    <td style="width: 671px; background-color: white;" colspan="3">
    <div class="photo"><img alt="" src="images/line.gif" style="border: 0 none; width: 552px; height: 1px;"></div></td>
  </tr>
  <tr>
    <td style="width: 7px; background-color: white;">
      &nbsp;</td>
    <td style="width: 657px; background-color: white;"><div class="designed_by">Website
        designed and managed by <a href="mailto:ryan.fitton@hotmail.co.uk?Subject=E-Mail from Ryan Fitton website">Ryan
        Fitton</a>.</div></td>
    <td style="width: 7px; background-color: white;">
      &nbsp;</td>
  </tr>
  <tr>
    <td style="width: 7px; background-color: white;">
      &nbsp;</td>
    <td style="width: 657px; background-color: white;"><div class="copyright">
    <a href="mailto:ryan.fitton@hotmail.co.uk?Subject=E-Mail from Ryan Fitton website">
    Ryan Fitton</a> Copyright &#169; 2007. All rights reserved.
    </div></td>
    <td style="width: 7px; background-color: white;">
      &nbsp;</td>
  </tr>
  <tr>
    <td style="width: 7px; background-color: white;">
      &nbsp;</td>
    <td style="width: 657px; background-color: white;"><div class="image_bottom">
    <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://h1.ripway.com/ryanfitton/css/blue.css"><img style="border: 0 none; width: 88px; height: 31px;" src="images/vcss.gif" alt="This page is is validated CSS"></a><a href="http://www.w3.org/Style/CSS/"><img alt="" src="images/mwcts.png" style="border: 0 none; width: 88px; height: 31px;"></a>
    </div></td>
    <td style="width: 7px; background-color: white;">
      &nbsp;</td>
  </tr>
  <tr>
    <td style="width: 761px; background-color: white;" colspan="3">
    <img alt="" style="border: 0 none; width: 698px; height: 20px;" src="images/spacer.gif"></td>
  </tr>
</table>

</div>
</div>
</div>
</body>

</html>

However, it was a rough-and-ready validation, and much remains to be done to make it a respectable page, including some serious redesign.

Don't use tables for layout.
Don't use absolute pixel sizes, go for a more fluid measurement (percentages or perhaps ems).
As you can see from the code, I've basically just replaced invalid presentational markup with inline CSS. This is definitely not the way to go, and you can remove the bulk of that markup by using a proper embedded or external stylesheet with selectors and a few classes, especially in conjunction with the removal of that table.

Also, your server's error page is remarkably uninformative.

**Uchiha_Guy** · 07-10-2007, 01:47 AM

stay away from tables, use Div's, everything is in the CSS so you have ALOT less to worry about when trying to validate a page.

Thread: Please help with validating my page

Thread Tools

Search Thread

Please help with validating my page

Thanks

Bookmarks

Bookmarks

Posting Permissions