At 8/10/2007 05:01 PM, Joyce Evans wrote:
When I view the following link (which Im
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 cant 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]
*******************************************************************
