[NevNic]

See: care-in-the-vale - Home Page

Anyone know why the Table lower in the page is not centred, even though I have coded 'align = center'?

CSS:

@charset "iso-8859-1";
body {
font-family: Calibri;
margin: 0;
padding: 0;
background-color: #193EBC; /*dark blue*/;
color: #193EBC;
}
/*===============indicates no border around any image ============*/
body img {
border: 0px;
text-decoration: none;
}
/* ============ margins auto center the container on the page ==========*/
#container {
margin: 10px auto 10px auto;
padding: 30px;
background-color: #ffffff;
width: 80%;
max-width: 1300px;
}
/*=================== styles for top banner ========================*/
#banner {
margin: 10 0 10 0;
background-position: center;
padding: 0px;
background-color: #C4E3F7;
background-image: url('images/care-in-the-vale_banner.gif');
height: 90px;
background-repeat: no-repeat;
color: #C4E3F7;
max-width: 100%;
max-height: 255px;
}
/*=================== styles for wrapping text ========================*/
#wrap {
position: relative;
font-size: large;
width: 700px;
padding: 50px 20px;
margin: 0 auto;
position: relative;
border-top-color: #193EBC;
}
/*=================== styles for Home menu ======================*/
ul#css3menuhome,ul#css3menuhome ul{
margin:0;list-style:none;padding:0;background-color:#ffffff;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menuhome ul{
display:none;position:absolute;left:100%;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 10px;background-color:#ffffff;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#193ebc;}
ul#css3menuhome li:hover>*{
display:block;}
ul#css3menuhome li:hover{
position:relative;}
ul#css3menuhome ul ul{
position:absolute;left:100%;top:0;}
ul#css3menuhome{
display:block;font-size:0;float:left;}
ul#css3menuhome li{
display:block;white-space:nowrap;font-size:0;}
ul#css3menuhome>li,ul#css3menuhome li{
margin: 0;
background-color: #ffffff;
padding-bottom: 0px;
}
ul#css3menuhome a:active, ul#css3menuhome a:focus{
outline-style:none;}
ul#css3menuhome a,ul#css3menuhome a.pressed{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 11px Arial;color:#193ebc;text-shadow:#FFF 0 0 1px;cursorointer;}
ul#css3menuhome ul li{
float:none;margin:10px 0 0;}
ul#css3menuhome ul a{
text-align:left;padding:4px;background-color:#ffffff;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 14px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuhome li:hover>a{
background-color:#ffc000;border-color:#193ebc;border-style:solid;font:bold 11px Arial;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menuhome img{
border:none;vertical-align:middle;margin-right:10px;}
ul#css3menuhome img.over{
display:none;}
ul#css3menuhome li:hover > a img.def{
display:none;}
ul#css3menuhome li:hover > a img.over{
display:inline;}
ul#css3menuhome li a.pressed img.over{
display:inline;}
ul#css3menuhome li a.pressed img.def{
display:none;}
ul#css3menuhome span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menuhome a{
padding:10px;background-color:#ffffff;background-image:url("images/mainbk.png");background-repeat:repeat;background-position:0 0;border-width:1px 0 0 0;border-style:solid;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuhome li:hover>a,ul#css3menuhome li>a.pressed{
background-color:#ffc000;background-image:url("images/mainbk.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuhome ul li:hover>a,ul#css3menuhome ul li>a.pressed{
background-color:#c4e3f7;background-image:none;font:bold 14px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuhome li.toplast>a{
border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;}
/*=================== styles for top menu ======================*/
ul#css3menuh,ul#css3menuh ul{
margin:0;list-style:none;padding:0;background-color:#ffffff;border-width:0px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menuh ul{
display:none;position:absolute;right:0;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 10px;background-color:#ffffff;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#193ebc;}
ul#css3menuh li:hover>*{
display:block;}
ul#css3menuh li:hover{
position:relative;}
ul#css3menuh ul ul{
position:absolute;right:0;top:0;}
ul#css3menuh{
display:block;font-size:0;float:right;}
ul#css3menuh li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menuh>li,ul#css3menuh li{
margin: 0;
background-color: #ffc000;
}
ul#css3menuh a:active, ul#css3menuh a:focus{
outline-style:none;}
ul#css3menuh a,ul#css3menuh a.pressed{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 11px Arial;color:#193ebc;text-shadow:#FFF 0 0 1px;cursorointer;}
ul#css3menuh ul li{
float:none;margin:10px 0 0;}
ul#css3menuh ul a{
text-align:left;padding:4px;background-color:#ffffff;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 11px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuh li:hover>a{
background-color:#ffc000;border-color:#193ebc;border-style:solid;font:bold 11px Arial;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menuh img{
border:none;vertical-align:middle;margin-right:10px;}
ul#css3menuh img.over{
display:none;}
ul#css3menuh li:hover > a img.def{
display:none;}
ul#css3menuh li:hover > a img.over{
display:inline;}
ul#css3menuh li a.pressed img.over{
display:inline;}
ul#css3menuh li a.pressed img.def{
display:none;}
ul#css3menuh span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menuh ul span{
background-image:url("arrowsub.png");padding-right:28px;}
ul#css3menuh a{
padding:10px;background-color:#ffffff;background-image:url("images/mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuh li:hover>a,ul#css3menuh li>a.pressed{
background-color:#ffc000;background-image:url("images/mainbk.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuh ul li:hover>a,ul#css3menuh ul li>a.pressed{
background-color:#c4e3f7;background-image:none;font:bold 11px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuh li.topfirst>a{
height:18px;line-height:18px;border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menuh li.topfirst:hover>a,ul#css3menuh li.topfirst>a.pressed{
line-height:18px;}
ul#css3menuh li.topmenu>a{
height:18px;line-height:18px;}
ul#css3menuh li.topmenu:hover>a,ul#css3menuh li.topmenu>a.pressed{
line-height:18px;}
ul#css3menuh li.toplast>a{
height:18px;line-height:18px;border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;}
ul#css3menuh li.toplast:hover>a,ul#css3menuh li.toplast>a.pressed{
line-height:18px;}

