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.
Started compiling the Projecting your style article by converting the whole draft set to server parsed pages with common navigation links and meta elements. Incorporated the yes / no / not applicable styles into the standard site stylesheets for general purposes and adjusted included feedback forms' input size attributes to 30 narrow them slightly.
/*
Article styles
*/
/*
Yes/No/Not Applicable
*/
.Y{
color: #000;
background: #FF0;
font-weight: bold;
}
.N{
color: #FFF;
background: #C00;
font-weight: bold;
}
.NA{
color: #000;
background: #EEE;
font-size: 60%;
}
TD.Y, TD.N, TD.NA{
text-align: center;
font-family: sans-serif;
}
.SubHeading{
text-align: center;
font-size: small;
}
.SuperHeading{
text-align: center;
}
Also changed margin-right on p elements nested in ol or ul elements to prevent the margin-right: 25%; from being compounded, and removed margin-right: 25%; from the caption declaration.:
/*
But don't compound the margin
*/
#Content OL OL,
#Content UL UL,
#Content OL P,
#Content UL P{
margin-right: 0;
}
CAPTION{
color: #039;
background: none;
text-align: left;
letter-spacing: 0.02em;
font-weight: bold;
font-size: 110%;
}
Applied negative margin-top and margin-bottom to p elements and headings respectively in the Netscape-only stylesheet to mimic the margins in the standard stylesheet:
/*
Pull-in margin-right to float
images and box-outs there. Only
actually works when there is a
'natural' 100% element in
#Content, e.g. table or hr.
N.B. Negative margin-top partly
obscures links on the first
line under a heading.
*/
#Content P,
#Content OL,
#Content UL{
margin-right: 25%;
margin-top: -0.5em;
}
/*
Cannot specify background:
transparent for NN4.x -- makes
the background black! Negative
margin-bottom applied to
match real CSS support.
*/
H1,
H2,
H3{
color: #039;
background: none;
font-weight: normal;
letter-spacing: 0.02em;
margin-bottom: -0.75em;
}
H4,
H5,
H6,
TH,
DT{
color: #039;
background: #FFF;
font-weight: bold;
letter-spacing: 0.02em;
margin-bottom: -0.75em;
}
Actions: Ask a question about this post, seek clarification or offer a correction.
Completed the first draft of Apache Tomcat on Windows 95 article.
Actions: Ask a question about this post, seek clarification or offer a correction.
Completed the first draft Golden Rules of Javascript article.
Actions: Ask a question about this post, seek clarification or offer a correction.
Wrote a first draft review of Javascript, The Definitive Guide. Had to remove the height property from #Header as it caused overlap problems when additional text was introduced, and added a clear: both declaration to #Content to clear the logo image for standard pages. Added additional grouped selectors for margin-right and margin-bottom:
#Header P,
#Header H1{
margin-right: 20%;
margin-bottom: 0;
}
Also removed the border attributes from #Footer as it didn't suit the new text-only format.
Actions: Ask a question about this post, seek clarification or offer a correction.
Completed the second draft of Apache JServ on Windows 95 and published it as the first of a series of preview articles on the pre-launch home page. Specified font-family: serif for all heading elements and reduced the font-size of pre text to 90%. Re-established the print media stylesheet CSPrint.css, re-formatted the CSNN4Standard.css stylesheet and made some minor revisions to the page footer and article feedback include files. Introduced more specific classes to float .ValidXHTML, .ValidHTML and .CorrectCSS footer images. Reduced margin-left on the Netscape 4 stylesheet and introduced a border to #Footer and removed from pre:
UL.Menu{
padding: 0px;
margin-left: -20px;
}
/*
Requires zero margin to maintain
100% width
*/
#Footer{
float: none;
clear: both;
margin: 0px;
border: outset
1px
#CCC;
text-align: center;
font-size: small;
font-family: helvetica,
arial,
sans-serif;
}
Stripped markup validation and CSS checker links down to text only to spare download time.
Actions: Ask a question about this post, seek clarification or offer a correction.
Further revised CSStandardImport.css to control the display of the new sidebar structure in IE4, minimising margin, padding, border and font-size and grouping selectors for convenience. Now working in IE4, Opera 5 and Netscape 6. Re-formatted stylesheet layout to minimise horizontal scrolling when included in pre elements.
Actions: Ask a question about this post, seek clarification or offer a correction.
Added a further div container to the top of the standard sidebar to work around IE4 problems with floating the upper corners either side of the <h3 class="Options">; working in Opera 5 and Netscape 6.
Actions: Ask a question about this post, seek clarification or offer a correction.
Changed all .Header, .Content, .Sidebar and .Footer references from classes to id attributes, renamed .Rule classes to .NewSection, and changed all stylesheets accordingly. Also added SUP{font-size: small;} to standard imported and Netscape 4 stylesheet, mainly for the date headings in the What's New section.
Further refined DOM1 drop-down menus to work with Opera 5 and work out some incompatibility issues with Netscape 6. One remaining issue is that the #Link A:hover styles are not displayed and margin-top does not seem to override #Header in Netscape 6.
Actions: Ask a question about this post, seek clarification or offer a correction.
Updated projection media test pages to include Opera 5 support, which appears identical to Opera 4.
Actions: Ask a question about this post, seek clarification or offer a correction.
Temporarily removed print and projection media stylesheet references from standard style include file while checking backwards compatibility issues. Corrected one of the projection media test page stylesheets to use color: teal; instead of non-standard "orange", which was erroneously suggesting odd incompatibility conditions in Opera 3.62.
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.
