CSS padding not working...

[magicalwonders]

I'm having difficulty getting some CSS working and not sure where the problem is!

I'm using the following code to display a box in the right hand bar. This will contain text that will change automatically on a weekly basis.

<table border="0"  width="120px">
    <tr>
      <td class="thinblackline" > 
          <div align="center"><b>What people say</b></div>
     <!--#include virtual="/cgi-bin/randtext/randtext.pl?file=test.dat"-->
           Some random text to test layout... 
     </td>
         </tr>
           </table>

The CSS for this is as follows:

.thinblackline {
  border-width: 1px;
  border-color: #000000;
  border-style: solid;
  padding-top:3px;
  padding-left:5px
  padding-right: 2px;
  padding-bottom: 3px;
  font-size: 0.6em ;
  background: white ;
}

The work in progress can be seen at this url: http://www.magicalwonders.com/acatalog/Exclusives.shtml At the moment I have a couple of examples of text that changes on refresh..

Although the style of border, background color and font-size is being applied, the padding is not - and the text is sticking to the left hand border!

I know I've messed up somewhere. I'm still trying to get to grips with CSS. Can anyone let me know where I've gone wrong?

Many thanks,

Myles

[leehack]

Try closing the left padding style correctly. Your code needs tidying too, table widths should be "200" not "200px".

.thinblackline {
 border: 1px solid #000000;
 padding: 3px 2px 3px 5px;
 font-size: 0.6em;
 background-color: #FFFFFF;
}

Is a shorter way of doing the same CSS and corrects your errors also.

Your code could also be corrected and tidied up:

<table border="0" width="120">
<tr>
    <td class="thinblackline"> 
          <div align="center"><strong>What people say</strong></div>
     <!--#include virtual="/cgi-bin/randtext/randtext.pl?file=test.dat"-->
           Some random text to test layout... 
     </td>
</tr>
</table>

text-align: center; could be added to the class if you want everything centered, you could then remove the centering div in the cell if you wanted it even cleaner. You could even add the width to the CSS.

[magicalwonders]

Thanks for the shortened code Lee,

Defeated by a semi-colon! Even with a screen res of 800 x 600, I still can't see sod all!

padding: 3px 2px 3px 5px;

So just to get my head around the order of these... Is it Top, Right, Bottom, Left ?

text-align: center; could be added to the class if you want everything centered, you could then remove the centering div in the cell if you wanted it even cleaner.

I really just want to centre the headline with the rest of the text, align left. I was thinking a div would achieve that best?

Thanks for the advice.

Myles

[leehack]

That order is correct Myles, think of a compass and the usual order you'd say those points. As for the text aligning, there's a couple ways of doing things, i have no real objection to your method. In all honesty you should be using a <div> not a table, but that's another lesson anyway and you are fine with what you have.

PS - if it's a headline you could perhaps use a <h?> tag.

[magicalwonders]

Thanks Lee,

In all honesty you should be using a <div> not a table,

I knew you were going to say that! LOL
I had previously tried to get this working with a DIV, but there are issues getting borders to display properly. I got it working on my local machine and when I uploaded, the right hand border wouldn't display at all! It seems various browsers have different ways of handling borders on Divs..

I'm not a fan of nested tables - but as I've managed to eliminate a lot of them from my Actinic site - I figured I could live with this one!

PS - if it's a headline you could perhaps use a <h?> tag.

I looked at that, but couldn't get the sizing right. Might have another go at it.

Thanks,

Myles