/*=================== style for side menu ======================*/
ul#css3menuV,ul#css3menuV ul{
margin:0;list-style:none;padding:0;background-color:#ffffff;border-width:0px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menuV ul{
display:none;position:absolute;left:100%;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 10px;background-color:#ffffff;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#193ebc;}
ul#css3menuV li:hover>*{
display:block;}
ul#css3menuV li:hover{
position:relative;}
ul#css3menuV ul ul{
position:absolute;left:100%;top:0;}
ul#css3menuV{
display:block;font-size:0;float:left;}
ul#css3menuV li{
display:block;white-space:nowrap;font-size:0;}
ul#css3menuV>li,ul#css3menuV li{
margin:0;}
ul#css3menuV a:active, ul#css3menuV a:focus{
outline-style:none;}
ul#css3menuV a,ul#css3menuV a.pressed{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 11px Arial;color:#193ebc;text-shadow:#FFF 0 0 1px;cursorointer;}
ul#css3menuV ul li{
float:none;margin:10px 0 0;}
ul#css3menuV ul a{
text-align:left;padding:4px;background-color:#ffffff;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 11px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuV li:hover>a{
background-color:#c4e3f7;border-color:#193ebc;border-style:solid;font:bold 11px Arial;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menuV img{
border:none;vertical-align:middle;margin-right:10px;}
ul#css3menuV img.over{
display:none;}
ul#css3menuV li:hover > a img.def{
display:none;}
ul#css3menuV li:hover > a img.over{
display:inline;}
ul#css3menuV li a.pressed img.over{
display:inline;}
ul#css3menuV li a.pressed img.def{
display:none;}
ul#css3menuV span{
border-color: #193ebc;
border-width: 1px;
border: #193ebc;
display: block;
overflow: visible;
background-position: right center;
background-repeat: no-repeat;
padding-right: 0px;
}
ul#css3menuV a{
padding:10px;background-color:#ffffff;background-image:url("images/mainbk.png");background-repeat:repeat;background-position:0 0;border-width:1px 0 0 0;border-style:solid;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuV li:hover>a,ul#css3menuV li>a.pressed{
background-color:#c4e3f7;background-image:url("images/mainbk.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuV ul li:hover>a,ul#css3menuV ul li>a.pressed{
background-color:#c4e3f7;background-image:none;font:bold 11px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuV li.topfirst>a{
border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
ul#css3menuV li.toplast>a{
border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;}
/*==============all site links==============*/
a:link {
font-weight: bold;
color: #193EBC;
background: transparent;
text-decoration: underline;
}
a:visited{
font-weight: bold;
color: #000000;
background: transparent;
padding: 0px;
text-decoration: underline;
}
a:hover {
font-weight: bold;
text-decoration : none;
background: #C47B7B;
color: #ffffff;
}
a:active {
font-weight: bold;
text-decoration : underline;
background: #BFDFE2;
color: #000000;
}
/*====================== styles for main content area =========================*/
#content {
margin-left: 180px;
padding: 5px;
text-align: left;
vertical-align: top;
color: #193EBC;
font-family: Calibri;
}
/*===========content area list items==============*/
#content ul li {
list-style-image: url('images/pink-bullet-bg.gif');
margin: 2px;
padding: 2px;
}
#content li li {
list-style-image: url('images/pink-bullet-sm.gif');
padding: 2px 0;
}
/*============== Styles for table ===================*/
#tablediv {
display: table;
width:600px;
background-color:#ffffff;
border:0px solid #666666;
border-spacing:5px;
border-collapse:separate;
}
#celldiv {
float:left;/*fix for buggy browsers*/
display: table-cell;
width:50%;
background-color:#ffffff;
}
#rowdiv {
display: table-row;
width:auto;
}
#auto-style1 {
text-align: center;
}
.auto-style2 {
font-size: x-small;
font-family: Arial, Helvetica, sans-serif;
color: #193EBC;
}
.auto-style3 {
margin-left: 13px;
}
/*============== Styles for footer ===================*/
#footer {
border-top: 2px solid #193EBC;
clear: both;
padding: 5px;
background-color: #63b4eb;
text-align: center;
color: #193EBC;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
white-space: normal;
}
#footer p {
margin-top: 0px;
margin-bottom: 0px;
}
/*================== general styles =================*/
hr {
width: 50%;
text-align: center;
background-color: #004145;
height: 5px;
}
/* =================Styles for heading tags =============== */
h1, h2, h3, h4 {
color: #193EBC;
background-color: inherit;
font-family: Calibri;
}
h1 {
font-size: 1.8em;
padding: 3px 0px 3px 10px;
color: #193EBC;
background-color: #FFFFFF;
font-family: Calibri;
font-weight: bold;
font-style: italic;
}
h2 {
font-size: 1.3em;
color: #193EBC;
font-family: Calibri;
}
h3 {
font-size: 1em;
color: #193EBC;
background-color: #FFFFFF;
}
h4 {
font-size: .9em;
color: #193EBC;
background-color: #FFFFFF;
}
/*================used to center anything==============*/
.center {
text-align: center;
}
/* ============floats images to right or left ============*/
.imgrgt {
float: right;
padding: 7px;
}
.imglft {
float: left;
padding: 7px;
}
.smtxt {
font-size:small;
}

 

