I am working on a project, which has been heavily influenced by Zeldman's Designing with Web Standards, 2nd. ed.
I have the following links to style sheets in the head of the document:
CODE
<link rel="stylesheet" href="http://fcctlh.org/wp_skunkworks/wp-content/themes/fcctallahassee/style.css" type="text/css" media="all" /> <!-- The following style sheet links are included because IE doesn't seem to support media specific imports in the style sheet --> <link rel="stylesheet" type="text/css" media="screen,tv" href="http://fcctlh.org/stylesheets/FCCTScreen.css" />
Firefox renders this fine, showing the icons on screen, but not on paper (nor in print preview) and the URL on paper, but not on screen (except in print preview). However, IE6 renders the icons both on screen and on paper (and in print preview), but obeys the stylesheet on the URL.
Eureka! In writing this up, I figured it out.
There is the following in the main stylesheet:
CODE
ul#logins li { display: inline;
(yes the brackets are closed, I just copied the appropriate part.
IE6 is reading the more specific ul#logins li's style as overriding the class ScreenOnly style. Drat.
I am working on a project, which has been heavily influenced by Zeldman's Designing with Web Standards, 2nd. ed.
I have the following links to style sheets in the head of the document:
<!-- The following style sheet links are included because IE doesn't seem
to support media specific imports in the style sheet -->
<link rel="stylesheet"
type="text/css"
media="screen,tv"
href="http://fcctlh.org/stylesheets/FCCTScreen.css" />
<link rel="stylesheet"
type="text/css"
media="print"
href="http://fcctlh.org/stylesheets/FCCTPrint.css" />
<!-- END Style Sheet Links -->
And the following list in the footer section of the body:
This page's <abbr title="Uniform Resource Locator">URL</abbr> is:
fcctlh.org/wp_skunkworks/index.php?p=65 </p>
<ul id="logins" class="ScreenOnly">
<li>
<a href="http://fcctlh.org/wp_skunkworks/wp-login.php" target="_blank" title="Web Edit Login"> <img src="/images/logins/edit.png"
alt="Web Edit Login (Clipboard Icon)"
height="24" width="24" /></a></li>
<li><a href="http://mail.fcctlh.org/" target="_blank">
<img src="/images/logins/mail.png"
alt="Web Mail Login (Envelope Icon)"
height="24" width="24" /></a></li>
</ul>
Firefox renders this fine, showing the icons on screen, but not on paper (nor in print preview) and the URL on paper, but not on screen (except in print preview). However, IE6 renders the icons both on screen and on paper (and in print preview), but obeys the stylesheet on the URL.
Eureka! In writing this up, I figured it out.
There is the following in the main stylesheet:
(yes the brackets are closed, I just copied the appropriate part.
IE6 is reading the more specific ul#logins li's style as overriding the class ScreenOnly style. Drat.
Jack L. Wolfgang II
Volunteer WebServant, First Christian Church-Tallahassee, FL & Tri-State Christian Fellowship