vertical-align:bottom not working

[Markus Ernst]

Hi

I have a strange problem with vertical-align. The case can be viewed at
http://www.brainput.info/geschichte.html.

HTML code:

<div id="bild"><img src="geschichte .gif" width="274" height="29" alt="Wir
schreiben die Geschichte Ihres Unternehmens."> </div>

CSS code:

#bild {
width: 600px;
height: 76px;
margin: 0px 0px 0px 50px;
vertical-align:bottom;
}

img {
vertical-align:top;
}

#bild img {
vertical-align:bottom;
}

Now the image should be displayed at the bottom of the div, or am I wrong?
Both IE6 and Netscape 7 display it at the top.

Strange enough: Adding "text-align:right" to the "#bild img" definition is
not working either, but when I add "border:5px solid blue" the image will be
displayed with the blue border. So the selectors must be correct.

I am quite stuck; if somebody sees where the mistake is I will be very happy
about it.

Thanks
Markus

[Lauri Raittila]

Re: vertical-align:bottom not working

In article Markus Ernst wrote:[color=blue]
> Hi
>
> I have a strange problem with vertical-align. The case can be viewed at
> http://www.brainput.info/geschichte.html.[/color]

It is because you have misunderstood how vertical-align works.
[color=blue]
> Now the image should be displayed at the bottom of the div, or am I wrong?
> Both IE6 and Netscape 7 display it at the top.[/color]

You are wrong. Use line-height. See this thread (about centering):

http://gogle.de/groups?threadm=MPG.1a6940c293ac2a86989d92@news.cis.dfn.de

[color=blue]
> Strange enough: Adding "text-align:right" to the "#bild img" definition is
> not working either, but when I add "border:5px solid blue" the image will be
> displayed with the blue border. So the selectors must be correct.[/color]

Thats because vertical-align only aplies to inline-elements, and text-
align only to block elements.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Anne van Kesteren]

Re: vertical-align:bottom not working

Lauri Raittila wrote:
[color=blue]
> Thats because vertical-align only aplies to inline-elements, and text-
> align only to block elements.[/color]

'text-align' does not apply to block-level elements. It does apply to
inline elements as well ;-)


--
Anne van Kesteren
<http://www.annevankest eren.nl/>

[Lauri Raittila]

Re: vertical-align:bottom not working

In article Anne van Kesteren wrote:[color=blue]
> Lauri Raittila wrote:
>[color=green]
> > Thats because vertical-align only aplies to inline-elements, and text-
> > align only to block elements.[/color]
>
> 'text-align' does not apply to block-level elements. It does apply to
> inline elements as well ;-)[/color]

I used term applies in the meaning CSS has for it. Spec clearly says that
that text-align only applies to block elements.

http://www.w3.org/TR/CSS2/text.html#alignment-prop

| Applies to: block-level elements

http://www.w3.org/TR/CSS21/text.html#alignment-prop

| Applies to: block-level elements and table cells


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[David Graham]

Re: vertical-align:bottom not working

Markus Ernst wrote:[color=blue]
> Hi
>
> I have a strange problem with vertical-align. The case can be viewed at
> http://www.brainput.info/geschichte.html.
>
> HTML code:
>
> <div id="bild"><img src="geschichte .gif" width="274" height="29" alt="Wir
> schreiben die Geschichte Ihres Unternehmens."> </div>
>
> CSS code:
>
> #bild {
> width: 600px;
> height: 76px;
> margin: 0px 0px 0px 50px;
> vertical-align:bottom;
> }
>
> img {
> vertical-align:top;
> }
>
> #bild img {
> vertical-align:bottom;
> }
>
> Now the image should be displayed at the bottom of the div, or am I wrong?
> Both IE6 and Netscape 7 display it at the top.
>[/color]
Lauri refers you to this link:

http://gogle.de/groups?threadm=MPG.1a6940c293ac2a86989d92@news.cis.dfn.de

