This is probably really easy to fix but I'm banging my head against a wall here. For the life of me I can't get this page I'm working on to display properly without having to scoll left to right. Can someone please help me get this page to display correctly with no side to side scrolling? I'd greatly appreciate it!! http://www.redskinswarpath.com/Tony-McGees-Pro-Football-Plus/
I would simply remove any set width and use the percent. You wont be able to keep it inside the window if you are telling the browser to set a <TD> to a certain size - no way around that
Usually, when setting a fixed width you also want the main part of the site centered. Usually, you have your body element, and then maybe a wrapper between the content and the body. Give the wrapper a margin-left:auto; margin-right: auto; or maybe a margin: 0 auto; These work in most browsers to say set equal spaces between the content and the sides of the window... except in IE5.5 if you care. For that one, you need to use text-align: center; which isn't supposed to work that way but oh well. If you don't really want the text centered too, then later in your css set the text-align back to left or right or whatever you wanted. <center> tags should not be used; they are deprecated. They are not valid.
You need to also put a doctype in your code; browsers are going into Quirks Mode on your site. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>Tony McGee's Pro Football Plus at www.RedskinsWarpath.com</title> </head> <body> <div syle="wrapper"> <table border="0" width="100%"> <tr>... etc rest of page... ... ...end of page... </tr> </table> </div> <!-- end wrapper div--> </body> </html> Code (markup): And some CSS, though I've already forgotten how to make table border = 0; it's either border: none (dunno if that extends to tables too) or border-collapse: collapse * { margin: 0; padding: 0; } html, body { background-color:#e5e5e5 width: 100%; } #wrapper { border: none; width: (whatever you want) margin-left: auto; margin-right: auto; } a, a:link, a:visited { color: #e2a500; } a:hover { color: #set color for hover; } Code (markup): See, though, if you used CSS you could save a lot of work. Look at the menu table in your code: ... <table border="0" width="208" background="MenuPlain.jpg"> <tr> <td width="100%"><font color="#E2A500" size="2" face="Verdana"><a href="http://">Redskins Forums</a></font></td> </tr> <tr> <td width="100%"><font color="#E2A500" size="2" face="Verdana">About Tony</font></td> </tr> <tr> <td width="100%"><font color="#E2A500" size="2" face="Verdana">Show Schedule</font></td> </tr> <tr> <td width="100%"><font color="#E2A500" size="2" face="Verdana">Youth Sideline</font></td> </tr> <tr> <td width="100%"><font color="#E2A500" size="2" face="Verdana">Fan Club</font></td> </tr> <tr> <td width="100%"><font color="#E2A500" size="2" face="Verdana">Sports Bar Info</font></td> </tr> <tr> <td width="100%"><font color="#E2A500" size="2" face="Verdana">Advertise/Sponsors</font></td> </tr> <tr> <td width="100%"><font color="#E2A500" size="2" face="Verdana">Speakers Bureau</font></td> </tr> <tr> <td width="100%"><font color="#E2A500" size="2" face="Verdana">Fantasy Football</font></td> </tr> <tr> <td width="100%"><font color="#E2A500" size="2" face="Verdana">Redskins Pro Shop</font></td> </tr> <tr> <td width="100%"><font color="#E2A500" size="2" face="Verdana">Redskins News</font></td> </tr> <tr> <td width="100%"><font color="#E2A500" size="2" face="Verdana">Links</font></td> </tr> <tr> <td width="100%"><font color="#E2A500" size="2" face="Verdana">Contact Us</font></td> </tr> <tr>... etc etc Code (markup): See you've repeated the font stylings for every single <tr>... suppose you ever want to change that. Lots of work (and by the way, if they're going to be clickie links, they should be a list, but you've already done this in tables). Or... table .menu { width: 208px; background-image: url(MenuPlain.jpg); } table .menu td { width: 208; font: 1.5em Verdana, sans-serif; color: #e2a500; } -------------------------------------------------------------- HTML: <table class="menu"> <tr> <td><a href="http://">Redskins Forums</a></td> </tr> <tr> <td>AboutTony</td> </tr> <tr> <td>Show Schedule</td> </tr> <tr> <td>Youth Sideline</td> </tr> <tr> <td>Fan Club</td> </tr> <tr> <td>Sports Bar Info</td> </tr> <tr> <td>Advertise/Sponsors</td> </tr> <tr> <td >Speakers Bureau</td> </tr> <tr> <td>Fantasy Football</td> </tr> <tr> <td >Redskins Pro Shop</td> </tr> <tr> <td>Redskins News</td> </tr> <tr> <td>Links</td> </tr> <tr> <td>Contact Us</td> </tr> extra trs can be replaced with padding-botttom: whatever pixels you want distance; in the CSS </table> Code (markup): See, if you changed you mind and wanted to change the colour, easy, change once in the CSS file : ) If you were to do this the more approved and semantic way, you'd make all the clickies a list like this: <ul class="menu"> <li><a href="http://whatever">Redskins Forums</a></li> <li><a href="whatever">About Tony</a></li> <li><a href="blah">Show Schedule</a></li> <li><a href="enzovoort">Youth Sideline</td> <li><a href="club">Fan Club</a></li> <li><a href="bar">Sports Bar Info</a></li> <li><a href="ads">Advertise/Sponsors</a></li> <li><a href="speaker">Speakers Bureau</a></li> <li><a href="fantasy">Fantasy Football</a></li> <li><a href="shop">Redskins Pro Shop</a></li> <li><a href="news">Redskins News</a></li> <li><a href="links">Links</a></li> <li><a href="contact">Contact Us</a><li> </ul> Code (markup): Then in CSS ul .menu { background-image: url(MenuPlain.jpg); list-style-type: none; margin: 0; <--set to whatever you want padding: 0; <--set to whatever font: 1.2em Verdana, sans-serif; color: #e2a500; } Code (markup): You could also set link colours with ul a, ul a:link, ul a:hover, ul a:visited etc