iconoclastic Posted February 2, 2008 Report Share Posted February 2, 2008 The page http://www.geocities.com/catcsstemplate/index.html appears exactly how I want it to in Internet Explorer, but in Firefox the table won't centre. Any help will be appreciated.My code for the CSS is: body {background-color: black;font-family: verdana, arial, sans-serif;text-align:center;color: #FFFFCC}a:link {text-decoration: none; color: #FFCC00}a:visited {text-decoration: none; color: #FFCC00}a:hover {text-decoration: none; color: #CCCCFF}a:active {text-decoration: none; color: #FFCC00}h1 {text-align: center;font-size: 18pt}p.left {font-size: 8pt;text-align: justify;color: #FFCC00}p.center {text-align: center;font-size: 10pt}p.justify {text-align: justify;font-size: 10pt}p.small {text-align: center;font-size: 8pt}div#header {clear: both;height: 110px;padding: 5px}div#left {float: left;width: 150px;padding: 5px}div#right {float: right;width: 150px;padding: 5px;font-size: 10pt;}div#middle {padding: 0px 160px 5px 160px;margin: 0px auto}div#footer {clear: both;position: relative;margin: -10px auto 0 auto}table.title th, table.title td {font-size: 10pt;text-align: center;padding: 5px;}img{border-style: none} And for the XHTML: <!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" lang="en" xml:lang="en"><head><title>Title</title><link rel="stylesheet" type="text/css" href="stylesheet.css" /></head><body><div id="header"><img class="center" src="logo.jpg" alt="Logo" /></div><div id="left"><p class="left"><a href="http://www.google.co.uk"><strong>Link</strong></a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><br /><a href="http://www.google.co.uk"><strong>Link</strong></a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><br /><a href="http://www.google.co.uk"><strong>Link</strong></a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><br /><a href="http://www.google.co.uk"><strong>Link</strong></a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><br /><a href="http://www.google.co.uk"><strong>Link</strong></a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><br /><a href="http://www.google.co.uk"><strong>Link</strong></a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /><a href="http://www.google.co.uk">Link</a><br /></p></div><div id="right"><p>Lorem ipsum dolor sit amet, sed ornare id nullam, sed consectetuer, potenti arcu magna elementum adipiscing nec quis, nunc massa, non enim arcu sed in justo eligendi. Suscipit tempor. Porta suscipit quam tortor condimentum, cras pretium pellentesque, amet fringilla est. Et nisl velit mattis, sit ultrices fames, purus faucibus consectetuer neque neque, quam bibendum integer, in sed ac ac. Quis convallis ac, odio sociosqu platea imperdiet eu libero, dolor mollis ut, sed odio pellentesque nibh blandit urna, non vel pellentesque.<br />Lorem ipsum dolor sit amet, sed ornare id nullam, sed consectetuer, potenti arcu magna elementum adipiscing nec quis, nunc massa, non enim arcu sed in justo eligendi. Suscipit tempor. Porta suscipit quam tortor condimentum, cras pretium pellentesque, amet fringilla est. Et nisl velit mattis, sit ultrices fames, purus faucibus consectetuer neque neque, quam bibendum integer, in sed ac ac. Quis convallis ac, odio sociosqu platea imperdiet eu libero, dolor mollis ut, sed odio pellentesque nibh blandit urna, non vel pellentesque.</p></div><div id="middle"><h1>Title</h1><p class="center">Lorem ipsum dolor sit amet, sed ornare id nullam, sed consectetuer, potenti arcu magna elementum adipiscing nec quis, nunc massa, non enim arcu sed in justo eligendi. Suscipit tempor. Porta suscipit quam tortor condimentum, cras pretium pellentesque, amet fringilla est. Et nisl velit mattis, sit ultrices fames, purus faucibus consectetuer neque neque, quam bibendum integer, in sed ac ac. Quis convallis ac, odio sociosqu platea imperdiet eu libero, dolor mollis ut, sed odio pellentesque nibh blandit urna, non vel pellentesque.</p><table class="title"><tr><td><a href="http://www.google.co.uk"><img src="image.jpg" alt="Image" /></a></td><td><a href="http://www.google.co.uk"><img src="image.jpg" alt="Image" /></a></td><td><a href="http://www.google.co.uk"><img src="image.jpg" alt="Image" /></a></td></tr><tr><td><strong>Heading</strong></td><td><strong>Heading</strong></td><td><strong>Heading</strong></td></tr></table><p class="center">Lorem ipsum dolor sit amet, sed ornare id nullam, sed consectetuer, potenti arcu magna elementum adipiscing nec quis, nunc massa, non enim arcu sed in justo eligendi. Suscipit tempor. Porta suscipit quam tortor condimentum, cras pretium pellentesque, amet fringilla est. Et nisl velit mattis, sit ultrices fames, purus faucibus consectetuer neque neque, quam bibendum integer, in sed ac ac. Quis convallis ac, odio sociosqu platea imperdiet eu libero, dolor mollis ut, sed odio pellentesque nibh blandit urna, non vel pellentesque.<br />Lorem ipsum dolor sit amet, sed ornare id nullam, sed consectetuer, potenti arcu magna elementum adipiscing nec quis, nunc massa, non enim arcu sed in justo eligendi. Suscipit tempor. Porta suscipit quam tortor condimentum, cras pretium pellentesque, amet fringilla est. Et nisl velit mattis, sit ultrices fames, purus faucibus consectetuer neque neque, quam bibendum integer, in sed ac ac. Quis convallis ac, odio sociosqu platea imperdiet eu libero, dolor mollis ut, sed odio pellentesque nibh blandit urna, non vel pellentesque.<br />Lorem ipsum dolor sit amet, sed ornare id nullam, sed consectetuer, potenti arcu magna elementum adipiscing nec quis, nunc massa, non enim arcu sed in justo eligendi. Suscipit tempor. Porta suscipit quam tortor condimentum, cras pretium pellentesque, amet fringilla est. Et nisl velit mattis, sit ultrices fames, purus faucibus consectetuer neque neque, quam bibendum integer, in sed ac ac. Quis convallis ac, odio sociosqu platea imperdiet eu libero, dolor mollis ut, sed odio pellentesque nibh blandit urna, non vel pellentesque.</p></div><div id="footer"><p class="small">Lorem ipsum dolor sit amet, sed ornare id nullam, sed consectetuer, potenti arcu magna elementum adipiscing nec quis, nunc massa, non enim arcu sed in justo eligendi. Suscipit tempor. Porta suscipit quam tortor condimentum, cras pretium pellentesque, amet fringilla est. Et nisl velit mattis, sit ultrices fames, purus faucibus consectetuer neque neque, quam bibendum integer, in sed ac ac. Quis convallis ac, odio sociosqu platea imperdiet eu libero, dolor mollis ut, sed odio pellentesque nibh blandit urna, non vel pellentesque.<br />| <a href="http://www.google.co.uk">Link</a> | <a href="http://www.google.co.uk">Link</a> | <a href="http://www.google.co.uk">Link</a> |</p></div></body></html> Thanks Link to comment Share on other sites More sharing options...
Ingolme Posted February 3, 2008 Report Share Posted February 3, 2008 Try wrapping your whole document in an extra div tag:...<body><div id="everything">......</div></body>...And apply this CSS:div#everything {text-align: left;margin: 0 auto;} Link to comment Share on other sites More sharing options...
iconoclastic Posted February 3, 2008 Author Report Share Posted February 3, 2008 Nope, still doesn't work! Link to comment Share on other sites More sharing options...
Ingolme Posted February 3, 2008 Report Share Posted February 3, 2008 Nope, still doesn't work!Actually, I should fix that. Seeing as this is specifically for the table, this CSS should probably work (the parent <p> element already has "text-align: center"):table.title {margin: 0 auto;} Link to comment Share on other sites More sharing options...
Synook Posted February 3, 2008 Report Share Posted February 3, 2008 What about applying margin:0 auto; to your table? Link to comment Share on other sites More sharing options...
newseed Posted February 3, 2008 Report Share Posted February 3, 2008 The problem is that the table does not have a width. Give it a width="100%" Link to comment Share on other sites More sharing options...
Ingolme Posted February 3, 2008 Report Share Posted February 3, 2008 A table doesn't necessarily need a width, sometimes you just want it to take the exact space of the content within it. Link to comment Share on other sites More sharing options...
iconoclastic Posted February 3, 2008 Author Report Share Posted February 3, 2008 I've finally figured out that the table wasn't centring because when I added margin: 0 auto; I was adding it under table.title th, table.title td { instead of table.title { I feel a bit stupid now...Thanks for all your help! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now