A summary of the findings is:
1. The nice and quite proper use of vertical-align: middle applied to an
image within a parent div that has a height and line-height of equal size
(10em) unfortunately only works in Opera and Mozilla, IE6 just leaves the
image sitting stubbornly at the top of the div.
2. Lauri then gets quite inventive with the css but it would be so much more
simple if IE6 just behaved as Opera and Mozilla.

[color=blue]
> Strange enough: Adding "text-align:right" to the "#bild img" definition is
> not working either, but when I add "border:5px solid blue" the image will
> be displayed with the blue border. So the selectors must be correct.
>[/color]

I thought I would add to what Lauri has replied to you by putting it in
simple terms that I understand:

"This property describes how inline content of a block is aligned. " (as
per CCS 2 - CSS2.1 includes table cells as well)

So, this property will affect the alignment of inline content inside a block
level element (or inside a table cell), therefore you apply the property to
the block level element and not to the inline content - see below


<div style="text-align: right;">
<img src="myimage.gi f" width=200 height=400 alt="">
</div>

this will align the image to the right side of the div. It would not be
correct to apply the property directly to the inline content, so the
following would not produce the desired affect:

<div>
<img style="text-align: right;" src="myimage.gi f" width=200 height=400
alt="">
</div>

Of course, inline style is bad, only did this to make it easier to follow.
Your descendent selector (#bild img) was OK but that was not the cause of
your problem - your problem was as I have pointed out above i.e your
targetting the wrong element

HTH
David

[Markus Ernst]

Re: vertical-align:bottom not working

"Lauri Raittila" <lauri@raittila .cjb.net> schrieb im Newsbeitrag
news:MPG.1a6a5d 2cbd083c14989d9 a@news.cis.dfn. de...[color=blue]
> In article Markus Ernst wrote:[color=green]
> > Hi
> >
> > I have a strange problem with vertical-align. The case can be viewed at
> > http://www.brainput.info/geschichte.html.[/color]
>
> It is because you have misunderstood how vertical-align works.
>[color=green]
> > Now the image should be displayed at the bottom of the div, or am I[/color][/color]
wrong?[color=blue][color=green]
> > Both IE6 and Netscape 7 display it at the top.[/color]
>
> You are wrong. Use line-height. See this thread (about centering):
> http://gogle.de/groups?threadm=MPG.1...ews.cis.dfn.de
>[color=green]
> > Strange enough: Adding "text-align:right" to the "#bild img" definition[/color][/color]
is[color=blue][color=green]
> > not working either, but when I add "border:5px solid blue" the image[/color][/color]
will be[color=blue][color=green]
> > displayed with the blue border. So the selectors must be correct.[/color]
>
> Thats because vertical-align only aplies to inline-elements, and text-
> align only to block elements.
>
> --
> Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
> Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
> tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
>[/color]

Thank you for pointing me to this very interesting thread. As IE does not
support the line-height solution I did the real cross-browser thing - I
added the white space to the images so that they all have the same height
and the visible part is where I want it to be.

Actually I wonder why vertical-align:bottom was not specified as applicable
for block elements to align at the bottom of the parent element. So it would
be easy to define the image as display:block to put it at the bottom of the
parent element, as easy as the old <td valign="bottom" > way was. Well maybe
this is a stupid idea, but I think the biggest problem in the actual
specification and implementations of CSS is that it needs big discussions
for small problems, so I hope the focus in the further development is on the
ease of use.

Thanks a lot for your help!
Markus

[Markus Ernst]

Re: vertical-align:bottom not working

"David Graham" <david.graham18 @ntlworld.com> schrieb im Newsbeitrag
news:kz_Lb.425$ U83.438082@news fep1-win.server.ntli .net...[color=blue]
>
> Of course, inline style is bad, only did this to make it easier to follow.
> Your descendent selector (#bild img) was OK but that was not the cause of
> your problem - your problem was as I have pointed out above i.e your
> targetting the wrong element
>
> HTH
> David
>[/color]

Thank you for this hint - it's really obsolete to do a test if I do it on
the wrong element :-)

Markus

[Lauri Raittila]

Re: vertical-align:bottom not working

In article Markus Ernst wrote:[color=blue]
> "Lauri Raittila" <lauri@raittila .cjb.net> schrieb im Newsbeitrag
> news:MPG.1a6a5d 2cbd083c14989d9 a@news.cis.dfn. de...[/color]
[color=blue][color=green]
> > http://gogle.de/groups?threadm=MPG.1...ews.cis.dfn.de[/color][/color]
[color=blue]
> Thank you for pointing me to this very interesting thread.[/color]

I made a webpage about that subject finally, and managed to invent 2 more
ways to vertically center in process...

http://www.student.oulu.fi/~laurirai/www/css/middle/

One of those worked in all browsers I tested, and that is the one that
breaks most likely, when em/px ratio is different...

But I think I have made some mistake, as it seems strange how badly
Mozilla renders three of the examples. So if someone would look it with
something else than 1.4 mozilla, I would like to hear.
[color=blue]
> As IE does not
> support the line-height solution I did the real cross-browser thing - I
> added the white space to the images so that they all have the same height
> and the visible part is where I want it to be.[/color]

Well, Adding them just right amount of margin would have been good too.
[color=blue]
> Actually I wonder why vertical-align:bottom was not specified as applicable
> for block elements to align at the bottom of the parent element. So it would
> be easy to define the image as display:block to put it at the bottom of the
> parent element, as easy as the old <td valign="bottom" > way was.[/color]

It is good question. OTOH, it would have been third definition for same
property.
[color=blue]
> Well maybe
> this is a stupid idea, but I think the biggest problem in the actual
> specification and implementations of CSS is that it needs big discussions
> for small problems, so I hope the focus in the further development is on the
> ease of use.[/color]

The problem with ease of use is that it is not necessarily very fast.
When designing principles of CSS vere done, my P200 would have been very
high tech machine. If CSS would have made differently, I bet I could not
surf with this machine as well as I can now.

And, it is hard to think something easier to use.

Anyway, more steps are taken toward ease of use in CSS3.




--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Markus Ernst]

