Any CSS/HTML experts here?

To have the footer unaffected by the left & right DIVs, add this style to the footer DIV:
clear:both;

To have the menu move up & down as the page is scrolled you will need to use javascript.

The CSS you are using has incorrect styles for your div margins.

Here's a simple guide for a css layout without tables.

 

Change this:

Code:

#content {
left:300px; */ is not a style, by itself does nothing */
width: 100%;
height: 80%;
} 

to this:

Code:

#content {
text-align:center; */ don't use the <center> tag, it's depreciated. */
margin-left:300px;
width: 100%;
height: 80%;
}

 

Don't use the <center> tag at all.
The default alignment is always "left" even if not specified. Thus, on the pages that require centered content do this:

<div id= "content" style= "text-align:center; ">

to override the alignment used in the .css file.

 

I don't see any border around the header & footer.
If you want the header & footer to scale to edge of window then change this:

Code:

body {
color: #000000;
background-color:#F95602;
margin: 0px;
padding: 20px;}

to this:

Code:

body {
color: #000000;
background-color:#F95602;
margin: 0px;
padding: 0px;}

then do this:

Code:

#menu {
float: left;
margin-left: 20px; */ indent 20px; */
width: 200px;
height: 80%;
background-color: #F95602;
color:#000000;}

#content {
margin-left: 230px; */ added 20 more px to compensate for menu margin-left */
margin-right: 20px; */ right indent 20px; */
background: #F95602;
color:#000000;}

The menu stops short in IE because you have <li> width (ul.css-menu li a) set to 180px (20 px less than the <ul>).

Look here for proper css list menus:
http://css.maxdesign.com.au/listamatic/

Also, you may have to increase the #content margin-left to accomodate IE css bugs.

 

I would add 10px padding-top to the #menu div.

 

It was not really borked, it's the /* Thin Black Top Border */ that made it appear borked.

 

Not sure what you mean, I copy+paste your source into the w3c validator, ad the </p> & it passes.

Just for neatness, I'd ad quotes to all the values in the form. (not necessary for validation though)

I suspect the error you get is caused by the mailer application somehow. Ad the closing </p> tag, upload it and revalidate. Then post the exact error(s) shown at the w3c validator page.

 

Thanks. How about linking TonyT like this:

Code:

<p>
I'm getting there, I've been adding to the site over the last couple of days and thanks mainly to <a href= "https://mvp.support.microsoft.com/profile=2DAB7D6F-22FB-407B-8CAB-82A3269096D2" target= "_blank ">TonyT</a> on the <a href= "http://www.windowsbbs.com" title= "Windows Support Forum ">Windows BBS</a> the<acronym title= "Cascading Style Sheet ">CSS</acronym> has improved. <acronym title= "By The Way ">BTW</acronym>if you ever need any kind of support for windows/hardware/networking etc I <strong>strongly</strong>recommend a visit to that site.
</p>

 

If you wish to continue to use the host's mailer, then do this:

<form method=POST action= "mailer ">
<p>
Your Name:<br>
<input type=text name=name size=40><br>
Your Email:<br>
<input type=text name=email size=40><br>
Subject:<br>
<input type=text name=subject size=40><br>
Your Message:<br>
<textarea rows=7 cols=48 name=comments></textarea><br>
<input type=submit>
<input type=hidden name= "id" value=" ">
</p><p>
<input type=hidden name= "id" value=" "></p></form>
</div>

Does your host support php?

Your mail form has no error checking. I suggest having at least the sender's email address a required field.

This small dhtml will ensure the sender enters an email address and it will ensure the address is a valid one:

Code:

<!-- begin form validation --><script type='text/javascript'>
function validate() {
sender_email = document.getElementById( "sender_email ").value;
filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

if (sender_email == " ") {
hideAllErrors();
document.getElementById( "sender_emailError ").style.display =  "inline ";
document.getElementById( "sender_email ").focus();
return false;
}
else if (!filter.test(sender_email)) {
hideAllErrors();
document.getElementById( "invalid_emailError ").style.display =  "inline ";
document.getElementById( "sender_email ").select();
document.getElementById( "sender_email ").focus();
return false;
}
return true;
}
function hideAllErrors() {
document.getElementById( "sender_emailError ").style.display =  "none "
document.getElementById( "invalid_emailError ").style.display =  "none "
}
</script>

<style type= "text/css ">
span.error {
color:#ffffff;
display:none;
}
</style><!-- end form validation -->


<form method=POST action= "mailer ">
<p>
Your Name:<br>
<input type=text name=name size=40><br>
Your Email:<br><span class= "error" id= "sender_emailError ">Please enter your email address.<br></span><span class= "error" id= "invalid_emailError ">Error! Invalid email address.<br></span>
<input type=text name=email size=40 id= "sender_email "><br>
Subject:<br>
<input type=text name=subject size=40><br>
Your Message:<br>
<textarea rows=7 cols=48 name=comments></textarea><br>
<input type=submit>
<input type=hidden name= "id" value=" ">
</p>
</form>