At 02:31 PM 7/24/2006, Michael Landis wrote: >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
Thanks, Michael! That worked perfectly and was so simple. Ahhh, my eyes can rest easy now... ______________________________________________________________________ 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/
