I can't figure out why the table in this page won't center, I've tried all the settings and code I can find and the most it will do is center the elements inside the table, not the table itself. I've centered tables before, I don't know why this one is different. Any help would be appreciated. Oh and it's being viewed in IE7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CCS Office Navigator</title> <style type="text/css"> .style1 { text-align: center; } .style3 { text-align: left; } </style> </head> <body bgcolor="#cbe3f0" background="spokebackground.jpg"> <h1 align="left"><img alt="" src="image.jpg" width="750" height="83" /></h1> <div class="style1"> <strong>YOU CAN USE OFFICE NAVIGATOR TO INSTANTLY LOCATE PEOPLE, RESOURCES SUCH AS MEETING ROOMS, AND PRINTERS. SIMPLY SELECT A NAME OR ROOM FROM THE LISTS AND LOOK FOR THE COMPASS ROSE. TO MAP A PRINTER CLICK ITS ICON OR HOVER OVER IT FOR MORE INFORMATION.</strong><br /> <br /> </div> <table style="width: 1200px; float: left; height: 700px;" align="center" cellspacing="1"> <tr> <td valign="top" class="style1" style="width: 200px"><form> <select onchange="document.getElementById('viewer').src=(this.value)" multiple="multiple" name="People" style="height:255px; width:220px;"> <option value="Maps\16_WEST.jpg">Test Name 1</option> <option value="Location_Files\test_image_file.htm">Test 2</option> <option value="1662">Test 3</option> <option value="1661">Test 4</option> <option value="image2">Test 5</option> <option value="">Test 6</option> <option value="">Test 7</option> <option value="">Test 8</option> <option value="">Test 9</option> <option value="">Test 10</option> <option value="">Test 11</option> <option value="">Test 12</option> <option value="">Test 13</option> <option value="">Test 14</option> <option value="">Test 15</option> <option value="">Test 16</option> </select> <br /> <select onchange="document.getElementById('viewer').src=(this.value)" multiple="multiple" name="Floors" style="height:90px; width:220px; "> <option value="Location_Files\Maps\MAP_FILE_16TH_FLR.htm">16TH FLOOR</option> <option value="">17TH FLOOR</option> <option value="1662">18TH FLOOR</option> <option value="1661">19TH FLOOR</option> </select> <br /> <select onchange="document.getElementById('viewer').src=(this.value)" multiple="multiple" name="Resources" style="height:255px; width:220px"> <option value="">MEETING RM-17 MEDIUM SW</option> <option value="">TEST ROOM 2</option> <option value="">TEST ROOM 3</option> <option value="">TEST ROOM 4</option> <option value="">TEST ROOM 2</option> <option value="">TEST ROOM 3</option> <option value="">TEST ROOM 4</option> <option value="">TEST ROOM 2</option> <option value="">TEST ROOM 3</option> <option value="">TEST ROOM 4</option> <option value="">TEST ROOM 2</option> <option value="">TEST ROOM 3</option> <option value="">TEST ROOM 4</option> <option value="">TEST ROOM 2</option> <option value="">TEST ROOM 3</option> <option value="">TEST ROOM 4</option> </select></form> <br /> </td> <td style="width: 800px; height: 700px;" valign="top" class="style3" align="left"> <iframe id="viewer" width="1000" height="660" src="front_page.jpg" marginwidth="1" marginheight="1" name="viewer"></iframe> </td> </tr> </table> </body> </html>
Because you have float left in your table tag. <table style="width: 1200px; float: left; height: 700px;" align="center" cellspacing="1">
Yea, the float was killing it. Besides I have a trick. use <div align="center"> tht shud do the trick.