Table not behaving properly

HTML & CSS
1

The content of the right column in this table is not aligning to the top. Please advise why, and how I can make it behave. You can see the behavior at http://www.clickbasics.com

<table border="0">
<tbody>
<tr>
<td align="center" valign="top" width="560"><iframe src="http://www.youtube.com/embed/Tn1VXYE5AFc" frameborder="0" width="560" height="315"></iframe>
<p style="text-align: center;"><a href="http://www.clickbasics.com/free-instant-access/"><img class="aligncenter  wp-image-4270" title="instant_access" src="http://www.clickbasics.com/wp-content/uploads/2012/02/instant_access-300x56.jpg" alt="How to market online free instant access" width="300" height="56" /></a></p>
</td>
<td align="left" valign="top">
<h2>Inside you will learn...</h2>
<ul>
    <li><em><strong>How to get more people in your front door spending money</strong>
</em></li>
    <li><em>How to choose what steps will really pay off</em></li>
    <li><em>How to market online without burning out.</em></li>
    <li>And you'll get free <em>How To Get People To Your Front Door - Spending Money</em></li>
    <li>Plus a trial subscription to Paul Carter's <em>Marketing Machine</em> newsletter.</li>
</ul>
<strong>Just click on the <em>Free Instant Access</em> button below.</strong></td>
</tr>
</tbody>
</table>
2

I don’t see a table on that page :stir:

Of course, if you weren’t abusing the <table> tag you probably wouldn’t have had this problem!

You’ve got a stupid reset in your style.css that is causing the problem:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, figure, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	[B]vertical-align: baseline;[/B]

Aside from the fact that you’re telling the browser to do what it was almost certainly going to do anyway, telling it to vertically align everything to the baseline when you don’t actually want to vertically align everything to the baselines isn’t a good strategy. And nor is using inline HTML like valign=“top” … that went out of fashion 12 years ago.

While we’re on the subject of the reset, out of the 58 elements listed, as far as I can tell you’ve only used 18 of them on your site. What on earth are you defining styles for kbd and var for, for heaven’s sake? This is precisely why I hate the use of global resets - they encourage people to unthinkingly define global styles that they (a) don’t need, and in many cases (b) don’t want. But because they aren’t typing in the code themselves, they don’t pay any attention to what it’s saying and doing. And lo and behold, it causes problems.

Incidentally, you’ve killed off the outline for links not just once, not twice but three times, yet despite the warning notice (“remember to define focus styles!”) that Eric included, you’ve failed to put them back in.

So, in answer to your original question:

Please advise … how I can make it behave

the easiest way is to write your own CSS to do exactly what you need it to do, and no more. That way, you’ll know what it’s all for, and you’ll (hopefully!) understand what’s going wrong if you get any conflicts or unexpected behaviour.

3

Stevie D. With all due respect, you may not have realized that I am using WordPress and an off the shelf theme, not writing my own. So most of what you have to say points to the theme coding. It is not my intention to write my own CSS, as this is not my specialty. You may also not realize that I am using a WordPress plugin called TinyMCE Advanced, which allows me to install tables within my content area. That is what I have an issue with.

I do realize that this is not optimal coding, nor even standards based in the current environment. I readily admit that my days of standards based fixation have given over to expediency. Should you be able to help me with this understanding, short of redoing all the CSS in the theme I am using, I will be grateful for your assistance.

4

Again, here is the table on http://www.clickbasics.com. Please check the source code.

<tbody> <tr> <td align="center" valign="top" width="560"><iframe src="http://www.youtube.com/embed/Tn1VXYE5AFc" frameborder="0" width="560" height="315"></iframe></p> <p style="text-align: center;"><a href="http://www.clickbasics.com/free-instant-access/"><img class="aligncenter  wp-image-4270" title="instant_access" src="http://www.clickbasics.com/wp-content/uploads/2012/02/instant_access-300x56.jpg" alt="How to market online free instant access" width="300" height="56" /></a></p> </td> <td align="left" valign="top"> <h2>Inside you will learn&#8230;</h2> <ul> <li><em><strong>How to get more people in your front door spending money</strong><br /> </em></li> <li><em>How to choose what steps will really pay off</em></li> <li><em>How to market online without burning out.</em></li> <li>And you&#8217;ll get free <em>How To Get People To Your Front Door &#8211; Spending Money</em></li> <li>Plus a trial subscription to Paul Carter&#8217;s <em>Marketing Machine</em> newsletter.</li> </ul> <p><strong>Just click on the <em>Free Instant Access</em> button below.</strong></td> </tr> </tbody> </table>
5

The bit of code I highlighted in bold and the explanation in the paragraph below the code should give you a clue as to what you need to remove in order to get the appearance you want…

6

In your CSS reset (style.css life 15ff) you have a reset that sets all table elements to vertical-align: baseline. That’s the problem. To be honest, I would probably remove that entire chunk of code. Or at least remove the table elements from it, meaning all the bits in blue below:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, figure, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, [COLOR="#0000FF"]table, caption, tbody, tfoot, thead, tr, th, td[/COLOR] {
  border: 0 none;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0 none;
  padding: 0;
  [COLOR="#FF0000"]vertical-align: baseline;[/COLOR]
}

EDIT: actually, on second thoughts, it may be best just to remove the line in red.

7

Voila! I commented out that line, and it worked. Many thanks.