SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table not behaving properly

    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

    HTML Code:
    <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>
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    I don't see a table on that page

    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:
    Code:
    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;
    	vertical-align: baseline;
    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. #3
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  4. #4
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Again, here is the table on http://www.clickbasics.com. Please check the source code.

    HTML 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…</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’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> <p><strong>Just click on the <em>Free Instant Access</em> button below.</strong></td> </tr> </tbody> </table>
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by paulcj2 View Post
    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.
    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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    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 none;
      font-family: inherit;
      font-size: 100%;
      font-style: inherit;
      font-weight: inherit;
      margin: 0;
      outline: 0 none;
      padding: 0;
      vertical-align: baseline;
    }
    EDIT: actually, on second thoughts, it may be best just to remove the line in red.

  7. #7
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Voila! I commented out that line, and it worked. Many thanks.
    Paul C.
    ClickBasics
    http://www.clickbasics.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •