On 7/24/06, Janet Chang <[EMAIL PROTECTED]> wrote:
> I'm still chugging along on coding this site:
> http://www3.law.northwestern.edu/macarthur/
>
> But now I'm having an image alignment issue. I replaced the header <h1> and
> <h2> titles with an image to get it to display the fonts in the way we
> wanted (I realize this means the text can't be sized up or down, but it
> just didn't look right/as good the way it was set using header tags).
>
> The image our designer sent me has the text on top of a background of 2
> "N's." I managed to get it to align perfectly in Firefox, but for some
> reason, it's about a millimeter off in IE--the image is a smidgeon higher
> than the repeating background. I don't understand why it's doing that in IE.
>
> If I set div#header img { margin-bottom: -2px } then it looks perfect in
> IE, but in Firefox the image shifts down and overlaps the subheader.
>
> Am I totally missing something here? Is there a way of making it look right
> all around?
Yep! A very common oversight is forgetting that an image is not a
block element, but rather an inline element. Inline elements take into
account the text around them, including the space required for any
letter descenders (the tails on letters such as g, p, q, etc).
Firefox is helping you along by "getting" what you are trying to do,
but the real solution is to either (a) make the image a block-level
element with
#header img {
display: block;
}
or make the image align to the bottom of the text, rather than to the
baseline, with
#header img {
vertical-align: bottom;
}
This shouldn't impact your spacer images any, as those already are
trying to be used as blocks to make up space.
HTH,
Michael
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
