Can we see some actual markup from the site? Using `inline` on a select
element looks fine on my end: http://jsfiddle.net/sZXFM/2/
On Tue, Oct 8, 2013 at 8:09 AM, Alan Gresley <a...@css-class.com> wrote:
> 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<http://www.css-discuss.org/mailman/listinfo/css-d>
> List wiki/FAQ --
> http://css-discuss.incutio.**com/<http://css-discuss.incutio.com/>
> List policies --
> http://css-discuss.org/**policies.html<http://css-discuss.org/policies.html>
> Supported by evolt.org --
> http://www.evolt.org/help_**support_evolt/<http://www.evolt.org/help_support_evolt/>
>
--
Chris Rockwell
______________________________________________________________________
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/
