CSS font stacks, developer FAQs & web standards
This page is part of a searchable archive of the Code Style site log. Technical implementation notes that shed light on when, why and how the site has evolved since 2000.
Follow the latest entries to the site log.
Extended configuration notes on custom error pages 403 and 404 and added article feedback forms. Server logs show quite a number of 301 "moved permanently" status reports on directory requests without trailing slashes, leading to 403 errors on directories without default index files (the majority at present).
Actions: Ask a question about this post, seek clarification or offer a correction.
Changed the Flash object logo class to FlashLogo and fall-back GIF img to GIFLogo on all pages so these versions can be styled separately (e.g. to scale the Flash version proportionally), and amended all stylesheets accordingly.
.FlashLogo,
.GIFLogo{
float: right;
margin: 1% 1.5%;
border: none;
}
Also added title attributes to the standard stylesheet link elements to make them non-persistent, i.e. identifiable by name as a group, and thereby amenable to the selection of alternate stylesheets.
<link
rel="stylesheet"
type="text/css"
href="/styles/CSStandard.css"
title="Standard" />
<link
rel="stylesheet"
type="text/css"
href="/styles/CSPrint.css"
media="print"
title="Standard" />
Developed a first draft, lower contrast, sans-serif alternate stylesheet with Netscape 6. Internet Explorer 3 loads alternate stylesheets regardless, but markup works as expected with Opera 3.62 and 5.0.
Actions: Ask a question about this post, seek clarification or offer a correction.
Completed review of print media stylesheet support, wrote the second draft of Print media browser conformance and added it to the home page preview links.
Actions: Ask a question about this post, seek clarification or offer a correction.
Tested clear: both workaround using CSS2 child selector in IE4 but it didn't work, so changed it to an @media rule instead to "hide" the declaration:
/*
Text-align set left to
counteract IE4, which right aligns
text with float: right.
*/
#Content{
float: right;
width: 74%;
padding: 0% 0.1% 0% 1.9%;
margin: 0;
border-left: outset 1px #EEE;
text-align: left;
}
/*
IMPORTANT:
clear: both in simple #Content
type selector crashes IE4!
clear: right doesn't crash IE4,
but doesn't allow #Sidebar to
float left alongside it.
None of the following selectors
hides this declaration from IE4:
* > DIV#Content
* > #Content
BODY > #Content
But the @media rule with one
declaration does.
This property is necessary for
Opera 4 & 5 and Netscape 6.
*/
@media screen{
#Content{
clear: right;
}
}
Actions: Ask a question about this post, seek clarification or offer a correction.
Discovered that clear: both; for the #Content selector was causing Internet Explorer 4 to crash. This declaration is essential for Opera 4 and 5 and Netscape 6 to float the sidebar to the left of the main content area (but not for Opera 3.62), so testing a workaround using a CSS2 child selector. Reset the width property to its previous value:
#Content{
float: right;
width: 74%;
padding: 0% 0.1% 0% 1.9%;
margin: 0;
border-left: outset 1px #CCC;
text-align: left;
}
/*
IMPORTANT: clear: both
in simple #Content selector
crashes IE4! Property necessary
for Opera 4 & 5 and Netscape 6.
Child selector excludes IE4.
*/
BODY > #Content{
clear: right;
}
Actions: Ask a question about this post, seek clarification or offer a correction.
Find technical implementation notes on all aspects of the Code Style site.
For a summary overview, see the annotated site log contents.
