WordPress.com

1. starkmg
   Member
   Sep 24, 2012, 8:09 PM

   New to WordPress, and online CMS and generators in general. I have a Community Projects page where i have a 2-column table. Rows look goofy because the text in 2nd column starts at bottom of where image in 1st column ends. when i am editing page in VISUAL mode, it looks fine, but when published, it looks off. I haven't dug into manuals or tutorials yet, just trying to wing it like i used to. in my previous life of coding pages, i simply would set the vertical align of each cell to get what i want. not sure what to do in WordPress. Also, using free version. i haven't paid for any premium stuff yet, because i want to see what i can do with WP out of the box. THANKS for any help.

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

2. justpi
   Member
   Sep 25, 2012, 3:00 AM

   There are two issues here. The one is that tables in newer themes aren't 'neutral': the CSS of the theme imposes some default styling, so to really manipulate the appearance of a table you have to know what exactly the CSS of the theme specifies. The other issue is that some of the coding you may be familiar with (or that you'll find in most online tutorials) is outdated and doesn't work in newer themes.

   One of the things that don't work is the command valign="top". You need its equivalent in the style attribute (and you don't need the command for left alignment, because that's the default). So your opening td tags should be:
   <td style="vertical-align:top;" width="NN%">

   In my opinion, this will place the images too high, so I would suggest this for the image cells:
   <td style="vertical-align:top;padding-top:14px;" width="20%">
   (Change the number to adjust.)

   Other things to note:
   • You don't need width="100%" in the table tag: again, that's the default.
   • You don't need to specify the width of a two-column cell.
   • The span tag is used for content inside a paragraph: you don't use it to change the styling of a complete block. Instead of this:
   <h3><span style="color:#0000ff;">HEADING HERE</span></h3>
   you write:
   <h3 style="color:#00f;">HEADING HERE</h3>
   (Plain blue isn't a great choice, by the way, as it may be confused with a link.)

3. glapido
   Member
   Oct 11, 2012, 1:06 PM

   Thank you very much, justpi, in regard to valign and its CSS code, it worked fine for me.
   Now, the strange thing is that I always used valign top and it always have worked fine until today (I don't remember the last time I used valign, the post I'm working with, that needs valign is not published yet, as of now).
   According to your explanation, the only thing that explains valign to have stopped working is that the template I'm using must have been changed in between, since I've always used the same template.
   I think whenever a template is update, people using it should be warned about the change, since it may affect their blogs appearance.

4. glapido
   Member
   Oct 11, 2012, 1:13 PM

   Just to add more details to my previous comment, this post from my blog is using valign top to get both graphics in the table top aligned:
   
   http://matutacoes.wordpress.com/2012/06/28/brasil-nao-conseguiu-atingir-meta-7-para-a-educacao-decada-passada-conseguira-10-nesta/
   It was posted on 06/28/2012, and it has never been changed since then.
   And valign top seems to be working (and it still shows in the HTML post code, something which no longer apllies, as of today, since whenever I put valign, switch to visual mode, then get back to text mode, the valign clause vanishes.)

Topic Closed

This topic has been closed to new replies.