I have a webpage that I have done for a client. It's php driven and the form seems to be creating a ton of whitespace over the menu (blocking most of it). In IE7 it looks fine. Here is the link http://www.kangaroocarpetcleaning.com BODY { font-family: Arial, Helvetica, sans-serif; font-size: small; text-align: center; background-color:#d0a0e1; border: 1px solid #680176; } h1{color:#680176; font-size:1.4em;} h2{color:#680176; font-size:1.2em;} h3{color:#FF0000; font-size:1.1em} .bodyalt { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12pt; color: #ff0000; text-decoration: none} .smbody { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color:#000000; text-decoration: none} .smbody2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; color: #000000; text-decoration: none} .smbodyalt { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 10pt; color: #ff0000; text-decoration: none} .lgbody { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14pt; color: #000000; text-decoration: none} .lgbodyalt { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14pt; color: #ffff00; text-decoration: none} .lgbody2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 22pt; color: #ff0000; text-decoration: underline} .headline { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 16pt; color: #680176; text-decoration: none} .headline2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12pt; color: #ff0000; text-decoration: none} .bgcolor1 { background: #fad060; font-size: x-small; font-weight: bold; color: #4e2c06; border: 1px solid #4e2c06; height: 25px; } .bgcolor2 { background-color: #4074CA; } .bgcolor3 { background-color:#DEDEDE} .hrule {color: #ffffff} .font1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 26pt; color:#FF0000; text-decoration: none } .font1a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: x-large; color: #ffffff; text-decoration: none; font-weight: bolder; } .font2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color:#000000; text-decoration: none } .font3 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; color: #024560; text-decoration: none; font-weight: bold;} .content { background-color: #FFFFFF; padding-right: 4px; padding-left: 4px;} BODY, DIV, H2, H3 {padding: 0;margin: 0;} DIV {padding: 0px;} #right {background-image: url(../img/rv1.jpg);background-repeat: no-repeat;width: 1000px;position: relative;height: 274px;left: 0px;z-index: 20;background-position: right;} #container {text-align: left;background-color: #fff;border: 1px solid #000;width: 1000px;margin-top: 0px;margin-right: auto;margin-bottom: 10px;margin-left: auto;} #header { margin-top: 0; margin-right: 0; margin-bottom: 0px; margin-left: 0; height: 274px; background-image: url(../img/rv2.jpg); background-repeat: no-repeat; background-position: right; width: 100%; } #sidebar { background-color:#680176; float: left; width: 250px; padding-left: 0px; text-align:center; } #content { height: 100%; margin-top: 0; margin-bottom: 0; margin-left: 175px; } #footer { background-color: #ccccff; margin: 0px 0 0; clear: both; } #menu { height: 10px; position: relative; float: right; top: 40px; left: 0px; } #nav-menu ul { list-style: none; padding: 0; margin: 0; } #nav-menu li { float: left; margin: 0 0.10em; } #nav-menu li a { background: url(background.gif) #fff bottom left repeat-x; height: 20px; line-height: 2em; float: left; width: 90px; display: block; border: 1 px solid #dcdce9; color: #0d2474; text-decoration: none; text-align: center; } #nav-menu li a:hover { background: url(background.gif) #fff bottom left repeat-x; height: 20px; line-height: 2em; float: left; width: 90px; display: block; border: 1 px solid #dcdce9; color: #939393; text-decoration: underline; text-align: center; } /* Hide from IE5-Mac \*/ #nav-menu li a { float: none } /* End hide */ #nav-menu { width:24em } td, textarea, input, select { font-family: Tahoma; font-size: 10px; color: #000000; font-weight: normal; } .tableDetail { font-size: 10px; font-family: Verdana; color: #49394E; } a:link { color: #680176; font-family: tahoma; font-size: 10px; font-weight: bold; text-decoration: none; } a:hover { color:#caad28; font-family: tahoma; font-size: 10px; font-weight: bold; font-style: normal; line-height: normal; font-variant: normal; text-transform: none; border: thin none #FFFFFF; text-decoration: underline; } a:visited { color: #680176; font-family: tahoma; font-size: 10px; font-weight: bold; font-style: normal; } .text1 { font-family: tahoma; font-size: 10px; color: FFFFFF; font-weight: bold; } .text2 { font-family: tahoma; font-size: 10px; font-weight: normal; color: 9E0C0F; } .text3 { font-family: tahoma; font-size: 16px; font-weight: normal; color: #680176; } .text4 { font-family: tahoma; font-size: 10px; font-weight: bold; color: 680176; } .text5 { font-family: arial; font-size: 12px; font-weight: bold; color: #FFFFFF; } .text6 { font-family: tahoma; font-size: 10px; font-weight: normal; color: 949494; } .text7 { font-family: tahoma; font-size: 10px; font-weight: bold; color: #000000; } .text8 { font-family: tahoma; font-size: 10px; font-weight: normal; color: 94AEC5; } .text9 { font-family: tahoma; font-size: 10px; font-weight: normal; color:#4e4e4e; } .frame { border: 1px solid #B0C1C8; } .designed_by { font-family: Arial; font-size: 8.5px; font-weight: lighter; color: #000000; } a.a:link { font-family: tahoma; font-size: 14px; font-weight: normal; color: #152B4D; text-decoration: underline; } a.a:hover { font-family: tahoma; font-size: 14px; font-weight: normal; color: #E27C00; } a.a:visited { font-family: tahoma; font-size: 10px; font-weight: normal; color: #4074CA; } a.b:link { font-family: tahoma; font-size: 10px; font-weight: normal; color: FF8112; text-decoration: underline; } a.b:hover { font-family: tahoma; font-size: 10px; font-weight: normal; color: #666666; text-decoration: underline; } a.b:visited { font-family: tahoma; font-size: 10px; font-weight: normal; color: #ff8112; text-decoration: underline; } a.c:link { font-family: tahoma; font-size: 16px; font-weight: normal; color: C4D356; text-decoration: underline; } a.c:hover { font-family: tahoma; font-size: 10px; font-weight: normal; color: #666666; text-decoration: underline; } a.c:visited { font-family: tahoma; font-size: 10px; font-weight: normal; color: C4D356; text-decoration: underline; } a.d:link { font-family: tahoma; font-size: 10px; font-weight: normal; color: #33485d; text-decoration: underline; } a.d:hover { font-family: tahoma; font-size: 10px; font-weight: normal; color: #E4141A; text-decoration: underline; } a.d:visited { font-family: tahoma; font-size: 10px; font-weight: normal; color: #000000; text-decoration: underline; } a.e:link { font-family: tahoma; font-size: 10px; font-weight: bold; color: 944F23; text-decoration: underline; } a.e:hover { font-family: tahoma; font-size: 10px; font-weight: bold; color: #4E4E4E; text-decoration: underline; } a.e:visited { font-family: tahoma; font-size: 10px; font-weight: bold; color: 944F23; text-decoration: underline; } a.f:link { font-family: tahoma; font-size: 10px; font-weight: normal; color: 594B13; text-decoration: underline; } a.f:hover { font-family: tahoma; font-size: 10px; font-weight: normal; color: #4E4E4E; text-decoration: underline; } a.f:visited { font-family: tahoma; font-size: 10px; font-weight: normal; color: 594B13; text-decoration: underline; } a.g:link { font-family: tahoma; font-size: 10px; font-weight: bold; color: #000000; text-decoration: underline; } a.g:hover { font-family: tahoma; font-size: 10px; font-weight: bold; color: #FF6600; text-decoration: underline; } a.g:visited { font-family: tahoma; font-size: 10px; font-weight: bold; color: #000000; text-decoration: underline; } .inputstyle { font-family: tahoma; font-size: 10px; font-weight: normal; color: #5F726F; background-color: #E2EDEB; border: 1px solid #333333; } #title { background-color:#ccccff; clear: both; height: 40px; margin-top: 0px; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } /************ sectionLinks styles **************/ #sectionLinks{ margin: 0px; padding: 0px; height: 32px; } #sectionLinks h3{ border-bottom: 1px solid #cccccc; padding-top: 10px; padding-right: 0px; padding-bottom: 2px; padding-left: 10px; } #sectionLinks a:link, #sectionLinks a:visited { display: block; border-top: 1px solid #ffffff; font-weight: bold; color: #ffffff; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 10px; height: 20px; background-color: #680176; font-size: 12px; } #sectionLinks a:hover{ border-top: 1px solid #680176; margin-left: 0; background-color:#ffffff; background-image: none; font-weight: bold; text-decoration: none; color: #680176; } #bot { background-color: #4074CA; clear: both; height: 34px; margin-top: 0px; margin-right: 0; margin-bottom: 0; top: 0px; position: relative; } #estimate { background-color: #FFFFFF; color: #000000; width: 224px; background-position: center; text-align: center; position: relative; left: 12px; border: 1px solid #939393; font-family: Arial, Helvetica, sans-serif; font-size: 10px; padding:0px; vertical-align:top; } #estimate2 { color: #ffffff; width: 224px; background-position: center; text-align: center; position: relative; left: 12px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } #header { background-position: center; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #4074CA; height: 20px; width: 224px; background-image: url(../img/est-req2.jpg); } #sitemap { background-position: center; text-align: center; height: 33px; padding-top: 12px; } .bgcolor4 { background-color:#f3f1f1; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #939393; border-bottom-color: #939393; padding-top: 5px; padding-bottom: 5px; color: #939393; } .bgcolor5 { background-color:#ffffff; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #4074CA; border-left-width: 1px; border-left-style: solid; border-left-color: #4074CA; padding: 5px; font-size:10px; } Code (markup): <script language="php"> //enter Business Works ID of Customer //$bw = 0024076; //$linkID = mysql_connect("localhost", "", ""); // FOR LOCAL TESTING //$linkID = @mysql_connect("localhost","rvsite","gator11"); //mysql_select_db("rvsite",$linkID); include("connectdb.php"); $resultID = mysql_query ("SELECT * FROM article WHERE articleID=$pn"); while ($thisRow = mysql_fetch_array($resultID)) { $articletitle=$thisRow['articletitle']; $menutitle=$thisRow['menutitle']; $con=$thisRow['con']; $metaKeywords=$thisRow['metaKeywords']; $metaDescription=$thisRow['metaDescription']; $use=$thisRow['use']; $menu=$thisRow['menu']; mysql_close(); } </script> <script language="php"> //$linkID = mysql_connect("localhost", "", ""); // FOR LOCAL TESTING $linkID = @mysql_connect("localhost","rvsite","gator11"); mysql_select_db("rvsite",$linkID); $clientID = mysql_query ("SELECT * FROM client WHERE bwid=$bw"); while ($thisRow = mysql_fetch_array($clientID)) { $domain=$thisRow['domain']; $domainsuffix=$thisRow['domainsuffix']; $fname=$thisRow['fname']; $lname=$thisRow['lname']; $user=$thisRow['user']; $useTemplate=$thisRow['useTemplate']; $company=$thisRow['company']; $city=$thisRow['city']; $state=$thisRow['state']; $tel=$thisRow['tel']; $cel=$thisRow['cel']; $email=$thisRow['email']; $prod=$thisRow['prod']; $service1=$thisRow['service1']; $service2=$thisRow['service2']; $service3=$thisRow['service3']; $service4=$thisRow['service4']; $service5=$thisRow['service5']; $service6=$thisRow['service6']; $service7=$thisRow['service7']; $service8=$thisRow['service8']; $service9=$thisRow['service9']; $service10=$thisRow['service10']; $front=$thisRow['front']; $front1=$thisRow['front1']; $front2=$thisRow['front2']; $front3=$thisRow['front3']; //visa $image1=$thisRow['image1']; //amex $image2=$thisRow['image2']; //mastercard $image3=$thisRow['image3']; //discover $image4=$thisRow['image4']; //24 Hour Service $image5=$thisRow['image5']; //Rotovac Image $image6=$thisRow['image6']; $image7=$thisRow['image7']; $image8=$thisRow['image8']; $image9=$thisRow['image9']; } </script> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title><? echo $company ?> Carpet Cleaning Services of <? echo $city ?>, <? echo $state ?></title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta name="robots" content="index,follow"> <meta name="Author" content="<? echo $company ?> Carpet Cleaning Professional"> <meta name="description" content="Professional home carpet cleaning and professional commercial cleaning in <? $city ?>, <? $state ?>. We also clean carpets in <?php include("phpinc/section/servicearea.php"); ?>. We use the Rotovac PowerWand for superior carpet cleaning results, better cleaning than our competition."> <meta name="keywords" content="<?php include("phpinc/section/serviceareakeywords.php"); ?>, carpet steam cleaners, commercial, home, steam, cleaners, professional, cleaner, upholstery fabric, carpet shampoo, carpet cleaning, cleaning, car detail, pet stain, upholstery, tile, grout, stripping, waxing"> <meta name="author" content="Professional Carpet and Upholstery Cleaning from <? echo $company ?>"> <meta name="copyright" content="<? echo $company ?>"> <meta name="robots" content="ALL"> <meta name="document-classification" content="<? echo $company ?> in <? echo $service1 ?>"> <meta name="document-type" content="Public"> <meta name="document-rating" content="General"> <style type="text/css"> <!-- .style1 {color: #666666} --> </style> </head> <link href="../cs/9.css" rel="stylesheet" type="text/css"> <link href="../cs/text2.css" rel="stylesheet" type="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css"> </style> <body bgcolor="d0a0e1"> <!-- Main table structure --> <div align="center"> <!-- TITLE TABLE --> <table width="900" height="125" border="0" cellpadding="5" cellspacing="0" background="../img/ban9.jpg"> <td width="650px" height="150" colspan="2" align="center"> <div align="left"><br> <font class="font1a"><? echo $company ?> </font> <br> <br> <span class="text1">Providing Carpet Cleaning in <?php include("phpinc/section/servicearea.php"); ?> </p> </span></div></td> <td width="250px"colspan="1"> <img src="http://www.rotovac-hosting.com/imageserv/adview.php?what=bannerid:24" ALT="Left Spinning Rotovac Carpet Cleaning Head"> <img src="http://www.rotovac-hosting.com/imageserv/adview.php?what=bannerid:23" ALT="Right Spinning Rotovac Carpet Cleaning Head"></td> </tr> <tr> <td height="25" colspan="3" align="center" bgcolor="#000000"><div align="right"><font class="text5">CALL US TODAY!<b> <? echo $tel ?> </b><br> <b><? echo $cel ?></b></font></div></td> </table> <!-- END TITLE TABLE --> <table width="900" border="0" cellpadding="0" cellspacing="0" > <tr valign="top"> <td width="140" align="left" valign="top" bgcolor="#680176" class="text5"> <!-- put menu items here --> <div id="sidebar"> <?php include("http://www.$domain.$domainsuffix/phpinc/menu/$useTemplate-$prod.php"); ?> <?php //include("phpinc/menu.php"); ?> </div> <div id="estimate" align="center"> <img src="../img/rv2.jpg"> <?php include("phpinc/estimateform.php"); ?> </div> <br> <br> <div align="center" id="estimate2"><br> Serving the <?php include("phpinc/section/servicearea.php"); ?> . <hr class="hrule"> <div id="sitemap" align="center"> <img style="padding-left:20px" src="http://www.rotovac-hosting.com/imageserv/adview.php?what=bannerid:<? echo $image5 ?>"><br> <a href="sitemap.php" class="b">Site Map </a><br></div> <br> <br><BR></div> <!-- end menu items --> </td> <td bgcolor="#FFFFFF" class="bgcolor5"> <!-- all CONTENT goes below here. do not alter code above this point --> <BR> <div class="smbody"> <div align="center"><? echo $front1 ?> <p> </p> <p align="center"><span class="font2">Call us Today at</span><br> <span class="font1"><? echo $tel ?></span><br> <span class="font1"><? echo $cel ?></span></p> <p align="center"><BR> <img src="http://www.rotovac-hosting.com/imageserv/adview.php?what=bannerid:24" alt="Left Spinning Rotovac Carpet Cleaning Head" width="85" height="85"> <img src="http://www.rotovac-hosting.com/imageserv/adview.php?what=bannerid:23" alt="Right Spinning Rotovac Carpet Cleaning Head" width="85" height="85"></p> <p> </p> <p> <p align="center"><BR> <BR> <!-- end CONTENT section. do not alter code below this point --> </p> </div> </td> <!-- RIGHT HAND MENU --> </TABLE> <!-- FOOTER TABLE --> <table width="900" cellspacing="0" cellpadding="0" border="0"> <tr> <td align="center" colspan="3" height="3" class="bgcolor4"> We accept the following credit cards <br> <br> <img src="http://www.rotovac-hosting.com/imageserv/adview.php?what=bannerid:<? echo $image1 ?>"> <img src="http://www.rotovac-hosting.com/imageserv/adview.php?what=bannerid:<? echo $image2 ?>"> <img src="http://www.rotovac-hosting.com/imageserv/adview.php?what=bannerid:<? echo $image3 ?>"> <img src="http://www.rotovac-hosting.com/imageserv/adview.php?what=bannerid:<? echo $image4 ?>"> </td> </tr> <tr> <td colspan="3" align="center" bgcolor="#DEDEDE" > <font class="font2 ">COPYRIGHT 2005 ROTOVAC CORP</font> </td> </tr> </table> <!-- END FOOTER TABLE --> </body> </html> Code (markup):
In this, #sidebar { background-color:#680176; float:left; padding-left:0; text-align:center; width:250px; } Code (markup): There's no need to float, and combined with the form's container being positioned relative, it is overlain. Delete the float property. Or, you can remove the position and left properties (replace left with margin-left) from this: (actually do this and the other) #estimate { background-color:#FFFFFF; background-position:center center; border:1px solid #939393; color:#000000; font-family:Arial,Helvetica,sans-serif; font-size:10px; left:12px; padding:0; position:relative; text-align:center; vertical-align:top; width:224px; } Code (markup): I doubt the vertical-align is doing what you expect of it. Why isn't the menu marked up as a list? When posting code, post the server output. The php source does nothing for us. We need to see what the browser sees. cheers, gary
Ok, some advice: If you only have one TD for every TR in your 'table', you shouldn't be using a table in the first place. Even if you are using tables for layout given the design of that page you should only be using ONE of them because you only have two columns - you appear to be using four of them for god knows what reason. The code seems to use empty breaks as spacers - that's what margins and padding are for, there's a mix of HTML 3.2 and XHTML in a HTML 4.01 doctype which is confusing to say the least (at least nix the uppercase tags?!?), you've got empty divs doing nothing, align properties on tags set to the default behavior (left) - NOT that one should be using the align property in 2008, there's nothing resembling a semantic heading, the content paragraphs are poorly marked up, I've got no clue what the devil is going on with that 'list' of what they do apart from some goofy spacings, and you are knee deep in tags like FONT which frankly have no place on a modern page. Basically you have your PHP outputting 14k of markup for only 3.5k of content - easily DOUBLE what should be needed for such a simple design. The offending element appears to be #estimate, though with the jumbled mess of HTML you have I'd have to throw it all out and recode to even have a clue what's going wrong here... A good start might be to VALIDATE your code since any one of those 65 validation errors could be your culprit, though I'd look to the missing TR's, use of the same ID more than once, markup not matching your doctype, closing tags for unopened elements, missing closing tags, and non-existant attributes as a start. To boil it down for you, what your php is outputting is not HTML, it's gibberish - and the ONLY reason it works in IE is that the rendering ERRORS happen to be what you want for appearance. As I often tell people - throw it out and start over, there's nothing here you can salvage.