Vertical Alignment of Images

Any reason why you can’t link the webpage?

Here’s the actual page I’m changing. They used jpegs from manuals but I’m building it using Worpress, making it look very similar:

https://www.waterwayplastics.com/products/spa-products/pumps-bases/wet-ends-bases/

Here’s the draft page I’m setting up. It’s still in beta. Let me know if you can see it:

https://www.waterwayplastics.com/?page_id=4071&preview=true

See how the “Spa Pumps / Bases” image seem to just float? I’d like to at least get them closer to the part numbers below them. Thanks for any help you can give me!

No, we can’t see preview pages. Can you link to a regular page where the problem occurs? Can’t really see any on your first link above.

I’m not sure how to do that without publishing it…and I can’t do that until it is approved. Should I put some of the code in the post? Please check out the previous link to see what I’m trying to accomplish with the code I already posted:

https://www.waterwayplastics.com/products/spa-products/pumps-bases/wet-ends-bases/

Here is some of the code for products 672-1000, 672-1010 and 672-1060 (I need them to line up straight across, flush bottom, closer to their part numbers that are on another row beneath):

<table border="0">
<tbody>
<tr valign="bottom">
<td valign="bottom"><a href="https://www.waterwayplastics.com/wp-content/uploads/672-10002.jpg"><img class=" wp-image-4297 alignleft" title="672-1000" src="https://www.waterwayplastics.com/wp-content/uploads/672-10002.jpg" alt="" width="250" height="149" /></a></td>
<td valign="bottom"><a href="https://www.waterwayplastics.com/wp-content/uploads/672-10101.jpg"><img class="size-full wp-image-4298 alignleft" title="672-1010" src="https://www.waterwayplastics.com/wp-content/uploads/672-10101.jpg" alt="" width="250" height="138" /></a></td>
<td valign="bottom"><a href="https://www.waterwayplastics.com/wp-content/uploads/672-10601.jpg"><img class="size-full wp-image-4299 alignleft" title="672-1060" src="https://www.waterwayplastics.com/wp-content/uploads/672-10601.jpg" alt="" width="250" height="78" /></a></td>
</tr>
<tr valign="bottom">
<td valign="bottom"><strong>672-1000</strong></td>
<td valign="bottom"><strong>672-1010</strong></td>
<td valign="bottom"><strong>672-1060</strong></td>
</tr>
</tbody>
</table>

[Please use the code buttons when posting code here]

I just pasted that code into a page on a twentytwelve test site and it seems to be fine – although that’s never a totally accurate comparison since CSS is theme/site specific.

Are you using a browser tool like Firebug to see if there is any other CSS messing it up?

But I’m also a bit confused because the CSS you posted in your first post is not related to this table code (which is also using deprecated code, BTW).

Is there, by chance, margins on the images (set by CSS for the theme)?

No, I haven’t used Firebug yet. Could it be that Firefox is the only browser that isn’t recognizing the bottom constraint? No margins on this particular chart but there are on others. It’s just “vertical-align: bottom”. Sorry, I didn’t make it clear the current css I’m using is below:

.td bottom {
vertical-align: bottom;
}

Should I put all 3 products in a block?

I doubt it’s a browser issue – unless it was IE.

IMHO, trying to work with CSS without using Firebug is like driving with your eyes closed :).

The CSS you posted just now is not valid CSS – “td” is a tag not a class and bottom is neither one unless you assign it as a class and add that class to the td tags you want.

Perhaps review: https://www.w3schools.com/css/css_table.asp

But even valid CSS for your table can be messed up if your theme is adding other CSS to it.

I should have prefaced all of this with my abilities being somewhat suspect. WPyogi – your advice is great. I will check into your link right now. Thanks again!

LOL – sorry, I should have gotten a bit clearer on that first, too. Get that Firebug going too and come back if you need to.

And BTW, tables are often tricky so it’s not just you :).

Firebug seems amazing. I need to know if I can add any new code to this without affecting previous code already in use? Is this done by clicking the “reset.css” link and using “Source Edit”? I have my html on the left panel and the css on the right. I’ve clicked on the page element with the inspect tool to select it. Does everything on the css panel relate to this element? (i.e. – custom.css (line 449), style.css (line 150), etc.) What does it mean when things are crossed out? What is meant by “inherited from tbody” and so on? I know this isn’t a Firebug Support page but it does relate to affecting css. Thanks, in advance, for any info given with patience!

Changes you make in Firebug are not actually made in your site – it’s just a way to test changes – that’s one REALLY useful thing about it. The names and line numbers refer to where that piece of CSS is coming from. Inherited means that the style is assigned to another element – but some elements and some CSS styles are inherited by contained elements – i.e. a table row may also be affected by styles assigned to the table tag.

As for making changes in your actual site – it’s never a good idea to modify theme files – as those changes will be overwritten when the theme is updated. Instead you should use a Custom CSS plugin – and ADD styles there that will override the existing ones. So you can use Firebug to see the existing styles and then copy those to the custom CSS and make the change there.

It can be a bit of a learning curve to work with CSS – so you may want to use the site I linked to and the Firebug site to do a bit of basic know-how work.