Re: vertical-align:bottom not working

"Lauri Raittila" <lauri@raittila .cjb.net> schrieb im Newsbeitrag
news:MPG.1a6ce4 511a68c9eb989da 4@news.cis.dfn. de...[color=blue]
> In article Markus Ernst wrote:[color=green]
> > "Lauri Raittila" <lauri@raittila .cjb.net> schrieb im Newsbeitrag
> > news:MPG.1a6a5d 2cbd083c14989d9 a@news.cis.dfn. de...[/color]
>[color=green][color=darkred]
> > >[/color][/color][/color]
http://gogle.de/groups?threadm=MPG.1...ews.cis.dfn.de[color=blue]
>[color=green]
> > Thank you for pointing me to this very interesting thread.[/color]
>
> I made a webpage about that subject finally, and managed to invent 2 more
> ways to vertically center in process...
> http://www.student.oulu.fi/~laurirai/www/css/middle/
>
> One of those worked in all browsers I tested, and that is the one that
> breaks most likely, when em/px ratio is different...
>
> But I think I have made some mistake, as it seems strange how badly
> Mozilla renders three of the examples. So if someone would look it with
> something else than 1.4 mozilla, I would like to hear.[/color]

Netscape 7.0 (I am sorry I don't find out on which Mozilla version it is
based):
- Line-height: Image 2 px below middle
- Absolute positioning: Text 2 px below middle
- Table-cell: different height (seems to behave like border-box model)
- Padding and negative margin: as absolute positioning
- Relative positioning and negative margin: Broken (Text on top, image
overlaps top)
- Absolute positioning and negative margin: as absolute positioning