[Laxer]

A few things could be causing this, one:
your using

<table style="width: 100%;" align="center">

dropping the width to a fixed number might fix it.

Usually when i see people centering tables they do something like:

<table style="width: 100%;">
<tr><td>
<table style="width: 80%;" align="center">
</table>
</td><tr/>
</table>

 

[DDAoN]

Laxer has is pretty much as it is. You can't center something that takes up the entire width of the page. However, you don't need to embed it in another table to make it work.

If it's the text you want centered, not the actual table, simply add the attribute text-align="center" to the table and it'll center all text within the table unless specified on the row or cell level.

 

[NevNic]

Thank you Laxer and DDAoN.

That does the trick in that the table is now centred on the complete page width.

Any advice on how I might centre the table beneath the text immediately above the table?

 

[Laxer]

No problem, I'm always glad to help.

Check your other post i fixed some of your nav for you.

 

[DDAoN]

Would I be right to assume you are referring to this segment of code?

<div id="TICKER" STYLE="overflow:hidden; width:520px"  onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false">
  NEWS FLASH .........................Now Recruiting. To book your place on an Open Day, please telephone 07941 785 809 or 07818 531 958<br />
 <br />
<script type="text/javascript" src="../care-in-the-vale/webticker_lib.js" language="javascript"></script>
  <table style="width: 100%;">
<tr><td>
<table style="width: 80%;" align="center">
   <tr>
    <td style="width: 218px">
    <img alt="Penarth Town Centre" height="130" src="images/Penarth_Town_Centre_213x160.jpg" width="217" class="auto-style9" /></td>
    <td><img alt="Quote - Shoot for the moon. Even if you miss, you'll land among the stars - End Quote" height="138" src="images/quote18_moon-stars.gif" width="189" class="auto-style3" /></td>
   </tr>
   <tr>
    <td style="width: 218px"><span class="auto-style6">Royal Buildings on the western 
 corner of <br />
 Stanwell Road and Victoria Road, Penarth.</span><br class="auto-style6" />
  <br class="auto-style6" />
 <span class="auto-style7"><strong><em>care-in-the-vale</em></strong></span><span class="auto-style6"> has its offices in this block, on 
 Stanwell Road. </span><br class="auto-style6" />
 <br class="auto-style6" />
 <span class="auto-style6">© Copyright </span>
 <a href="http://www.geograph.org.uk/profile/39302">
 <span class="auto-style6">John Grayson</span></a><span class="auto-style6"> 
 and licensed for </span>
 <a href="http://www.geograph.org.uk/reuse.php?id=1972630">
 <span class="auto-style6">reuse</span></a><span class="auto-style6"> under 
 this </span><a href="http://creativecommons.org/licenses/by-sa/2.0/">
 <span class="auto-style6">Creative Commons Licence</span></a><span class="auto-style5">.</span></td>
    <td class="center">
    <img alt="care-in-the-vale Penarth Office" height="99" longdesc="care-in-the-vale, 12A Royal Buildings, Stanwell Road, Penarth, Vale of Glamorgan, CF64 3ED" src="images/shopfront.jpg" width="105" style="float: left" /></td>
   </tr>
