Table alignment

HTML & CSS
1

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?

2

Hi,

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


.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?



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

Hmmm. As far as I can see, all the left cells are aligned top

<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.

4

If you had tested the code I gave you you would see that it had corrected the problem. Just trust me. :slight_smile:

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.


 .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

Here is what I have now in the style sheet:

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.

6

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 :slight_smile: ) 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

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… :rolleyes:

Do you mean:

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! :goof:
That is not the css, but the html:

<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. :wink:

8

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.

9

I spoke too soon. The page looks OK in FF, but not in IE. Suggestions?

10

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

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.

12

Ok no worries - glad it’s sorted :slight_smile:

13

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 <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: [U]cae-nw.htm[/U]

O, not everything: the British Petrolium (in the h2 and in the alt of the img) is probably selling better as British Petroleum. :wink: