Vertical-align breaks in Safari when using strong or em!
Regular
Posted: Thu, 2008-05-08 21:42
Not so much a request for help but an observation:
I have an inline paragraph of text with an image at the end, within the paragraph. Because the image height is more than the line-height, I used vertical-align to keep the text at the top of each line so that the last line isn't spaced differently (as it will resize automatically to fit the image and vertical-align seems to default to bottom/middle). This works absolutely fine in almost all cases, except for Safari 3.1 for Windows, where using <strong> or <em> or both on a given word will break the {vertical align: top} property and reset it to default FOR THAT WORD!
I'm not entirely sure why.
Moderator
Posts: 5517
Joined: 2004-06-25
Location: Dallas
Are you setting the
Posted: Fri, 2008-05-09 05:54
Are you setting the vertical-align on the p or the img? The image is the element that needs the correction.
cheers,
gary
A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.
My site is slo-o-owly being reconstructed; visit anyway.
Regular
Posts: 18
Joined: 2008-03-11
It's probably the wrong way
Posted: Fri, 2008-05-09 10:19
It's probably the wrong way to achieve this, but I'm setting {vertical-align: top} to the p and {vertical-align: bottom} to the img within the paragraph. Looking back, the img align is probably useless any way as the line-height is forced outwards to be the same as the image height.
I'm on a different computer or I'd post the code, but basically it all works perfectly until applying a bold or italics tag to a word on the last line, whereby safari seems to drop the text within the tags to {vertical-align: bottom}. FF, IE6 and Opera have no problem with it.
Cheers!
Moderator
Posts: 5517
Joined: 2004-06-25
Location: Dallas
The following code works as
Posted: Fri, 2008-05-09 10:47
The following code works as expected on Firefox, IE7, Safari 3.1.1 (Win) and Konqueror 3.5.9 (Linux).
p img {vertical-align: top;
}
==============
<p>Now is the <strong>time</strong> for all good men <img src="tnail-num-0.png" alt="zero" /></p>
cheers,
gary
A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.
My site is slo-o-owly being reconstructed; visit anyway.
Regular
Posts: 18
Joined: 2008-03-11
Thanks Gary, I'll take a
Posted: Fri, 2008-05-09 10:55
Thanks Gary, I'll take a look at it later and change syntax to match the above.
Cheers, Chris