473,703 Members | 2,500 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

vertical-align:bottom not working

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
Jul 20 '05 #1
10 66035
In article Markus Ernst wrote:
Hi

I have a strange problem with vertical-align. The case can be viewed at
http://www.brainput.info/geschichte.html.
It is because you have misunderstood how vertical-align works.
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.
You are wrong. Use line-height. See this thread (about centering):
http://gogle.de/gr******************...ews.cis.dfn.de
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.


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.

Jul 20 '05 #2
Lauri Raittila wrote:
Thats because vertical-align only aplies to inline-elements, and text-
align only to block elements.


'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/>
Jul 20 '05 #3
In article Anne van Kesteren wrote:
Lauri Raittila wrote:
Thats because vertical-align only aplies to inline-elements, and text-
align only to block elements.


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


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.

Jul 20 '05 #4
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.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



Jul 20 '05 #5
"Lauri Raittila" <la***@raittila .cjb.net> schrieb im Newsbeitrag
news:MP******** *************** *@news.cis.dfn. de...
In article Markus Ernst wrote:
Hi

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


It is because you have misunderstood how vertical-align works.
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.


You are wrong. Use line-height. See this thread (about centering):
http://gogle.de/gr******************...ews.cis.dfn.de
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.


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.


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
Jul 20 '05 #6
"David Graham" <da************ @ntlworld.com> schrieb im Newsbeitrag
news:kz******** **********@news fep1-win.server.ntli .net...

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


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

Markus
Jul 20 '05 #7
In article Markus Ernst wrote:
"Lauri Raittila" <la***@raittila .cjb.net> schrieb im Newsbeitrag
news:MP******** *************** *@news.cis.dfn. de...
http://gogle.de/gr******************...ews.cis.dfn.de

Thank you for pointing me to this very interesting thread.
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.
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.
Well, Adding them just right amount of margin would have been good too.
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.
It is good question. OTOH, it would have been third definition for same
property.
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.


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.

Jul 20 '05 #8
"Lauri Raittila" <la***@raittila .cjb.net> schrieb im Newsbeitrag
news:MP******** *************** *@news.cis.dfn. de...
In article Markus Ernst wrote:
"Lauri Raittila" <la***@raittila .cjb.net> schrieb im Newsbeitrag
news:MP******** *************** *@news.cis.dfn. de...
http://gogle.de/gr******************...ews.cis.dfn.de
Thank you for pointing me to this very interesting thread.
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.


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


Well, Adding them just right amount of margin would have been good too.


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.
Anyway, more steps are taken toward ease of use in CSS3.


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
Jul 20 '05 #9
In article Markus Ernst wrote:
"Lauri Raittila" <la***@raittila .cjb.net> schrieb im Newsbeitrag
news:MP******** *************** *@news.cis.dfn. de...
vertically center
http://www.student.oulu.fi/~laurirai/www/css/middle/ 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.
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.)
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.
Thanks. I never checked exact pixels, so I think they were rendered just
as Mozilla 1.4.
Anyway, more steps are taken toward ease of use in CSS3.


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.


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.
A really huge improvement would be calculating CSS
Or even better with reference to other elements


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.

Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
16167
by: vikram.cvk | last post by:
Hello Experts, Im trying to design a CSS vertical drop down menu which should have the following functionality. Home About Us | -->Overview
2
2420
by: Stanimir Stamenkov | last post by:
I'm trying to clear some sizing issues relative to the initial containing block and the root document element. The sample document I'm trying with: http://stanio.info/viewport_fill.html Basically, for some tests I want to specify the height of an example DIV element inside the BODY using percentages of the viewport height. For this to work the BODY container should fill the viewport height where I'm using:
10
2933
by: John Baker | last post by:
Hi: I have a user who has labels that are set up 3 across and 11 vertical (which is unusual at best), and he wants me to print names and addresses on them. I have already set up for labels 10 vertical and 3 across (Avery 5160)which are another standard the user has, but can't find any in the setup for labels that show 11 vertical. I am therefore using the Avery 5160 as a start, and modifying the top and bottom margins (the margins on the...
3
9897
by: buht | last post by:
Hello Everyone, Fairly new to c# here and have a question regarding scrollbars, particularly a vertical scrollbar. It looks like my options are restricted for the textbox scrollbars being that I can enable vertical or horizontal scrollbars for the textbox and their wrapping but thats it for modifications of the scrollbar.
2
3332
by: Gene Hubert | last post by:
I'm assigning a new datasource (a datatable) to a datagrid that is aready displayed in a form. Then I assign a new value to CurrentRowIndex. The datagrid always scrolls so that the new current row is visible. However, the vertical scrollbar does not always adjust accordingly. Upon the first instance of assigning a new datasource and setting the currentrowindex to the _last_ record, the part of the vertical scrollbar that can be...
5
10058
by: Rico | last post by:
I have label that I need to be vertical. The problem is that when I select "Vertical=yes" the label reads from top to bottom rather than bottom to top (which i need). Can this be done? Any help would be great. Thanks!
3
9865
by: Adriano | last post by:
Hello, the following code draws 'top to bottom' vertical text, any ideas how to draw 'bottom to top' one? g.DrawString("This is a test vertical string", New Font("Tahoma", 8, FontStyle.Regular), New SolidBrush(Color.Gray), 100, 10, New StringFormat(StringFormatFlags.DirectionVertical)) I would gratefully appreciate any help
4
29385
by: john | last post by:
Hi to All, I am new to html authoring, so sorry if my terminology is not correct or exact. I would like to position a footer div to the bottom of the browser window. As I research in the web shows this could be done a containing element with "min-height: 100%;" and an absolute positioned element (div) inside, aligned to bottom ("position: absolute; bottom:0px")
2
1483
by: christopherlmarshall | last post by:
I am trying to figure out how to stack two widgets in a frame vertically so that they both expand horizontally and during vertical expansion, the top one sticks to the top of the frame and the bottom one consumes the remaining vertical space. I thought this would do it but it doesn't. What am I missing? from Tkinter import * class AFrame(Frame): def __init__(self,master,**config):
4
2716
by: marfola | last post by:
I'm trying to implement bottom-to-top vertical text using CSS attributes in IE : writing-mode: tb-rl; filter: flipv fliph; But I have encountered the following: the text is displayed with a grey shadow (instead of anti-alias). It seems that the problem is caused by the "filter:flip" attribute. Does anyone have a work around? (If I write the same text without the "filter" attribute, the grey shadow disappears but my text...
0
8658
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9096
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
8947
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7842
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6583
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5919
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4416
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4674
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3109
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.