Re: RE: [WSG] Lower portion of lower case y does not appear in h1 in IE7
http://www.nichemktghouston.com/mneiman/mneiman.css
body {
/*text-align: center - centers the web page for IE only*/
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 16px;
margin: 0px;
background-color: #33;
padding: 0 0 5px 0;
}
change the line-height: 16px; to line-height: 1.2;
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Lower portion of lower case y does not appear in h1 in IE7
Thank you, but I need the background image that I used in the #title tag, How about putting the background image on the H1 instead? -- E. Michael Brandt www.divaHTML.com divaGPS : you-are-here menu highlighting divaFAQ : FAQ pages with pizazz www.valleywebdesigns.com JustSo PictureWindow JustSo PhotoAlbum -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
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 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] ***
RE: [WSG] Lower portion of lower case y does not appear in h1 in IE7
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] ***
Re: [WSG] Lower portion of lower case y does not appear in h1 in IE7
an h1 tag within a #title tag. Does anyone have an idea why I can’t see
the lower portion of “y”?
If you rid entirely of the title div, and its styling, and use this for
your h1 styling, it ought to work better I think:
h1 {
background-color: #f29d0f;
color: #fff;
text-align: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.4em;
padding: 0.2em 0.4em;
}
--
E. Michael Brandt
www.divaHTML.com
divaGPS : you-are-here menu highlighting
divaFAQ : FAQ pages with pizazz
www.valleywebdesigns.com
JustSo PictureWindow
JustSo PhotoAlbum
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Lower portion of lower case y does not appear in h1 in IE7
Thank you, but I need the background image that I used in the #title tag, so
what you suggested below won't work in this situation. It's so strange that
the lower part of the y is only missing in IE 7. If I reduce the font size
of h1, it works, but I'd like to have the larger size if possible. Thanks.
Joyce
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of E Michael Brandt
Sent: Friday, August 10, 2007 7:25 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Lower portion of lower case y does not appear in h1 in
IE7
an h1 tag within a #title tag. Does anyone have an idea why I can't see
the lower portion of y?
If you rid entirely of the title div, and its styling, and use this for
your h1 styling, it ought to work better I think:
h1 {
background-color: #f29d0f;
color: #fff;
text-align: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.4em;
padding: 0.2em 0.4em;
}
--
E. Michael Brandt
www.divaHTML.com
divaGPS : you-are-here menu highlighting
divaFAQ : FAQ pages with pizazz
www.valleywebdesigns.com
JustSo PictureWindow
JustSo PhotoAlbum
--
***
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]
***
Re: [WSG] Lower portion of lower case y does not appear in h1 in IE7
Hey,
*quick note*
The problem you quote here doesn't seem to exist in IE7 running in
Windows Vista. I can see the complete y in the highlighted menu option
Physician Services at
http://www.nichemktghouston.com/mneiman/physician.html
--
Navjot Pawera
www.navjotpawera.com
Joyce Evans wrote:
Thank you, but I need the background image that I used in the #title tag, so
what you suggested below won't work in this situation. It's so strange that
the lower part of the y is only missing in IE 7. If I reduce the font size
of h1, it works, but I'd like to have the larger size if possible. Thanks.
Joyce
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of E Michael Brandt
Sent: Friday, August 10, 2007 7:25 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Lower portion of lower case y does not appear in h1 in
IE7
an h1 tag within a #title tag. Does anyone have an idea why I can't see
the lower portion of y?
If you rid entirely of the title div, and its styling, and use this for
your h1 styling, it ought to work better I think:
h1 {
background-color: #f29d0f;
color: #fff;
text-align: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.4em;
padding: 0.2em 0.4em;
}
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Lower portion of lower case y does not appear in h1 in IE7
Interesting - I didn't realize the operating system could affect the way IE
7 displays a web page. I am still using Windows XP.
Joyce
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Navjot Pawera
Sent: Friday, August 10, 2007 10:01 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Lower portion of lower case y does not appear in h1 in
IE7
Hey,
*quick note*
The problem you quote here doesn't seem to exist in IE7 running in
Windows Vista. I can see the complete y in the highlighted menu option
Physician Services at
http://www.nichemktghouston.com/mneiman/physician.html
--
Navjot Pawera
www.navjotpawera.com
Joyce Evans wrote:
Thank you, but I need the background image that I used in the #title tag,
so
what you suggested below won't work in this situation. It's so strange
that
the lower part of the y is only missing in IE 7. If I reduce the font
size
of h1, it works, but I'd like to have the larger size if possible.
Thanks.
Joyce
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of E Michael Brandt
Sent: Friday, August 10, 2007 7:25 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Lower portion of lower case y does not appear in h1
in
IE7
an h1 tag within a #title tag. Does anyone have an idea why I can't see
the lower portion of y?
If you rid entirely of the title div, and its styling, and use this for
your h1 styling, it ought to work better I think:
h1 {
background-color: #f29d0f;
color: #fff;
text-align: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.4em;
padding: 0.2em 0.4em;
}
***
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]
***
Re: [WSG] Lower portion of lower case y does not appear in h1 in IE7
On 11 Aug 2007, at 10:01 AM, 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”?
Hi Joyce
Apart from the fact that you really shouldn't be using px to define the
size of your h1 text, try adding line-height to the h1 rule in your
css, and then tweaking the padding:
h1 {
color: #ff;
text-align: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 22px ;
padding: 9px 62px 0 0;
margin: 0;
}
Tested in IE7/XP; haven't looked at 6...
HTH
N
___
omnivision. websight.
http://www.omnivision.com.au/
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