I also have installed Mozilla 1.0, seems to behave exactly the same.
[color=blue][color=green]
> > As IE does not
> > support the line-height solution I did the real cross-browser thing - I
> > added the white space to the images so that they all have the same[/color][/color]
height[color=blue][color=green]
> > and the visible part is where I want it to be.[/color]
>
> Well, Adding them just right amount of margin would have been good too.[/color]

Yes but it is more complicated to handle as it is necessary to calculate the
extra space for every single image and apply it as inline style.
[color=blue]
> Anyway, more steps are taken toward ease of use in CSS3.[/color]

As a user of graphic layout softwares I am looking forward to using the
border box model :-). Nowadays it is impossible to mix percent values with
other values. A width or height of 100% and a padding of 2em causes a
scrollbar. This will be much better with a border-box model.

A really huge improvement would be calculating CSS:
#menu {
width:20em;
}
#contents {
margin: 2em;
border: solid 3px;
width: (100% - 20em - 4em - 6px);
}

Or even better with reference to other elements:
#menu {
width:20em;
min-width:200px /* width of logo graphic */
}
#contents {
margin: 2em;
border: solid 3px;
width: (100% - #menu.width - 4em - 6px);
}

Will need a lot of CPU power of course...

--
Markus

[Lauri Raittila]

Re: vertical-align:bottom not working

In article Markus Ernst wrote:[color=blue]
> "Lauri Raittila" <lauri@raittila .cjb.net> schrieb im Newsbeitrag
> news:MPG.1a6ce4 511a68c9eb989da 4@news.cis.dfn. de...[/color]
[color=blue][color=green]
> > vertically center
> > http://www.student.oulu.fi/~laurirai/www/css/middle/[/color][/color]
[color=blue][color=green]
> > But I think I have made some mistake, as it seems strange how badly
> > Mozilla renders three of the examples. So if someone would look it with
> > something else than 1.4 mozilla, I would like to hear.[/color][/color]

I found out that Mozilla didn't like positioning and floating at same
time after I posted that, and that it incorrectly floated but not
positioned. (it should have positioned but not floated if it was
following spec.)
[color=blue]
> Netscape 7.0 (I am sorry I don't find out on which Mozilla version it is
> based):
> - Line-height: Image 2 px below middle
> - Absolute positioning: Text 2 px below middle
> - Table-cell: different height (seems to behave like border-box model)
> - Padding and negative margin: as absolute positioning
> - Relative positioning and negative margin: Broken (Text on top, image
> overlaps top)
> - Absolute positioning and negative margin: as absolute positioning
>
> I also have installed Mozilla 1.0, seems to behave exactly the same.[/color]

Thanks. I never checked exact pixels, so I think they were rendered just
as Mozilla 1.4.
[color=blue][color=green]
> > Anyway, more steps are taken toward ease of use in CSS3.[/color]
>
> As a user of graphic layout softwares I am looking forward to using the
> border box model :-). Nowadays it is impossible to mix percent values with
> other values. A width or height of 100% and a padding of 2em causes a
> scrollbar. This will be much better with a border-box model.[/color]

Of course, the CSS property that changes mode to border box, works
already on many browsers. I'm not sure about IE6 or khtml, but at least
Opera, Mozilla and MacIE.
[color=blue]
> A really huge improvement would be calculating CSS
> Or even better with reference to other elements[/color]

Both are suggested many times, but I don't think they are coming. At
least the latter isn't.


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Markus Ernst]

Re: vertical-align:bottom not working

"Lauri Raittila" <lauri@raittila .cjb.net> schrieb im Newsbeitrag
news:MPG.1a6df4 2f1515e896989da a@news.cis.dfn. de...
[color=blue][color=green]
> > A really huge improvement would be calculating CSS
> > Or even better with reference to other elements[/color]
>
> Both are suggested many times, but I don't think they are coming. At
> least the latter isn't.[/color]

Yes I was afraid I was not the first one to have these ideas ;-)

--
Markus