Getting Rid of "vertical-align: baseline" in Profile Code

[seleneheart]

I have my Dreamwidth profile coded with a table, but the page is putting in a CSS design element of 'vertical-align: baseline' . This is messing up the alignment of the elements in my table. I have tried a variety of solutions for the alignment of the table elements to fix it but nothing seems to work.

If I use the inspector function on Firefox and remove the design element, the table looks correct. https://seleneheart.dreamwidth.org/profile

I can share the table code if necessary.

Any idea how to override this?

Comments

[marahmarie]

Looking through your table code I see the first image is set to center with no valign specified, the second image is set to valign=baseline and other images further down in the table are set to center with, again, no valign specified. You want all items within td s set to valign=top, at least to see if that solves the problem.

Far as I can tell what's throwing your table off is found in tropo.css; it's just one tiny bit of code that sets td to baseline.

[seleneheart]

Okay, thank you. I put valign=topin the td with all the images. The mini-bio is still mis-aligned.

Anything else I can try?

[marahmarie]

It's misaligned because the backend CSS takes higher precedence than the table HTML does in the browser DOM. I've tried adding a div inline before your table and using !important to override the backend CSS, as inline CSS takes highest priority, and while it's possible there's some way to make it work I'm not having any luck so far.

Edit: as promised below I live-edited using a modern browser's dev tools. Setting the table headings and paragraphs to <td style="vertical-align:top"> works with or without adding !important within the tools, but doesn't work once the code is running live in one of my test journal's profiles. Again I guess it might be because the backend CSS takes higher precedence in the DOM, though inline CSS styles should override that. Maybe it's because the tds are within a table and Dreamwidth sets everything from the body itself to the tables on the profile page to vertical-align:baseline. (I've tried setting the table, tbody, and trs to align top using style="" as well but no dice in tools or live.)

I'll poke around in the browser dev tools in a modern browser as you did (I've mostly been live-editing your HTML in an older-school browser) to see if I can come up with anything (edit: done).

In the meantime, you might consider switching from using an HTML table to using a more modernized CSS div table. This looks like an excellent community to get started on finding a more up-to-date profile code with: https://dreamcodes.dreamwidth.org/

[seleneheart]

Thanks for the suggestions, I'll look into it. I didn't know you could use CSS in the profile code.

[seleneheart]

I poked around that comm as you suggested and here is what I found (for future reference because you seem like you're interested). If I put < p > & nbsp ;< /p > before each of the images, it pushes them even with the text in the other cells. I had to add the same code to the text cells to get everything to line up, but it's currently working.

Info regarding profile tables came from here: https://ionized.dreamwidth.org/4871.html

Thanks for the help!

[marahmarie]

Oh, that looks just perfect! And dang, I knew there must be some simple way to do it but I had to give up trying - got too tired that night to carry on. So glad you found the right answer. :-)