Vertical alignmend of an image and text

I'm not 100% sure I understand what your problem is. are you saying that the link next to the flag img isn't aligning how you want? You've not applied vertical-align to it...so it's not really surprising. trying adding that to the <a> within the table.

if that's not what is wrong....can you please explain again?

larmyia

Sure, let me try to rephrase. Take the bottom table on the opening page or look at "Schema 1ste ronde".

I am taking the "normal" text as standard vertical height: the date and time of a game and the group of that game.

Than follows the flag of a country and thereafter name of the country. The latter (and only the country; but it is in the same cell as the image) aligns with the image and not - as I would have expected - with the rest of the text (and score if available).

No valign is used of any of the text.
CSS rule for img { vertical-align: 0; }

Does this clarify it? :?:

I'm afraid I can't see why it'd be doing that....all I can suggest is that you put a vertical-align on the country's name.

although someone else might be able to suggest why this is happening...

sorry!

use

img { vertical-align: bottom; }

for more information, see CSS 2.1 spec, in particular, a unit value of 0 (be it px, cm or %) corresponds to baseline. Baseline isn't bottom, there needs to be room for letter descenders, any underline and half-leading.

but why would that push the country names down? I'm afraid it's not clear even after reading the specs

Exactly larmyia, I can control the position of the image (I did that with CSS) but why is that separate text at that position. BTW image and text are in one cell of the table. But that should not be an issue? I will separate the two in individual cells just to see what happens.

Hmmm, did a quick test with separating image and text is individual cells and guess what ... the text repositions to the same level as the remainder of the text. Strange that text in the same cell is influenced by the position of the image ...

And the solution of Chris' also repositions the image ... I will go that way. Thanks guys for your help!

I thought that Chris' solution worked but alas, it is not the case. Any ideas?

For future reference, feel free to use the "edit" button instead of posting in succession, it makes the topics easier to understand

Good idea, completely overlooked that button :roll:

I guess I don't understand the problem. What is not lining up correctly?

Any chance of a picture showing where you want the text and image to line up and with what?

Hi Chris,

I took a snapshot of a part of the table and put it at:

http://www.jojedo.nl/cssforum/snapshot1.png

It shows nine lines (nine matches):

"date time CHAR <img> country INT - INT country <img>"

CHAR: a character, INT: the score

The three characters of country are below the "date time CHAR" and the INT ... instead, they should line up (vertically) with these texts. Playing with vertical-aligning of the image does not work as it is effected by chosing a different font size (using the user preferences.js of Tony).

Try specifying vertical-align on the table cell.

td { vertical-align: baseline; }

For your flags, consider using oversize images and sizing them in em units. Then when the font-size changes the flag size will adjust as well.

Thanks Chris,

Using your suggestion works indeed - but only as you said with option baseline. If I combine it with

img {vertical-align: xxxx; }

I get even better control.

You suggestion does however also highlight this weird behaviour (see snapshot2 link) when using

td { vertical-align: top; }

and no img alignment. Text in the same cell as the image does not get positioned correctly. A bug???

Thanks for your advice and the excellent tip on the images. I will look into that tip

http://www.jojedo.nl/cssforum/snapshot2.png