SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: Table alignment

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

    Table alignment

    For reasons I won't go into here, I'm using an old HTML table to display a grid with client names on the left, and logos on the right.
    http://clickbasics.com/cawse/clients/
    For some reason, I can't get the top two rows to align the text vertical top in the left column to align, and there is a gap above the logos in the right column, causing the table to look misaligned. What am I missing?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The left cell is aligned to the middle so change it to top.

    Code:
    .entry-content td, .comment-content td {vertical-align:top}
    The img has a margin-bottom andf a margin-top of 12px is that the gap you mean?

    Code:
    img.aligncenter {
        margin-bottom: 12px;
        margin-top: 12px;
    }

  3. #3
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm. As far as I can see, all the left cells are aligned top
    HTML Code:
    <td style="width: 275px;" align="left" valign="top">
    About
    The img has a margin-bottom andf a margin-top of 12px is that the gap you mean?
    No, a 12 px top and bottom margin would be OK. It's the spaces I have marked in red on the attached screen shot that are the problem.table_trouble.jpg
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by paulcj2 View Post
    Hmmm. As far as I can see, all the left cells are aligned top
    HTML Code:
    <td style="width: 275px;" align="left" valign="top">
    If you had tested the code I gave you you would see that it had corrected the problem. Just trust me.

    It's no good using deprecated align and valign attributes as CSS trumps those. In your reset you have set the alignments of cells to baseline and the CSS I gave you will correct that.
    Code:
     .entry-content td, .comment-content td {vertical-align:top}
    Try the code I gave you and report back and then we can sort out any other issues.

  5. #5
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is what I have now in the style sheet:
    Code:
    comment-content td {
        border-top: 1px solid #ededed;
        padding: 7px 14px;
        vertical-align:top !important;
    But for some reason, it is not showing up when I view the top left cell in Firebug.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I'm looking at the page in your link and it looks "normal" in FF to me. The rows are not misaligned and contain no unexpected space above or below their contents. Have you fixed the problem?

    There are several significant errors in the HTML (yes, it looks like OLD table code ) and there are also duplicated IDs on the page, although that's not affecting this issue. Whether fixed or not, I recommend that you give it HTML a run through the validator.

  7. #7
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Mmm, tables and old html and css don't have a splendid cooperation already, but the interference of WP is making it foggy to the first degree...

    Do you mean:
    Code:
    td {
    	text-align: center;
    }
    table h2 {
    	margin: 0px !important;
    	text-align: left;
    }
    table p {
    	text-align: left;
    }
    table img {
    	display: inline !important;
    	vertical-align: top !important;
    }
    The {margin-top} of the h2's is playing the flute on the left side. The default value is: .entry-content h2 {margin: 24px 0;}
    On the right side the {display:block} made it too difficult.

    But now some images still don't reach the top!
    That is not the css, but the html:
    HTML Code:
    <td> <img class="size-full wp-image-35 aligncenter" alt="British Petrolium" src="http://clickbasics.com/cawse/wp-content/uploads/2013/11/bplogo.jpg" width="150" height="199" /></td>
    The space between the <td> and the <img> tag is asking for space.

  8. #8
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It turns out that my modifications to the style sheet were not picked up by the page. The web host was having server problems. In any case, the text and images are displaying correctly now. I'll address the HTML issues soon. Thanks all.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  9. #9
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I spoke too soon. The page looks OK in FF, but not in IE. Suggestions?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Which IE version and what's the specific problem?

    Are we still talking about the table-cells as they look ok in ie9+ or is there some other issue you need looked at?

  11. #11
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did some more tweaking in the HTML, and the top two rows of the tables now seem to line up in IE 10. I think I'm all set. Many thanks for the help.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Ok no worries - glad it's sorted

  13. #13
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    In my Firefox, Chrome etc. the BP-logo has too much top space, and the Crane&Co logo is not horizontally centered and almost sticking to the top of his cell. In IE7 the Valspar logo is missing some top space also. The NaturalBlend is just the opposite: vertically centered.

    But if I do this ...
    • Change the 3 "alignnone"-classes of the images in "aligncenter"
    • Add in the <head>-styleblock: #post-31 img {margin: 15px auto; box-shadow: none;} (maybe on other pages a box-shadow around the images is fine, but here I think the logo's are cleaner and stronger without)
    • and:
      HTML Code:
      <table border="1" align="left" style="width: 630px;">
        <tbody>
          <tr>
            <td valign="top" align="left" style="width: 325px;">

    ... everything seems o.k., even in IE7.

    Test: cae-nw.htm
    _______
    O, not everything: the British Petrolium (in the h2 and in the alt of the img) is probably selling better as British Petroleum.


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
  •