I am fairly new at using CSS and am having trouble with getting a class to work.  In a table I have text areas and picture areas so I created two classes, td.text and td.pic.  My problem is coming in getting them to work.  My td. pic class is:

Code: [Select]td.pic {text-align:center;vertical-align:center;padding:10px;height:380px;}
Everything is going smoothly except the cells aren't showing the correct height.  Basically, the point of using this class is to separate the PICTURES vertically without using padding (I don't want extra space on the left and right).  In the table I have:

Code: [Select]<td class="pic"><p><img src="pillow1.jpg" width=360 height=270 border=0></p></td>
The problem is that the CELL is not giving me the extra 50 pixels I am looking for.  I am using notepad to edit the css file and Amaya to edit the pages themselves.  Any ideas?  When you set padding to something, you need to take that value from the height and width...have you done that? For EXAMPLE, you have the padding to 10px and the height to 380px - this gives a total height of 400px.

I think the problem is possibly with the

inside the table. Try removing that or creating a new CSS rule for it.
Code: [Select]td.pic p {
  margin: 0;
  padding: 0;
}
I did consider the padding in it.  I wanted 10px on the sides and the top and bottom at 65px.  How do I then have the picture and any text inside the cell if I remove the

.  I was under the impression that I need a

tag before an tag.  Also, if I use the code

Code: [Select]<td style="text-align:center;vertical-align:center;padding:10px;height:380px;">
everything works fine. Quote

I was under the impression that I need a <p> tag before an <img> tag.

Also, if I use the code

Code: [Select]<td style="text-align:center;vertical-align:center;padding:10px;height:380px;">
everything works fine.

Oh, and what browser are you using to view it?

Firefox 3.6.10.  Also doing pre-view in Amaya.

(I was only looking at it in the writer software)

Thanks for the help.