jasonabc@btopenworld.com wrote:[color=blue]
> Hi guys, many thanks for the feedback. Display:block gets rid of the
> annoying extra pixels - but it inserts a line break after the image -
> which messes up some elements in my page (I have text on the same line
> as some of my images).
>
> I found the image problem could be resolved by putting a height on the
> containing div? This didn't affect text though - the extras pixels of
> padding proved really stubborn. I found a post on here a year ago that
> had the same problem - they suggested putting a small line-height on
> the *containing* div. I put a line-height of 10px and the extra pixels
> disappeared! Seems a bit of an ugly workaround - but it'll do for now
> ;-)
>
> thanks again
>
> Jason
>[/color]
Jason -
Thanks, first, for posting your problem, and even more so for posting
the answer you found.
This afternoon, I started working with the code sample you included, and
it started driving *me* nuts. After thinking about the solution,
however, it doesn't really seem a work-around, but the only right way to
solve the line-height issue in these *three* problems presented in your
original post.
You asked us to consider...how to include in your <div> element:
1.) an image - an inline element with implicit dimensions
2.) a "bit of text" - an inline element without implicit dimensions, for
which each browser constructs its own anonymous container; and
3.) (in your sample) an anchor - another inline element, with some
yet different characteristics.
The default value for the line-height property is 'normal', whatever
that means to each browser you might use for each of these contained
elements.
But, since an explicit value for line-height is inherited, you're able
apply the same value for all contained elements, and clean up the act
for all browsers, with one line-height specification in the parent element.
I think it's actually quite elegant.
- Jacques
