I had to look into this more: it doesn't make sense to me that an element with `display:inline` declared would still honor an explicit width. I have tested this in all modern browsers, and the form elements seem to be immune to inline display when it comes to dimensions.
These form elements are supposed to be inline-block per the spec, so maybe vendors hard-coded that and there is no overriding it? Sorry if I've high-jacked it, but the solution I posted doesn't make sense to me, despite it working. Here is a pen I threw together for testing: http://codepen.io/chrisrockwell/pen/aECvt On Tue, Oct 8, 2013 at 9:18 AM, Chris Rockwell <[email protected]>wrote: > 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 <[email protected]> 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 [[email protected]] >> 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 > -- Chris Rockwell ______________________________________________________________________ css-discuss [[email protected]] 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/
