 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / January 2008Bottom align inline elements
This is probably something simple but I've tried many kind of combinations using the 'vertical-align' (and 'line-height') property without success. I want to align the bottom of the <span> elements in the following example, i.e. to align their bottom borders: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Vertical Alignment Test</title> <style type="text/css"> /*body { line-height: 1.4; }*/ div { border: 2px dashed orange; } span.item { border: 2px dashed green; padding: 0 8pt; vertical-align: bottom; } span.big { font-size: 3em; } </style> <div> <span class="item big">Bigger</span ><span class="item">Smaller</span ><span class="item">Item</span> </div> The thing is one (or more) of the <span> elements are bigger than the rest and I couldn't get consistent result across the browsers I've tried with: SeaMonkey 1.1.x, IE 6, Opera 9.2x and Safari 3.0.x, all on Windows. Only IE 6 aligns the bottom borders but the other browsers (I trust more) render it quite differently - what I'm missing?  SignatureStanimir > This is probably something simple but I've tried many kind of > combinations using the 'vertical-align' (and 'line-height') property [quoted text clipped - 22 lines] > all on Windows. Only IE 6 aligns the bottom borders but the other > browsers (I trust more) render it quite differently - what I'm missing? Are you sure this is the right example? It looks OK in Opera to me. But in this example you don't set line-height. If you set line-height to something bigger than font-size then Opera/Firefox/Konqueror won't put a vertical-align: bottom inline box at the bottom of the line box. I think I know why they're doing that. They put it at the bottom of a "provisional" line box calculated before leading has been applied. I also think the spec is a little bit ambiguous, because you might think "bottom" ought to mean the bottom of the final line box, after leading has been applied. I have a question. If you do this: <div style="line-height: 200px; background-color: green"> <span style="vertical-align: bottom; background-color: yellow"> Hello </span> </div> does IE put the yellow box containing the word "Hello" at the bottom of the green box or pretty much in the middle? Sun, 27 Jan 2008 13:30:37 -0600, /Ben C/: > I have a question. If you do this: > [quoted text clipped - 6 lines] > does IE put the yellow box containing the word "Hello" at the bottom of > the green box or pretty much in the middle? No, it doesn't put "Hello" at the bottom of the green box but pretty much in the middle. However if I put one more <span> with a bigger text, both <span> bottoms get aligned (the bigger <span> gets in the middle of the green box): <div style="line-height: 200px; background-color: green"> <span style="vertical-align: bottom; background-color: yellow"> Hello </span> <span style="vertical-align: bottom; background-color: orange; font-size: 3em;"> Hello </span> </div> SignatureStanimir Mon, 28 Jan 2008 00:46:47 +0200, /Stanimir Stamenkov/: > Sun, 27 Jan 2008 13:30:37 -0600, /Ben C/: > [quoted text clipped - 23 lines] > </span> > </div> O.k. I'm obviously missing the 'line-height' gets inherited, so the following may be a better sample to look at: <div style="line-height: 200px; background-color: green;"> <span style="vertical-align: bottom; background-color: yellow; line-height: 50px;"> Hello </span> <span style="vertical-align: bottom; background-color: orange; font-size: 3em; line-height: 50px;"> Hello </span> </div> SignatureStanimir > Mon, 28 Jan 2008 00:46:47 +0200, /Stanimir Stamenkov/: >> Sun, 27 Jan 2008 13:30:37 -0600, /Ben C/: [...] >> No, it doesn't put "Hello" at the bottom of the green box but pretty >> much in the middle. However if I put one more <span> with a bigger [quoted text clipped - 13 lines] > O.k. I'm obviously missing the 'line-height' gets inherited, so the > following may be a better sample to look at: Yup, I just figured out the same thing :) ><div style="line-height: 200px; background-color: green;"> > <span style="vertical-align: bottom; background-color: yellow; [quoted text clipped - 6 lines] > </span> ></div> What I see there is a small gap underneath the yellow inline box which corresponds to the half-leading added to that inline box to make it up to its line-height of 50px. The bottom edge of that 50px high thing is what's aligned to the bottom of the 200px line box. > Sun, 27 Jan 2008 13:30:37 -0600, /Ben C/: > [quoted text clipped - 13 lines] > text, both <span> bottoms get aligned (the bigger <span> gets in the > middle of the green box): Right. But not in Firefox, Opera or Konqueror. They all put both spans vertically centered in the line box. I just realized why. It's because line-height is inherited. What's happening is that top and bottom half-leading is added to the _inline boxes individually_ before they are aligned within the line box. I don't think it's anything to do with those implementations using "provisional" line-box heights to do vertical-align: top and bottom after all. Including the inline-box leading, the things being aligned are all 200px since they inherited that line-height. So they aren't free to move up or down at all in the line box which is also 200px high. Anyway, if you add a rule: span { line-height: normal } then the inline boxes align to the top, bottom or middle of the green area in much more the expected fashion. Although I don't think the spec guarantees that they will be-- neither exactly how the inline box is fitted to the text nor what line-height: normal means are precisely specified. ><div style="line-height: 200px; background-color: green"> > <span style="vertical-align: bottom; background-color: yellow"> [quoted text clipped - 5 lines] > </span> ></div> |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.