Archive content from 2000 to 2010
WestNIC provides reliable web hosting services
Fastwebhost offers cheap web hosting & reseller hosting services
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.
Renamed the Apache custom error pages "on this page" menu to "HTTP error codes and custom error pages" for greater clarity and to bring the "other" custom error pages link into the main listing.
Added a friendly redirect to the Lighttpd configuration for the FAQ How do I log in to the premium content area? to simplify the new subscriber email.
Actions: Ask a question about this post, seek clarification or offer a correction.
Hid a number of additional selectors in the print media style sheet, CSPrint.css, for cleaner printing. Also set the footer boilerplate copy left aligned rather than centred.
.WideNav, #Sidebar, #Footbar, form,
.TopLink, .AlphaLinks, .NavBar,
.RgtBox, .LftBox, .RgtPicBox,
LftPicBox, .MenuBox, #SiteSearch, .URI,
.TextAd, #Footer .Button, .Sponsor,
.SponsorZone, #LinkShare {
display: none;
}
#Footer {
width: 74%;
margin-right: 20%;
margin-top: 5%;
border-top: solid thin #CCC;
text-align: left;
}
Actions: Ask a question about this post, seek clarification or offer a correction.
Added the LocalNav container class div to several pages that had been overlooked in an earlier round of markup upgrade: the Code Style CSS article, CSS newsletters, CSS news feeds and full site RSS news feeds index. Created an XML section banner include file to include in the RSS index page. Also changed the global navigation Options graphic to HTML text to style in small capitals.
Added the reset sytle sheet to the standard projection media style sheet head include file to test in the CSS media monitor section pages. And updated the DOM1 visibility menus import style sheet to adjust position of the Code Style logo and width of #MenuBar and #LinkBar div elements:
div#Header {
color: #000;
background: url(/images/logo-EurostileLozengeMedium.png)
#FFF
4.8% 4.3em
no-repeat;
height: 7.3em;
}
#MenuBar, #LinkBar {
float: none;
width: 95.9%;
position: absolute;
left: 2.7%;
border: none;
}
Adjusted the persistent style sheet, CSPersistent.css, to set the padding on the .TestData and .BarData classes for the font survey results, and set the caption on a transparent background:
.TestData {
padding: 2px;
}
td.BarData{
width: 100px;
padding: 2px 0px 2px 0px;
}
table.AdRates caption {
margin-bottom: 0.5em;
padding-top: 0.2em;
color: #000;
background: transparent;
}
Many other minor changes to the fonts, layout and livery style sheets.
Actions: Ask a question about this post, seek clarification or offer a correction.
Created a set of screen shots of Graublau Sans Web EOT font creation using Microsoft WEFT. Also created a set to show how to convert the original OTF fonts to TTF font format using the freeware Type light program. Checked in all font versions and end user licence agreement for future use.
Updated site log.
Actions: Ask a question about this post, seek clarification or offer a correction.
Checked in a copy of Eric Meyer's reset style sheet and exported a working version of the new Code Style page layout grid to use as a background image reference. Initially tested alignment and general styling in Firefox 3.5 with many adjustments over multiple style sheets. Generally the impact of the reset style sheet was minimal and many changes were for the new grid layout (yet to be released).
Added padding-top to the text ad rate table caption in the CSPersistent.css style sheet.
table.AdRates caption {
margin-bottom: 0.5em;
padding-top: 0.2em;
color: #000;
background: #FFF;
}
Set the h2 heading in the FAQ search box with the same font-size as the site search label in the CSStdFonts.css style sheet and applied an explicit line-height for the footer boilerplate copy.
.RgtBox h2,
.RgtBox h3,
.FAQSearchBox h2,
#SiteSearch label,
dt,
h3
{
font-size: 1.1em;
}
#Footer {
line-height: 1.3em;
}
Exported a larger version of the Code Style Eurostile logo image to fit the new grid layout and adjusted the CSStdLiveryCommon.css style sheet to set its background position on the #Header div element.
/*
Some top border is necessary for Opera
to position the logo correctly, so
warning for same colour as background.
*/
#Header {
color: #000;
background: url(/images/logo-EurostileLozengeLarge.png)
#FFF
3.5% 0%
no-repeat;
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: white;
}
Also corrected the colour of the site search label, which should be the same blue as other headings.
/*
Lots of selectors are blue!
Transparent background necessary to override
image background in #Header
*/
blockquote, caption, dt,
h1, h2, h3, h4, h5, h6, th,
.MenuBox th, .ScrollMenuBox th,
Q, .Q, .A, .Box label, legend,
#SiteSearch label {
color: #039;
background: transparent;
}
Set an explicit numbering style on ordered lists.
ol, ul ol {
list-style: decimal;
}
The majority of the reset and grid layout changes applied to the CSStdLayoutCommon.css style sheet, setting widths, margin, padding and borders for many selectors. Some zero length values are strictly redundant because of the reset style sheet, some declarations and values could be abbreviated but all retained for the time being.
/*
Allow even space around logo, top and
bottom. Must give explicit width for
Mac IE4.5. Excessive height for IE6,
overridden below by auto.
*/
#Header {
height: 70px;
width: 100%;
margin-top: 6.2%;
margin-bottom: 2.5%;
}
/*
Note warning: redefinition of width.
*/
#Content/* Hide from IE4.5 for Mac */{
width: 75.18%;
}
/*
Wide margin-right to float images
and box-outs there.
*/
#Content p, #Content ol, #Content ul,
#Content dl, #Content pre, fieldset,
.MenuBox, .ScrollMenuBox,
.FAQSearchBox, #Content .SQL,
#Content .StackTrace {
margin-right: 34.2%;
}
#Content .MenuBox h2,
#Content .ScrollMenuBox h2,
#Content .FAQSearchBox h2,
#SiteSearch label {
margin-top: 0.2em;
margin-bottom: 0.2em;
padding-bottom: 0em;
}
#Content .FAQSearchBox form {
padding: 0 0 1em 0;
margin: 0;
width: 100%;
}
body > #Content pre {
width: auto;
margin-right: 34.2%;
overflow: auto;
}
body > #Content dl dd pre {
width: auto;
margin-right: 0;
overflow: auto;
}
/*
Round cornered sidebar container.
*/
#Sidebar {
float: left;
width: 19.2%;
clear: none;
padding: 0;
margin: 0 0 0 2.9%;
border: none;
}
ul, ul.Menu, ol {
margin: 0em 0.2em 0.5em 1.5em;
padding-left: 0.2em;
padding-top: 0.5em;
}
ul ul, ul.Menu ul {
margin-left: 1em;
margin-right: 0.2em;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-left: 0;
}
/*
Search panel rules. Opera requires
clear: left. IE6 doesn't get the width
right, so min/max widths override.
*/
#SiteSearch {
float: left;
width: 17.2%;
/* Temporarily commented out
min-width: 18.7%;
max-width: 18.7%;
*/
clear: left;
padding: 0.5em 0.5em 0.5em 0.5em;
margin: 1% 0 0 2.9%;
}
#LinkShare {
float: left;
width: 125px;
clear: left;
padding: 0% 4%;
margin: 1% 0 0 1.9%;
}
/*
Box-out classes and contextual
selectors.
*/
.MenuBox, .ScrollMenuBox,
.FAQSearchBox {
padding: 1% 2%;
margin-top: 1.8%;
margin-bottom: 1%;
}
.LocalNav {
float: right;
width: 25.3%;
clear: left;
border: none;
padding: 0;
margin: 0 5% 0 0;
}
.SponsorZone {
min-width: 180px;
width: 37%;
}
.LocalNav .SponsorZone {
float: none;
width: 180px;
padding: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 0.2em;
border: none;
}
.URI {
margin-top: 0em;
padding-top: 0em;
margin-bottom: 0em;
}
h2, h3, h4 {
margin-top: 1.2em;
}
Added some explicit properties to tables to recover from reset values, and explicit margins on paragraphs and lists, with vertical alignment on superscript elements.
table {
margin: 2% 0%;
border-spacing: 1px;
}
table.MediaTable {
width: 66%;
}
table.MediaTable th {
font-size: smaller;
}
td, th {
padding: 4px 4px;
}
td {
vertical-align: top;
}
p, ul, ol {
margin-bottom: 0.5em;
}
sup {
vertical-align: super;
}
p.ActionPoint {
margin-bottom: 0.2em;
}
Changed the layout of the FAQ search input to make it full width, like the site search input, with the search button right aligned beneath.
input#search-input, input#faq-search-input {
width: 100%;
}
input#search-submit, input#faq-search-submit {
float: right;
}
Actions: Ask a question about this post, seek clarification or offer a correction.
Added a boolean switch to the FaqMenuGenerator class to activate the FAQ by email option, initially disabled. Also added a couple of new font images that had been omitted from the survey update script on 4 July.
Actions: Ask a question about this post, seek clarification or offer a correction.
Created a Lighttpd redirect for the FAQs published on 11 July 2009.
$HTTP["url"] == "/faq-2009-07-11" { url.redirect = ( "" => "http://www.codestyle.org/faq/Issued.shtml?year=2009&month=07&day=11" ) }
Actions: Ask a question about this post, seek clarification or offer a correction.
Added 12 new FAQ answers to various Java, servlets, Javascript and Web fonts FAQ categories. Also added a backlog of site log entries.
Actions: Ask a question about this post, seek clarification or offer a correction.
Modified the FaqMenuGenerator class to add an FAQ by email call to action to all premium content questions with a PayPal payment form. Created a FAQ by email button image to sit alongside the call to action, and a payment thank you page. Updated the standfirst include files for standard FAQ pages to mention the FAQ by email service and added new styles to CSStdLayoutCommon.css for call to action and PayPal buy now button. Shifted the vertical spacing from margin-bottom on the .Premium selector to margin-top on the .ActionPoint selector.
.Premium {
margin-bottom: 0.9em;
}
form .Premium {
padding-top: 0.7em;
}
.BuyNow {
float: right;
width: 86px;
clear: none;
height: 21px;
margin: 0.3em 0em;
}
.FAQ dd p.ActionPoint {
margin-top: 2.5em;
margin-bottom: 3em;
padding: 0.3em 0.5em;
}
Actions: Ask a question about this post, seek clarification or offer a correction.
Added friendly redirects to the Lighttpd configuration for all section email newsletter and news feed listing pages.
$HTTP["url"] == "/email-css" { url.redirect = ( "" => "http://www.codestyle.org/css/Newsletters.shtml" ) }
$HTTP["url"] == "/email-html" { url.redirect = ( "" => "http://www.codestyle.org/html/Newsletters.shtml" ) }
$HTTP["url"] == "/email-java" { url.redirect = ( "" => "http://www.codestyle.org/java/Newsletters.shtml" ) }
$HTTP["url"] == "/email-javascript" { url.redirect = ( "" => "http://www.codestyle.org/javascript/Newsletters.shtml" ) }
$HTTP["url"] == "/email-manager" { url.redirect = ( "" => "http://www.codestyle.org/sitemanager/Newsletters.shtml" ) }
$HTTP["url"] == "/rss-css" { url.redirect = ( "" => "http://www.codestyle.org/css/RSS.shtml" ) }
$HTTP["url"] == "/rss-html" { url.redirect = ( "" => "http://www.codestyle.org/html/RSS.shtml" ) }
$HTTP["url"] == "/rss-java" { url.redirect = ( "" => "http://www.codestyle.org/java/RSS.shtml" ) }
$HTTP["url"] == "/rss-javascript" { url.redirect = ( "" => "http://www.codestyle.org/javascript/RSS.shtml" ) }
$HTTP["url"] == "/rss-manager" { url.redirect = ( "" => "http://www.codestyle.org/sitemanager/RSS.shtml" ) }
Actions: Ask a question about this post, seek clarification or offer a correction.
Updated the font survey results and added 20 new Linux fonts to the survey sample. Fonts reported but not previously included in the sample include "Latin, Greek, Cyrillic" (LGC) versions of the DejaVu fonts, Linux Libertine and its all capitals "C" font family.
Updated font survey applet submission templates with latest 20 fonts for Linux. Minimised Anchor Points: Fonts and foundries listing by removing font listings per foundry and added several recent font-family and @font-face related articles and inspirational gallery links. Set names of Windows, Mac and Linux in sampler menus in strong markup for clearer signalling in text links.
Added new font survey image samples for several Mac fonts not covered previously:
And for many Linux fonts not previously covered:
Latest: Build a better CSS font stack with our font survey results:
Archived site log, May 2009 entries.
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 final site log contents.
