Am 28.07.2012 13:58 schrieb Georg:
On 28.07.2012 13:29, Markus Ernst wrote:
http://www.rapid.ch/de/rapid-einachsgeraete/prospekte.html
The headings here match the width of 3 image elements plus borders and
the 2 margins between them. With space characters added to the
margins, the width cannot be caluclated reliably anymore.
Maybe you know a workaround for this, too?
Sort of - in a round-about way. The "auto added" space is approx .5em
either side of an inline-block, so by subtracting 1em from margin at
front-side (often means negative front-margin) and offsetting the blocks
(position: relative) to line up 1em further in - where they should show
up, you can achieve pretty pixel-accurate margin calculations. Test and
tweak subtracted value and offset till line-up is as stable as can be,
and use backside margins to create wanted space.
In most cases I simply set margins in em, .5em less that I want the
blocks spaced. But since em is not always the right unit to make sure
all blocks line up as intended in a more pixel controlled design, the
"round-about" is how I do it while waiting for the calc() property to be
supported across browser-land.
Thank you Georg! I now added the desired visible gap in px as via
padding, and set a right margin of -0.25em (as you suggested somewhere
else in this thread). This works as intended in most modern browsers
(including page or text zoom), with some minor differences in some zoom
factors in some browsers.
______________________________________________________________________
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/
