Hi,
I have a question that could apply to a variety of cases, but I'll
explain my actual use case:
I use chosen.js to transform form select elements. On one page I have
sentences of text where certain positions are filled in with those
chosen select elements that enable the user to fill in those gaps with
different words and by that change the meaning of the sentence.
For displaying the currently selected value (if not multiple), chosen
uses a structure of a span within an a element. In order to be able to
crop values that are too long, that elements overflow value is set to
"hidden".
A couple of months ago that rendered well in Chrome, but in Firefox the
"regular" text parts of the sentences were not baseline aligned with the
contents of the chosen elements.
http://stackoverflow.com/questions/4310047/css-why-is-vertical-align-baseline-stop-working-on-firefox-when-using-overflow
discusses whether this is a bug in Firefox, but it is apparent thet
firefox simply is compliant to the W3C spec, which says:
"The baseline of an 'inline-block' is the baseline of its last line box
in the normal flow, unless it has either no in-flow line boxes or if its
'overflow' property has a computed value other than 'visible', in which
case the baseline is the bottom margin edge."
There is a workaround explained in that post which changes Firefox's
rendering and makes the content of the chosen element baseline aligned
with the surrounding text again.
Meanwhile Chrome seems to have changed something and now the rendering
there is also…well, compliant to the W3C specification, but not so well
for my use case.
Internet Explorer (I tested in version 9) does it yet again differently,
but that browser has not the highest priority.
I haven't found any best practise for my particular use case, so I was
wondering if anyone reading this has stumbled upon a similar problem and
has found a way to deal with it.
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>
______________________________________________________________________
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/
