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.
Updated various FAQ sections with new answers. Created a new premium content FAQ with standard set of includes. Also updated the premium content service page with the new head element include and FAQ menu. Added new premium content FAQ page elements to all PSFTP upload scripts.
Optimised home page text ads service area pages with new keywords and switched to a "no keywords" header include file to avoid duplication. Updated the top 10 search engine queries table and re-sorted according to search volume.
Reduced the IP node output level in ServiceLogClientParser for web.xml request valve output to 2 nodes. Corrected an error in FaqMenuGenerator where the premium content answer was being included in the premium content stub article rather than the password protected FAQ page. Fortunately noticed before content was re-deployed.
Actions: Ask a question about this post, seek clarification or offer a correction.
Added FontLab sponsorship banner include to all pages in the Web font sampler subsection. Regenerated FAQ pages with FontLab banners and made a minor correction to a Java abstract classes FAQ answer.
Actions: Ask a question about this post, seek clarification or offer a correction.
Created a new ScrollMenuBox style based on the standard MenuBox, designed to scroll to contain longer listings, such as the CSS text ads service page. All rules are identical to the original class with the exception of a fixed height and overflow declarations:
.ScrollMenuBox {
height: 14.3em;
overflow: auto;
}
Also added a rule to minimise the margin-bottom of nested unordered lists in right hand boxout panels:
#Content .RgtBox ul ul {
margin-bottom: 0;
}
Added a new QueryLinks and existing AdRates table classes to the grouped selectors for sans serif fonts and smaller font size, and added a slightly darker lilac tint to .Rate and .Total table cells when they are in odd rows.
.Odd .Rate, .Odd .Total {
color: #000;
background: #E6E6F6;
}
And added an odd row striping rule for table headings:
.Odd th {
background: #F9F9F9;
color: #039;
}
Optimised text ad service and sponsored link service pages; made the service benefits and Code Style selling points more concise and punchy. Restored the "sponsored link banner" phrase to the high- medium- and low-rank promotional include. Extended the service benefits boxout navigation to include links to the new home page text ads and FAQ text ads pages, the other service pages and vice versa.
Actions: Ask a question about this post, seek clarification or offer a correction.
Re-generated all FAQ menus with Text ad service heading and text ad campaign link in the local navigation boxout menus. Optimised text ad keywords and created a new Home Page Text Ads page to expand upon the existing service area information with examples of top 10 search engine results.
Also added an "Important service information" statement to the key premium content service pages, 401 error and payment acknowledgement page to explain the payment and registration process.
Updated the standard site search and FAQ search forms to use Google Custom Search Engine and created a new site log search form for inclusion.
Corrected bad links in the Site design anchor points and site log archive.
Actions: Ask a question about this post, seek clarification or offer a correction.
Removed the included help request form from the foot of FAQ pages in FaqMenuGenerator and adjusted the output markup to offer multiple options beneath each question; to follow-up, clarify or submit a correction to the given answer or post a new question. Formatting is handled through a new printActionPoints(String, String, String) method. Also made the link to the premium content service page more prominent on premium questions.
.FAQ dd p.ActionPoint {
margin-bottom: 3em;
padding: 0.3em 0.5em;
}
.FAQ dd .ActionPoint {
font-size: smaller;
border: solid 1px #ccc;
color: inherit;
background: #eef;
font-family: sans-serif;
}
#Content p.Premium {
line-height: 1.2em;
}
Developed a new FAQ help request form page to handle the 4 different cases above with variable text output and hidden fields to pass through the relevant values for action type, referrer and question id. Added the same action, referrer and id fields to the Soupermail help request email template and included the FAQ search box in the confirmation page template.
Regenerated all FAQs and menus to apply new features and re-deployed. Updated various standfirst include files and body copy for pages to remove references to the former "asking the right question" text on the Help and FAQs index page. This is given in a more condensed format on the help request form page.
Updated font survey results and Font stack builder servlet. Corrected the PSFTP upload script to ensure the font survey XML file is uploaded with the other files to supply the FontStack servlet.
Latest: Build a better CSS font stack with our font survey results:
Wrapped all request URI variable output in PHP htmlentities() function calls to properly encode ampersands in query parts for the FAQ announcement page and new help request pages in particular. Applied to all page footers and head element includes with these references.
<?= htmlentities($_SERVER['REQUEST_URI']) ?>
Actions: Ask a question about this post, seek clarification or offer a correction.
Made final layout and code style amendments to the new Font stack builder servlet before re-deploying it and adding links from all relevant areas of the site. Removed all magic numbers and duplicate strings to class constants. Re-styled the font stack bookmark link as an action point and added a feedback page link. Shifted hidden form fields for generic font-family, font-size and current stack list before the select elements to minimise markup before the submit buttons and make fine adjustments to styling. Also removed new lines between selectors and submit buttons.
/*
Oversize width properties for IE6 & IE7
are overridden by min-width and
max-width properties.
*/
form.GenericFontFamily select {
width: 65%;
max-width: 52%;
min-width: 52%;
}
form.FontFamily select {
width: 65%;
max-width: 52%;
min-width: 52%;
margin-top: 0.2em;
}
form.GenericFontFamily input,
form.FontFamily input {
width: 47%;
min-width: 44%;
max-width: 47%;
margin-left: 0.2em;
margin-top: 0em;
}
.ByLine {
margin-top: -0.8em;
padding-top: 0em;
}
/*
Float left for IE6, overridden below.
*/
img.Thumbnail {
float: left;
clear: none;
padding: 3px;
margin: 0.2em 0.7em 0.5em 0em;
}
/*
Hide float right from IE6
*/
#Content > p img.Thumbnail {
float: right;
margin: 0em 0em 0.5em 1em;
}
img.Thumbnail {
border: solid #999 1px;
}
Also published the sticky keyword optimisation article with a related link to the original search engine optimisation article and vice versa. Added strong emphasis to the search engine optimisation call to action for a consistent style with that for sticky keyword optimisation. Added <h2 class="NewSection"> headings to the search engine optimisation article for a similar format to the sticky keyword article. Added links from:
Added 2em padding to the top of the #Header div to give a greater feeling of space to the top of all pages.
#Header {
min-height: 65px;
height: auto;
width: 100%;
margin-top: 2em;
margin-bottom: 1em;
}
Also adjusted the logo position in the header as necessary for the DOM1 horizontal menus article.
div#Header {
color: #000;
background: url(/images/logo-EurostileLozenge.png)
#FFF
3% 4.3em
no-repeat;
height: 7em;
}
Changed the padding and margin override on h2 NewSection class headings in MenuBox divs to explicit values rather than inherit for Internet Explorer 6, which retains the large padding for NewSection headings otherwise.
.MenuBox h2.NewSection {
padding-top: 0.2em;
margin-top: 0.2em;
margin-bottom: 0em;
padding-bottom: 0em;
}
Also added HTML & XHTML, Site Manager sections to the main site contents listing, with new contents includes for the JTidy development notes and site log subsections. Simplified the contents fragment anchor navigation and minimised "Top" links.
Split the FAQ announcement page into more clearly defined sections using the NewSection class attribute. Also sectioned the Apache custom error page articles and included FAQ segments more clearly.
Updated the Apache custom error pages call to action include to an edited version of the copy from the home page and included on the Site Manager index page. Created a custom errors table of contents include file and added to the Site Manager contents page.
Corrected a bad server side include on the Java & servlets index page for the JTidy development notes article. Updated the FontStats.dtd for XML font survey results to version 1.1, as used by the Font stack builder servlet.
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.
