Trying to center and it's not working!

HTML & CSS
1

I want to thank in advance anyone who can help me figure this out. trying to center a table:

 <body>
    <h2 id="tagline"><img src="F:/new website/pics/logo_final.jpg" alt="University Neuromuscular Massage"/><br>Restoring Balance, One Massage At A Time</h2>
   
    <ul id="navigation">
      <li><a HREF="index.html">Home</a></li>
      <li><a HREF="services.html">Services</a></li>
      <li><a HREF="prices.html">Prices</a></li>
      <li><a HREF="contact.html">Contact Us</a></li>
      <li><a HREF="therapists.html">Meet Our Therapists</a></li>
    </ul>

    <table id="singleprices">
      <tr>
        <th>Time Length</th>
        <th>Price</th>
      </tr>
      <tr>
        <td><sup>1</sup>/<sub>2</sub> Hour</td>
        <td>$40</td>
      </tr>
      <tr>
        <td>1 Hour</td>
        <td>$70</td>
      </tr>
      <tr>
        <td>1 <sup>1</sup>/<sub>2</sub> Hours</td>
        <td>$105</td>
      </tr>
      <tr>
        <td>2 Hours</td>
        <td>$130</td>
      </tr>
    </table>

  </body>

styled with:

#singleprices {
  position: relative;
  top:5em;
  margin: 0 auto;
}

#singleprices
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 18px;
	background: white;
	width: 480px;
	border-collapse: collapse;
	text-align: left;
}
#singleprices th
{
	font-size: 20px;
	font-weight: normal;
	color: red;
	padding: 10px 8px;
	border-bottom: 2px solid #7C7C7B;
      text-align: left;
}
#singleprices td
{
	padding: 9px 8px 0px 8px;
}
#singleprices tbody tr:hover td
{
	color: blue;
}

and i’m not sure why it doesn’t work.

2

It’s centered for me (Firefox). What browser are you testing in?

3

both firefox and ie9. other issue is ie shows my logo, ff did not. this is not a live site yet, still just saved to a flash drive. not sure what is going on.

4

I left out some of my code, only posting what I thought was relevant. Maybe there is something that is over-riding it, so here is all that I have:

  <head>
    <title>University Neuromuscular Massage - Serving North Charlotte, Concord and surrounding area</title>
  <meta http-equiv="Content-Type"
    content="text/html; charset=utf-8"/>
  <link href="style.css" rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <h2 id="tagline"><img src="F:/new website/pics/logo_final.jpg" alt="University Neuromuscular Massage"/><br>Restoring Balance, One Massage At A Time</h2>
   
    <ul id="navigation">
      <li><a HREF="index.html">Home</a></li>
      <li><a HREF="services.html">Services</a></li>
      <li><a HREF="prices.html">Prices</a></li>
      <li><a HREF="contact.html">Contact Us</a></li>
      <li><a HREF="therapists.html">Meet Our Therapists</a></li>
    </ul>

    <table id="singleprices">
      <tr>
        <th>Time Length</th>
        <th>Price</th>
      </tr>
      <tr>
        <td><sup>1</sup>/<sub>2</sub> Hour</td>
        <td>$40</td>
      </tr>
      <tr>
        <td>1 Hour</td>
        <td>$70</td>
      </tr>
      <tr>
        <td>1 <sup>1</sup>/<sub>2</sub> Hours</td>
        <td>$105</td>
      </tr>
      <tr>
        <td>2 Hours</td>
        <td>$130</td>
      </tr>
    </table>

  </body>
</html>

and css:

/*----------
CSS for UNM
*/

#body {
  width: 100%;
  text-align: center;
}

/*------------
Navigation stuff
*/

#navigation {
 float:right;
 position:relative;
 left:-50%;
 text-align:left;
 font-size: 16pt;
 }

#navigation li{
  list-style: none;
  float:left;
  position:relative;
 left:50%;
}
/* ie needs position:relative here*/

#navigation a{
 text-decoration:none;
 margin:10px;
 background:red;
 float:left;
 border:2px outset blue;
 color:white;
 padding:2px 5px;
 text-align:center;

}
 #navigation a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
 #content{overflow:hidden}/* hide horizontal scrollbar*/


/*-----------------------
END OF NAVIGATION STUFF
*/


/*------------------
logo and tag line position
*/

#tagline{ text-align: center; }
#tagline br {display:none;}
#tagline img {display:block; margin:0 auto;}

/*------------------
END LOGO POSITION
*/

/*------------------
Prices table design
*/

#singleprices {
  position: relative;
  top:5em;
  margin: 0 auto;
}

#singleprices
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 18px;
	background: white;
	width: 480px;
	border-collapse: collapse;
	text-align: left;
}
#singleprices th
{
	font-size: 20px;
	font-weight: normal;
	color: red;
	padding: 10px 8px;
	border-bottom: 2px solid #7C7C7B;
      text-align: left;
}
#singleprices td
{
	padding: 9px 8px 0px 8px;
}
#singleprices tbody tr:hover td
{
	color: blue;
}

/*------------------
  END TABLE DESIGN
*/

</style>
5

The page is centered for me also unless you aren’t using a doctype and then IE won’t center it.

There’s probably a path issue with your flash drive so save the file onto the computers hard disk instead and see if that resolves it.

6

have doc type set. why would pic show up in ie, but not ff? opened same file, open with ie, then open w/ff, no logo. the only thing i can think of, table is not in any parent container, other than body. Does it have to be in a block level container for auto margins to work?

7

Try clearing the floats as its probably snagging on them.


#singleprices {
    position: relative;
    top:5em;
    margin: 0 auto;
   [B] clear:both[/B]
}
8

I concur it’s probably a float related issue.

9

You need to add a width to your table class

#singleprices {
    position: relative;
    top:5em;
    margin: 0 auto;
    clear:both;
    width:500px;
}
10

Also, the “top” element is only used with absolute, fixed or static positions. Use

margin:5px 0 0 0;
11

Uhm, I think you mean relative, not static… It’s ignored on static and OBEYED on relative.

12

No you don’t need a width on tables to center them because they have intrinsic dimensions and are centred automatically using margin:auto (unlike normal elements which do require a width).

The problem is that the float wasn’t cleared and the table was snagging.:slight_smile:

13

it was a float issue. I forgot float was used to center table. can you explain the clear:both attribute? why/how it worked? thanx

14

When you float an element any content that follows the float will wrap around the floated element (assuming there is room). If you don’t want any content to wrap then you must add clear:both to the element that you don’t want to wrap.

This tells the element to make sure that is is clear of the float above and will start on a new line under the float.

You can read up on the exact details here.