15 replies [Last post]
jojedo
Offline
Regular
Last seen: 15 years 37 weeks ago
Timezone: GMT+2
Joined: 2006-06-05
Posts: 30
Points: 0

A minor something I cannot explain: A cell of a table contains an image (a small flag) and text. The image is aligned "bottom", the text in that cell is not i.e. no valign is set. But the text is below text in other cells.

Please check my website http://www.jojedo.nl/schema.php and choose a small font ("Letter grootte") for easier verification.

CSS only set padding, margins of the table.

Any ideas why this is happening?

Jojedo

Dale limosna, mujer
que no hay en la vida nada
como la pena de ser
ciego en Granada.

(Francisco Alarcón de Icaza)

larmyia
Offline
Elder
London
Last seen: 13 years 35 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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

jojedo
Offline
Regular
Last seen: 15 years 37 weeks ago
Timezone: GMT+2
Joined: 2006-06-05
Posts: 30
Points: 0

Vertical alignmend of an image and text

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

Jojedo

Dale limosna, mujer
que no hay en la vida nada
como la pena de ser
ciego en Granada.

(Francisco Alarcón de Icaza)

larmyia
Offline
Elder
London
Last seen: 13 years 35 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Vertical alignmend of an image and text

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!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Vertical alignmend of an image and text

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.

larmyia
Offline
Elder
London
Last seen: 13 years 35 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Vertical alignmend of an image and text

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

jojedo
Offline
Regular
Last seen: 15 years 37 weeks ago
Timezone: GMT+2
Joined: 2006-06-05
Posts: 30
Points: 0

Vertical alignmend of an image and text

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.

Jojedo

Dale limosna, mujer
que no hay en la vida nada
como la pena de ser
ciego en Granada.

(Francisco Alarcón de Icaza)

jojedo
Offline
Regular
Last seen: 15 years 37 weeks ago
Timezone: GMT+2
Joined: 2006-06-05
Posts: 30
Points: 0

Vertical alignmend of an image and text

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

Jojedo

Dale limosna, mujer
que no hay en la vida nada
como la pena de ser
ciego en Granada.

(Francisco Alarcón de Icaza)

jojedo
Offline
Regular
Last seen: 15 years 37 weeks ago
Timezone: GMT+2
Joined: 2006-06-05
Posts: 30
Points: 0

Vertical alignmend of an image and text

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

Jojedo

Dale limosna, mujer
que no hay en la vida nada
como la pena de ser
ciego en Granada.

(Francisco Alarcón de Icaza)

jojedo
Offline
Regular
Last seen: 15 years 37 weeks ago
Timezone: GMT+2
Joined: 2006-06-05
Posts: 30
Points: 0

Vertical alignmend of an image and text

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

Jojedo

Dale limosna, mujer
que no hay en la vida nada
como la pena de ser
ciego en Granada.

(Francisco Alarcón de Icaza)

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 3 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Vertical alignmend of an image and text

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

Verschwindende wrote:
  • CSS doesn't make pies

jojedo
Offline
Regular
Last seen: 15 years 37 weeks ago
Timezone: GMT+2
Joined: 2006-06-05
Posts: 30
Points: 0

Vertical alignmend of an image and text

Good idea, completely overlooked that button :roll:

Jojedo

Dale limosna, mujer
que no hay en la vida nada
como la pena de ser
ciego en Granada.

(Francisco Alarcón de Icaza)

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Vertical alignmend of an image and text

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?

jojedo
Offline
Regular
Last seen: 15 years 37 weeks ago
Timezone: GMT+2
Joined: 2006-06-05
Posts: 30
Points: 0

Vertical alignmend of an image and text

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

Jojedo

Dale limosna, mujer
que no hay en la vida nada
como la pena de ser
ciego en Granada.

(Francisco Alarcón de Icaza)

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Vertical alignmend of an image and text

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.

jojedo
Offline
Regular
Last seen: 15 years 37 weeks ago
Timezone: GMT+2
Joined: 2006-06-05
Posts: 30
Points: 0

Vertical alignmend of an image and text

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

Jojedo

Dale limosna, mujer
que no hay en la vida nada
como la pena de ser
ciego en Granada.

(Francisco Alarcón de Icaza)