Markus Ernst wrote:
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.
Lauri refers you to this link:
http://gogle.de/gr******************...ews.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.
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 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.gif" 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.gif" 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
