Very nicely stated. Unfortunately, I have not yet adjusted to the possibility that a visitor to a site might change the text size on me. I need to change my way of thinking.
Thanks for the feedback. Joyce -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Paul Novitski Sent: Saturday, August 11, 2007 10:07 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Lower portion of lower case "y" does not appear in h1 in IE7 At 8/10/2007 05:01 PM, Joyce Evans wrote: >When I view the following link (which I'm >working on) in IE7, the lower portion of the "y" >in the word "Physician" does not appear. I see >the entire "y" in IE 6 and FF 2 but not in >IE7. This text is sitting within an h1 tag >within a #title tag. Does anyone have an idea >why I can't see the lower portion of "y"? > >http://www.nichemktghouston.com/mneiman/physician.html > >Also, in the content div, I have a background >image - bg_content.jpg that has graphics to the >left and to the right, and the center is simply >white. I have been told in the past that this >type of background image is not a good idea - >meaning the white portion, but how could I get >the left and the right graphics to appear and >repeat as more content is added, without >including the white portion of the graphic? Joyce, The problem of IE7 cropping off the font descenders is fascinating and I look forward to reading an explanation. Perhaps if you posted the problem to the CSS-D list you'd get an answer to that from the likes of Ingo Chao et al. Part of the overall problem you're having with this page is that the background image is just 35px tall so it can't accommodate text enlargement. The image includes its own top & side borders so it can't be repeated vertically or horizontally as the text expands: http://www.nichemktghouston.com/mneiman/images/bg_title.jpg You tried to suppress this problem by sizing the font in pixels, but of course that succeeds only in IE. In other browsers the font enlarges out of its container and becomes not just ugly but also a nearly unreadable white on pale grey. Two simple ways to change this situation are a) to make the background image much taller so that more of it will be revealed as the headline increases in size and b) to split the background image into two components: the unrepeatable top borders and the repeatable orange body. Taking a step back, however, I don't see the need for a background image at all. The background imagery consists entirely of rectlinear monochrome spaces and lines that can be reproduced exactly with background colors and borders. The only complication in reproducing your page precisely this way is that adjacent CSS borders meet on a diagonal at the corner of a box and your top grey border butts flat on top of the gray side borders. This detail can be sacrificed for easy layout or reproduced exactly by using an extra nested div. Your nav menu as rendered is another sticky wicket, with the light & dark grey pill shapes. Again you've created a fixed-height background that's inadequate to contain enlargeable text. An easy way to start solving this is to make that background image quite tall with a light grey body and the dark grey curves only at the bottom, and position the background image in the bottom of its container. It doesn't solve your menu's other problem which is that as the text enlarges the menu spills horizontally out of the page block. Allowing the menu items to wrap around within your fixed-width column will keep the menu on-screen while the font enlarges but you'll need to re-think its background image. One possibility is to use a segment of the light & dark grey background for each nav menu LI so that each menu item maintains its grey blobby background even as it wraps. This would almost certainly require you to re-visualize the menu's graphic design to keep it looking good as text enlarges. Regards, Paul __________________________ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ******************************************************************* ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *******************************************************************
