CSS Class not implementing

[toomuchespresso]

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? 

[kpac]

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 <p> inside the table. Try removing that or creating a new CSS rule for it.

Code: [Select]

td.pic p {
  margin: 0;
  padding: 0;
}


[toomuchespresso]

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 <p>.  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.

[kpac]

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

Nope, it just adds extra space around it. If you had, for example, 2 rows of images with 3 images in each row, then you might put the two rows in paragraphs so the pics won't be on top of each other.

Also, if I use the code

Code: [Select]

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

Okay.....try using an id instead of class.

Code: [Select]

<td id="pic">...</td>

Code: [Select]

td#pic { ... }

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

[toomuchespresso]

Ok.  And lastly, do you have any good tricks to add a caption? Right now I have it set as

Code: [Select]

<img>
<p>caption</p>

[toomuchespresso]

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

Firefox 3.6.10.  Also doing pre-view in Amaya.

[kpac]

Did that work?


An example of captions would be like this:
HTML

Code: [Select]

<table class="gallery">
  <tr>
    <td>
      <div id="image"><img src="../image.jpg" /></div>
      <div id="caption">Image Caption</div>
    <td>
    <td>
      <div id="image"><img src="../image2.jpg" /></div>
      <div id="caption">Image Caption 2</div>
    <td>
  </tr>
</table>

CSS

Code: [Select]

table.gallery td {
  width: 500px;
  height: 600px;
  overflow: hidden;
  text-align: center;
  border: 1px solid #000;
}
td div#image {
  padding: 0;
  margin: 0;
  height: 570px;
  width: 500px;
}
td div#caption {
  padding: 5px;
  margin: 0;
  height: 20px;
  width: 490px;
}

That may need some tweaking.

Firefox 3.6.10.  Also doing pre-view in Amaya.

Ok...I'm not sure why the class isn't working. Can you post or attach all the code in the file? (CSS+HTML)


More info: http://www.elated.com/articles/styling-tables-with-css/

[toomuchespresso]

What helped most was the reminder to view it in the browser (I was only looking at it in the writer software).  Like I said, I'm new at this.  Thanks for the help.

[kpac]

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

Yeah, sometimes those don't tend to be that accurate. You're better off checking it in the most popular browsers...IE, Firefox, Opera, Chrome and Safari.
To do that there are websites such as https://browserlab.adobe.com/en-us/index.html (requires sign-in) and http://browsershots.org/. Obviously both require the site to be online somewhere.

Thanks for the help.

No problem