Strange table text/image alignment

  • Resolved aydblog

    (@aydblog)


    11 years, 10 months ago

    Hi all,

    I’m using a table to do the ‘about’ page on https://about-your-dress.com (page is here) but I just can’t get the text to align with its corresponding image! There’s a colum for the text and one for the images, and each person’s image and bio are on their own row. But for some reason, the text keeps appearing along the bottom of the image. It’s driving me mad! I built the table in Dreamweaver and it’s fine there, and I’ve tried playing with smaller column widths but to no avail.

    Please help!

    Thanks,

    Ria

Viewing 5 replies - 1 through 5 (of 5 total)

  • Look for “vertical-align: baseline;” in your CSS — if you adjust that, the text should pop up next to the images.

    And you might look at using styled lists instead of tables for these sections of your site. Tables should only be used for tabular data, not for layout purposes.

    Thread Starter aydblog

    (@aydblog)

    Thanks Jess, I tried to change the CSS and nothing changed – is this because the text and image are in different cells?

    Had a quick Google about styled lists and I’m a bit clueless as to where I’d start. Does anyone know how I’d use a styled list in the same way I’ve used this table?

    When I looked at the site using developer tools on Chrome, all I had to do was uncheck “vertical-align:baseline;” in the CSS (emulates deleting it), and your text popped up where it was supposed to be. It’s on line 20 of your styles.css file. Shouldn’t matter which cell things are in, because that property manages all of the cells. So try deleting that line and see how things look.

    You could achieve this same look with paragraphs and images aligned to the left, with each set in its own div.

    Thread Starter aydblog

    (@aydblog)

    Dear Jess,

    You are the most amazing person in the world. RESOLVED!

    Thanks ??

    Awwww, shucks. You’re welcome.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Strange table text/image alignment’ is closed to new replies.