CSS font stacks, media style sheets & 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.
Added more user friendly URL redirects to the root level .htaccess file for the font survey results to use in email notification. Corrected a bad link navigation reference to p3p.xml in the general metadata and "no robots" include files.
Actions: Ask a question about this post, seek clarification or offer a correction.
Updated the Windows font survey results and Mac font survey results with the addition of the new Mac font images.
Actions: Ask a question about this post, seek clarification or offer a correction.
Captured a series of screen grabs of Mac fonts and prepared these for addition to the Mac font sampler and survey.
Actions: Ask a question about this post, seek clarification or offer a correction.
Noted that the Apache Tomcat on Windows 95 installation article is for the version 3 architecture, not the new version 4 Catalina architecture.
Actions: Ask a question about this post, seek clarification or offer a correction.
Finalised the Atomz search results template and published with the new site search sidebar panel via the standard sidebar include file. This template uses absolute URLs throughout and marked up to the HTML Transitional DTD to accommodate various non-configurable features of the generated code, particularly target attributes on anchors and un-quoted attributes.
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
The "no results" response from the standard search is based on a separate advanced search page that is not linked to the main site at present pending any adjustments to the simple search.
Also finalised the various layout rules for the site search panel and Anchor Points: Recommended books cover illustrations started on 8th December, in CSStdLayoutCommon.css:
/*
Search panel rules. Opera
requires clear: left.
*/
#SiteSearch{
float: left;
width: 18%;
clear: left;
padding: 0.2em 0.5em 0.5em 0.5em;
margin: 1.3em 0.4em;
}
#SiteSearch H3{
margin: 0;
}
#SiteSearch FORM{
margin: 0;
}
.RgtBox, .RgtPicBox, .Book{
float: right;
margin-left: 0.5em;
}
This stylesheet also includes new layout rules for the advanced search form included in the "no results" response, paragraphs that "turn" like line breaks and to make button styles in Mozilla more like other browsers:
FIELDSET{
padding: 0.2em;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
/*
For paragraphs that turn like line
breaks.
*/
.Turn{
margin-top: 0;
margin-bottom: 0;
}
/*
Make Mozilla submit buttons more
like Opera and IE.
*/
INPUT[TYPE='submit']{
padding: 0em 0.8em;
line-height: 1.3em;
}
INPUT[TYPE='radio'], SELECT{
padding: 0;
margin: 0;
line-height: 1.3em;
}
Added fieldset to the grouped selector for wide margin-right in the strict layout stylesheet, CSStdLayoutStrict.css, and extra padding to the bottom of the #Content division:
/*
Wide margin-right to float images
and box-outs there.
*/
#Content P, #Content OL, #Content UL,
#Content DL, #Content PRE, FIELDSET,
.MenuBox{
margin-right: 31%;
}
Added some padding to the bottom of the #Content division for Internet Explorer 4 on Windows, and added fieldset to the grouped selector for the wide margin-right declaration, CSStdLayoutIE4.css:
/*
Explicitly declare text-align: left
to counteract IE4, which right
aligns text in a float: right
container. Width greater than
necessary, or appropriate.
*/
#Content{
float: right;
width: 76%;
padding: 0% 0.1% 1% 1.9%;
margin: 0;
text-align: left;
}
/*
Wide margin-right to float
images and box-outs there.
Percentage lengths on margin-right
add padding-right to the selector;
em lengths do not and are a
tolerable alternative.
*/
#Content P, #Content OL, #Content UL,
#Content DL, #Content PRE, FIELDSET,
.MenuBox{
margin-right: 8em;
}
Had to add a redundant declaration for the h3 element in the site search panel for Mozilla, which otherwise gives a bold heading, in CSStdLiveryCommon.css:
H1, H2, H3, #SiteSearch H3,
.CS, .URI, .FAQ DT,
.SuperHeading CODE{
font-weight: normal;
}
Corrected a bad reference to Java Servlet Programming, by Jason Hunter and William Crawford, in the Anchor Points: Recommended Java servlet books section and updated the cover illustration to the current edition.
Actions: Ask a question about this post, seek clarification or offer a correction.
Updated all recommended book include files to a new definition list markup with cover illustrations, summary review and Amazon UK and USA links. Added fragment anchors for new recommended Java and XML books and recommended Java books sections.
Corrected bad p3p.xml link navigation in the CSS media monitor test case 5 documents.
Actions: Ask a question about this post, seek clarification or offer a correction.
Updated the help and FAQ index in preparation for the site search facility to include a link to the new Site search help page.
Added rules to several stylesheets for the new site search panel, which has the same livery as the pre elements, CSStdLiveryStrict.css:
/*
Note warning: same colors for
background-color and
border-top-color.
*/
PRE, #SiteSearch{
color: #039;
background: #EEE;
border-style: solid;
border-width: 2px 2px 1px 2px;
border-color: #eee #dfdfdf #666 #ccc;
}
No particular style emulation for Netscape 4, but the same wide margin layout as most other content divisions, CSStdLayoutNN4.css:
H3.NoStyle, #Content, #Sidebar,
#SiteSearch, .Title{
margin: 0% 16.6%;
}
The site search panel is hidden by the print media stylesheet, CSPrint.css:
/*
Hide unnecessary selectors.
*/
.WideNav, #Sidebar, #Footbar, FORM,
.TopLink, #SiteSearch{
display: none;
}
Applied a workaround to the standard layout stylesheet for Internet Explorer 4.5 for the Mac, which miscalculates the width of the #Content division, to allow the sidebar menu to float left alongside it. CSS conformant browsers ignore the comment immediately after the selector in the second rule and apply the appropriate width in CSStdLayoutStrict.css:
#Content{
float: right;
clear: right;
width: 73%;
padding: 0% 0% 1% 1.3%;
margin: 0;
}
/*
Note warning: redefinition of width.
*/
#Content/* Hide from IE4.5 for Mac */{
width: 75%;
}
Updated the Top Anchor Points listing for the site statistics pages with the figures to November.
Actions: Ask a question about this post, seek clarification or offer a correction.
Saved out new book cover illustrations for the Anchor Points: Recommended books page.
Actions: Ask a question about this post, seek clarification or offer a correction.
Completed the addition of Internet Explorer 4.5 and 5.0 for Mac results to the CSS media monitor subsection.
Actions: Ask a question about this post, seek clarification or offer a correction.
Completed the addition of Internet Explorer 4.01 for Mac results to the CSS media monitor subsection and added cautions to all test case 5 links between the test pages. Changed the advice on the (currently) unsupported media types to recommend media dependent link elements, rather than media dependent @import rules.
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.
