StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POTrying to center page in every type of browser --- works in most, not in others
text
Body
copied!<p>I've done a very simple html set of pages for this site: <a href="http://www.soilexpress.com/environmental.php" rel="nofollow">http://www.soilexpress.com/environmental.php</a></p> <p>on most devices, it centers correctly within the size of the browser window, with equal margins on either side.</p> <p>I've had some reports of specific problem machines though:</p> <p>On ie10 (large screen laptop) it looked off-center to the right.</p> <p>On iphone 4G (portrait or landscape) the page was off-center to the right.</p> <p>I'm wondering if someone can tell me the device/browser specific lines to put at the top so it will always be centered.</p> <p>I believe the problem comes from my identification (or lack) of the type of document at the top of the page and thinking maybe I should add some If statement at the top to allow for a more strict document type for certain browsers????</p> <p>As it is now, it is merely identified as <code>html</code>. If I change the description to a more detailed type, it changes the centering. </p> <p>I appreciate the help. thanks.</p> <hr> <h2>Here is the text from the example above -- environmental.php</h2> <pre><code><html> <head><title>Environmental - SoilExpress</title> <link rel="shortcut icon" href="/favicon.ico"> <link href='http://fonts.googleapis.com/css?family=Lato:300,900' rel='stylesheet' type='text/css'> <style type="text/css">  </style> </head> <body background='/web_images/level3-background.png' marginheight="0" topmargin="0">  <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr><td width='50%'><img src='/web_images/trs.gif' height='1' width='1'></td> <td valign="top" width="1200">  <table width="1200" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" width="1200" colspan='6'> <a href='/'> <img src='/web_images/row-header.png' width='1200' height='120' style='vertical-align: top;'> </a> </td> </tr>  <tr> <td> <img src='/web_images/row-nav1.png' width='207' height='136' style='vertical-align: top;'> </td> <td> <a href='/safety.php'> <img src='/web_images/row-nav-safety.png' width='185' height='136' style='vertical-align: top;'> </a> </td> <td> <a href='/equipment.php'> <img src='/web_images/row-nav-equipment.png' width='220' height='136' style='vertical-align: top;'> </a> </td> <td> <a href='/capable.php'> <img src='/web_images/row-nav-capable.png' width='165' height='136' style='vertical-align: top;'> </a> </td> <td> <a href='/environmental.php'> <img src='/web_images/row-nav-environmental.png' width='218' height='136' style='vertical-align: top;'> </a> </td> <td> <img src='/web_images/row-nav1.png' width='205' height='136' style='vertical-align: top;'> </td> </tr> <tr> <td valign="top" width="1200" colspan='6'> <img src='/web_images/environmental.png' width='1200' height='750'> </td> </tr> <tr> <td valign="top" width="1200" colspan='6'> <table width='1200' cellspacing='0' cellpadding='0' border='0'> <tr><td bgcolor='black'> <img src='/web_images/trs.gif' width='381' height='1'> </td> <td bgcolor='black'> <a href='/contact.php'> <img src='/web_images/footer-contact-link.png' width='123' height='92' style='vertical-align: top;'> </a> </td> <td bgcolor='black'> <a href='/'> <img src='/web_images/footer-home-link.png' width='196' height='92' style='vertical-align: top;'> </a> </td> <td bgcolor='black'> <img src='/web_images/footer-copyright.png' width='500' height='92' style='vertical-align: top;'> </td> </tr> </table> </td> </tr> </table> </td><td width='50%'><img src='/web_images/trs.gif' height='1' width='1'></td> </tr></table> </body></html> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload