WordPress.com

1. izaakmak
   Member
   Oct 3, 2009, 7:34 PM

   In my most recent post, Great Thinkers on Beer, I'm using HTML table alignment coding that works just fine on the w3schools.com "try it yourself" pages but not in my post. The images and text are supposed to be vertically centered within the row, and the quote should be horizontally centered when it doesn't need more than one line.

   I've stripped out all but the bare essentials in an effort to eliminate possible errors with no success, including trying just the image without a caption. I did this after having to use the background image function on the w3schools.com "try it yourself" page. My original coding used separate one row tables where I alternated the positions of the image and the quote in each table to provide a more pleasing visual effect. I chose the table approach because it provided, I thought, a more reusable "comic strip" template potential than trying to do it with just text wrapping around the picture.

   I don't get it. I've spent a lot of time gathering images and quotes for what I hoped to be a new "The Great Thinker" volume of my blog. I thought that I had the coding right, but now I'm fearing that I've just wasted a lot of time. Does anyone have any thoughts or suggestions that might help me? I'm willing to try a whole new approach, if necessary, as long as reproducing the technique is not a monstrous chore.

   Thanks.

   The blog I need help with is iwanticewater.wordpress.com.

2. husdal
   Member
   Oct 3, 2009, 8:04 PM

   I seems that the table styles in the CSS are overruling any HTML that you add. I have no problem achieving what you are trying to do when I edit the CSS. Besides paying for the CSS Upgrade I don't see how else this can be done.

3. panaghiotisadam
   Member
   Oct 3, 2009, 8:25 PM

   The table coding is correct, but in some themes some commands don't work. For the text cells, replace this:
   <td align="center" valign="middle">
   with this:
   <td style="text-align:center;vertical-align:middle;">

4. husdal
   Member
   Oct 3, 2009, 8:34 PM

   /nod to panaghiotisadam

   I should have though about that. The 'td align/valign is' variant is actually not considered good HTML anymore. The style variant is preferred by most programmers.

5. izaakmak
   Member
   Oct 3, 2009, 8:37 PM

   Thanks guys.

   Panos: I'll be trying your suggestion asap, but I've got a couple of questions before I do. First, will the vertical-align:middle code work in the image cells? Second, do you see a problem with going back to the multiple single-row tables?

6. panaghiotisadam
   Member
   Oct 3, 2009, 9:06 PM

   1. Yes it will.

   2. Depends on how you want the whole thing to look: multiple single-row tables will give you some space between each table and the next. Also, I think you'll have to specify widths for the two cells of each table, otherwise the vertical lines separating texts from images will fall at various points.

7. izaakmak
   Member
   Oct 3, 2009, 9:34 PM

   w3schools.com refers to acceptable versus unacceptable coding a lot, but I guess they haven't gotten around to updating the zillions of examples they provide. Also, the width of the two cells didn't appear to be a problem before, but that could be due to the fact that all of my images have been resized to have the same width working in combination with this example including text that's long enough to dominate the automatic selection. It probably would be wise to fix the widths so that I don't get nasty surprises when attempting to use what I have as a template for future posts.

   Thanks again guys.

8. izaakmak
   Member
   Oct 4, 2009, 12:01 AM

   Hey guys, I just wanted to thank you again for your help. The changes worked great.

Topic Closed

This topic has been closed to new replies.