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.
Reduced width property of #Content to total width of less than 99% + 1px (with #Sidebar) because the sidebar was being pushed beneath the content area in Internet Explorer 4 at 1024 pixels screen resolution. This may also have been causing the browser to crash, but is yet to be confirmed.
Actions: Ask a question about this post, seek clarification or offer a correction.
Developed a first draft Print media browser conformance page based on the Projection media browser conformance page and test pages. Initial tests show a broader range of compatibility, still more browsers to try. Updated the Netscape Navigator 4 stylesheet to duplicate new version of the conformance table styles.
Actions: Ask a question about this post, seek clarification or offer a correction.
Split the Projecting your style article into a general review and new Projection media browser conformance page. The new page is supplemented by a new CSWide.css stylesheet which makes the #Content area stretch close to the overall screen width, but with similar text margins as the standard stylesheet, and the #Sidebar div come down beneath the content. This made some changes to the print stylesheet necessary too, and made some adjustments to the projection media stylesheet to display the article itself in OperaShow.
/* --------------------------------- */ /* CSWide.css */ /* --------------------------------- */ /* Created 2001-01-28 */ /* Issued 2001-01-28 */ /* Modified 2009-06-07 */ /* Copyright (c) 2001-2009 by */ /* Philip Shaw, all rights reserved. */ /* --------------------------------- */ /* This @import syntax is not recognised by IE4 and NN4, which get no styles. */ @import "/styles/CSStdFonts.css"; @import "/styles/CSStdLayoutCommon.css"; @import "/styles/CSStdLiveryCommon.css"; /* This stylesheet overrides some of the standard styles above to create a layout that allows for wide tables etc. */ @import "/styles/CSWideImport.css";
Re-numbered the projection media test pages again to split them between link elements with and without media attributes, and changed the conformance table structure and styles to clarify its layout. Added article links to the custom 404 page to mop-up the line breaks in these long URLs in Deja usenet posts.
Actions: Ask a question about this post, seek clarification or offer a correction.
Converted the Projecting your style article and test pages to more logical file naming convention by prefixing them projection- so that other media related pages can be clearly organised in the same directory. Also renamed and re-numbered the test stylesheets to the same standard.
Actions: Ask a question about this post, seek clarification or offer a correction.
Learned that the former projection media test page with an @import rule nested in an @media block is not valid and removed it from the Projecting your style article set.
Actions: Ask a question about this post, seek clarification or offer a correction.
Developed a first draft implementation of a new article on DOM1 position menus, based on the visibility menu article, which works in Opera 5. The element style.pixelTop property does not seem to be supported by Netscape 6, so this is not so broadly supported.
Actions: Ask a question about this post, seek clarification or offer a correction.
Restructured the site to move the draft Object lesson in Flash article to an element-specific /html/object/sub-directory, and the What's New archive to a /log/ sub-directory with friendly date formatting for file names: log-YYYY-MM.shtml. Went through the site making title title elements more meaningful, validating markup and checking spelling.
Configured Analog to run locally and first analysed server logs in earnest. A number of search engines have spidered the site unsolicited. Also revised the robots.txt file to prevent indexing of extra directories, as indicated by the server log, and added links to two published articles on the custom 404 error page.
Actions: Ask a question about this post, seek clarification or offer a correction.
Created a Code Style site icon file, , and general purpose bullet list image with a slight drop shadow on a transparent background and added a declaration to the @import stylesheet:
UL{
list-style: url(/images/bull-12px039.gif)
disc;
}
Actions: Ask a question about this post, seek clarification or offer a correction.
Wrote-up the IE 5.0 workaround in DOM1 visibility menus and several other minor amendments. Started a Javascript glossary page.
Actions: Ask a question about this post, seek clarification or offer a correction.
Altered the DOM1 visibility menus article to workaround an inconsistency in Internet Explorer 5.0 which initially returns the empty string for the value of an element's .style.visibility property. The script now checks that the property is not null:
// This is the new 'live' menu, make it visible
LiveMenu = document.getElementById(MenuID);
// LiveMenu.style.visibility is
// initially empty in IE5 until
// it is assigned by these
// functions, so must check that
// it's not null before proceeding...
if((LiveMenu.style)&&(LiveMenu.style.visibility!=null)){
LiveMenu.style.visibility = 'visible';
}
Actions: Ask a question about this post, seek clarification or offer a correction.
Completed second draft of DOM1 visibility menus and published it as a preview article on the pre-launch home page. Amended the menu builder script to add fail-safe conditions for the element .style object and .style.visibility property and extended the article with more Javascript and CSS notes. Refreshed the introductory text on the What's New page, archive pages and navigation links, updated the copyright date and added a mailto: link to the page footer include files. Made some minor amendments to the What is Code Style? text.
Actions: Ask a question about this post, seek clarification or offer a correction.
Stripped the optional XML processing instruction, <?xml version="1.0"?>, from all remaining files for improved browser compatibility.
Actions: Ask a question about this post, seek clarification or offer a correction.
Completed first draft of DOM1 visibility menus, added more commentary, pre-formatted code samples, tidied up and formatted script and CSS files for better readability.
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.