</table>
</td><tr/>
</table>
</div>

If so, the solution is relatively easy, apply the align="center" attribute to the parent table. However, that will only center the content within the parent <DIV></DIV>, which is 520px in width. Okay, you can try putting it in the parent, the "TICKER", <DIV></DIV> instead, well that's only centered inside it's parent, the "Content" <DIV></DIV>, which will do nothing except center align all the text within the <DIV></DIV>. So center the "Content" <DIV></DIV>, well, that simply centers the entire page.

Well, just for you, I have a solution. Around the entire "TICKER" <DIV></DIV> add another <DIV></DIV> with just the align="center" attribute. It should look something like this:

  <div align="center">
   <div id="TICKER" STYLE="overflow:hidden; width:520px;"  onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false">
      NEWS FLASH .........................Now Recruiting. To book your place on an Open Day, please telephone 07941 785 809 or 07818 531 958<br /> <br />
    <script type="text/javascript" src="../care-in-the-vale/webticker_lib.js" language="javascript"></script>
    <table style="width: 100%;">
     <tr>
      <td>
       <table style="width: 80%;" align="center">
        <tr>
         <td style="width: 218px">
         <img alt="Penarth Town Centre" height="130" src="images/Penarth_Town_Centre_213x160.jpg" width="217" class="auto-style9" /></td>
         <td><img alt="Quote - Shoot for the moon. Even if you miss, you'll land among the stars - End Quote" height="138" src="images/quote18_moon-stars.gif" width="189" class="auto-style3" /></td>
        </tr>
        <tr>
         <td style="width: 218px"><span class="auto-style6">Royal Buildings on the western corner of <br />Stanwell Road and Victoria Road, Penarth.</span><br class="auto-style6" /> <br class="auto-style6" /><span class="auto-style7"><strong><em>care-in-the-vale</em></strong></span><span class="auto-style6"> has its offices in this block, on Stanwell Road. </span><br class="auto-style6" /><br class="auto-style6" /><span class="auto-style6">© Copyright </span><a href="http://www.geograph.org.uk/profile/39302"><span class="auto-style6">John Grayson</span></a><span class="auto-style6"> and licensed for </span><a href="http://www.geograph.org.uk/reuse.php?id=1972630"><span class="auto-style6">reuse</span></a><span class="auto-style6"> under this </span><a href="http://creativecommons.org/licenses/by-sa/2.0/"><span class="auto-style6">Creative Commons Licence</span></a><span class="auto-style5">.</span></td>
         <td class="center"><img alt="care-in-the-vale Penarth Office" height="99" longdesc="care-in-the-vale, 12A Royal Buildings, Stanwell Road, Penarth, Vale of Glamorgan, CF64 3ED" src="images/shopfront.jpg" width="105" style="float: left" /></td>
        </tr>
       </table>
      </td>
     <tr/>
    </table>
   </div>
  </div>

Also, just a little professional note for the future (whether it be troubleshooting or otherwise), I highly suggest you organize your code to be more legible. It took me a good 20 minutes to clean it up just to look at your issue. ^^'

I hope it helps.

 

[Laxer]

Good work DDAoN

For basic clean up you can run your source through prettyprint.

 

[DDAoN]

Thanks for the suggestion for PrettyPrinter, but I've never cared much for them as they provide only the most basic of clean-up and sometimes is more of a problem to fix. ^^'

Nah, for me I'll stick to doing it manually, that way I can see the code, like the half a dozen <P> tags without a closing tag. XD

 

[NevNic]

That's it! As DDAoN says: Good work. Many thanks!

Thanks also for the heads up on my code organization - I was going to get around to it, honest!

Thanks to DDAoN also for the PrettyPrinter suggestion, I was not familiar with that.

As ever your invaluable assistance is much appreciated.

(By the way, with reference to my admittedly rather heated response to mcorton, I am a 65-year old self-taught retiree, just trying to get things right .........)

 

[NevNic]

Sorry - got mixed up back there!

For DDAoN read Laxer, and vice-versa....................