I don't know much about CSS, but when I open my site http://www.rmcwebhost.com it doesn't reach from one side of the screen to the other. I'd be very greatful is someone could help me out. This is my CSS style sheet /* -------------------------------------------- Default ----------------------------------------- */ td {text-align: left;font-family:arial;font-size:11px;color:#7E7E7E;line-height:13px; vertical-align:top;} a {text-decoration:none; color:#ffffff;} a:hover {text-decoration:underline;} img { border:0;} table { height:100%; width:100%; border:0;} body { margin:0px;padding:0px; background:url(images/px_body.gif) top repeat-x;} input, textarea {font-family:tahoma; font-size:11px; border:1px solid #7E7E7E; background:url(images/px_input.gif) top left; color:#7E7E7E; padding:2px 0px 0px 4px; overflow:hidden; vertical-align:middle;} select { width:72px; height:16px; vertical-align:middle; color:#7E7E7E; font-family:tahoma;} form { padding:0; margin:0;} em { font-style:normal;} em a {background:url(images/a1.gif) center left no-repeat #313131; padding:4px 8px 5px 16px; font-weight:bold;} em a:hover { color:#5CB909; text-decoration:none;} b { color:#ffffff; display:block;} ul {margin:0; padding:0; list-style:none} li {background:url(images/a.gif) center left no-repeat; margin:0; padding:0 0 0 10px; line-height:20px;} li a { color:#7E7E7E;} li a:hover { color:#ffffff; text-decoration:none;} #main_table { width:696px; height:740px; background:url(images/px_table.gif) top left;} .column { float:left;} .px_cont {background:url(images/px_cont_c.gif) top left;} .px_cont_t {background:url(images/px_table_t.gif) top repeat-x;} .a a { text-decoration:underline;} .a a:hover { text-decoration:none;} and this is straight out of the header of the site <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <TITLE>RMC Hosting- Reliable, Friendly Hosting</TITLE> <META NAME="keywords" CONTENT="web hosting, hosting, webhosting, web host"> <META NAME="description" CONTENT="RMC hosting provides Mini, Standard and Business hosting solutions. Our services are designed for both beginners and professionals. All of our plans include a 99.9% uptime guarantee, 24/7 support system and a 45-day money back guarantee."> <META NAME="robots" CONTENT="FOLLOW,INDEX"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title></title> <link href="style.css" rel="stylesheet" type="text/css"> <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> <style type="text/css"> <!-- .style1 {font-size: 13px} .style3 {color: #5CB909} .style4 { font-size: 15px; color: #CCCCCC; } .style5 {font-size: 18px} .style6 {color: #5CB909; font-size: 18px; } .style7 { font-size: 14px; color: #CCCCCC; } --> </style>
Of course not. You specifically said NOT to here: #main_table { width:696px; height:740px; background:url(images/px_table.gif) top left;} main_table is the name of the table that wraps everything else. This is why the grey bar does indeed span across the whole screen-- that's the body, which you didn't set a width to. If you hadn't set the width of the main table to only 696px then it would follow the general rule you have for tables-- width: 100%; Nested tables give me the pukies. I'm off.
yeah well it's just a template i bought after trying everything, i have to keep it the way it is...i don't like it either but i don't want to buy another template. if i spand it the width of the page it messes the header all up