On 8/10/2013 9:31 PM, Christian Kirchhoff privat wrote:
My ideas so far are:
- push down the chosen elements by some pixels and by that "fake" the
baseline align
- set overflow to "visible" and shorten any text contants that are too
long with Javascript (JA is mandatory for that website anyway)
Below you'll find a short example that should display the problem (the
real site I am working on is intranet and can't be reached from the
outside).
Best
Christian
<html>
<head>
<style>
.inline {
border: 1px solid #000;
display: inline-block;
padding: 8px;
width: 80px;
}
.cropped {
overflow: hidden;
}
</style>
</head>
<body>
<div>
The text within this div is <div class="inline">aligned</div> to the
baseline of the surronding text.
</div>
<div>
The text within this div is <div class="inline cropped">not
aligned</div> to the baseline of the surronding text.
</div>
</body>
</html>
Hello Christian,
For the overflow hidden inline-block, add a negative bottom margin that
equals the padding and vertical-align: bottom. This will make it close
but it will be out if the border-bottom or padding-bottom are given in
pixels. The below CSS brings all thing into line so to speak.
<style>
.inline {
display: inline-block;
padding: 0.5em 0; /* value in 'em' or you create another problem */
width: 80px;
border: 1px solid #000;
border-bottom: 0.1em solid #000; /* consider */
}
.cropped {
overflow: hidden;
margin-bottom: -0.6em; /* add, equals padding-bottom (and
border-bottom) */
vertical-align: bottom; /* add to have the border box sit on the
bottom edge of the line box */
}
</style>
Alan
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
