Text is unreadable at pwh.district70.org, looks fine in IE in compatibility mode

• Component: Text
• Status: RESOLVED INVALID

[tvail]

When accessing the above-cited URL (http://pwh.district70.org/media/) via Google Chrome or Apple Safari browsers, the majority of the text on the site's homepage and two of its linked pages (both Other Student Resources and Other Staff Resources, as linked in the upper-left corner of the homepage) is rendered unreadable, because the text appears on a black background.  Additionally, the top line of the homepage (PWHS OPAC - Online Catalog (Books / AV Materials) |                     "Knowledge itself is power."    - Francis Bacon) appears as misplaced text.

Please note that after clicking the Compatibility View icon on initial access, the site renders perfectly every time when accessed directly via Internet Explorer or through the Bing browser.  Also, please note that this URL has never rendered properly via either Google Chrome or Apple Safari, and I have never been able to locate a Compatibility View icon for these browsers.

To reproduce this bug, access URL http://pwh.district70.org/media/ via Google Chrome or Apple Safari browsers.  Faulty rendering of the website and its linked pages (both Other Student Resources and Other Staff Resources, as linked in the upper-left corner of the homepage) is apparent on sight.

Thank you in advance for your assistance!

[Alexey Proskuryakov]

This site looks just as broken to me with Firefox 4 on Mac. Ultimately, this site needs to be fixed, since it doesn't look properly even in IE without additional user action.

It would be nice to find out what's the root cause here though.

[Hyungwook Lee]

It is site specific isuse which only IE supports nested background.

I think to support nested background is out of CSS specification.

According to the layout.css in isused page, we can see two backgrounds are defined in body and #container selector as below.

/* Rule 4 of layout.css */ 

BODY {
BACKGROUND: url(http://pwh.district70.org/media/picts/back2.gif) repeat-y center 50%
}

#container {
BACKGROUND: url(http://pwh.district70.org/media/picts/bg2.gif) repeat-y;
}

Hence it is site specific isuse which uses nested background.
(only IE supported nested background)

[Alexey Proskuryakov]

This webpage doesn't exist any more, resolving the bug.