lime icon

Phosphorus and Lime

A Developer's Broadsheet

This blog has been deprecated. Please visit my new blog at klenwell.com/press.
Standards Compliance: W3C
In this case, it's not that you must conform, but you really ought to try.

I'm getting much better about design standards. With my dhMVCd template, most my pages are XHTML-compliant out-of-the-box. I notice, however, I often fail the CSS tests because the W3C-validator seems to reject style-rule overloading, which I don't quite understand.

Anyway, what I really like are the little "chicklet" images (i.e., ). Just saw this one:



Understand the concept, but not quite sure how you earn it.

Here are the W3 Validators:

HTML
CSS
Geek Fetish: Sub-$100 Laptop
Pretty amazing that they can do this for under $100. I think my first Speak & Spell cost that much.
myspace makeover: pilot
Starting making over my sister's profile for her. Not a lot of time, so we just did a basic tear-down to start. The stylesheet at present:

<style type="text/css">

/* RESET ALL PROFILE PAGE FONTS */
.nametext, .orangetext15, .whitetext12, .lightbluetext8, span.blacktext12, table table table table table strong, .btext, .redbtext, .redtext, table table table table td, table table table td, table table td, table table table table div, table font font
{
font-family:Trebuchet MS, Helvetica, sans-serif;
}

/* links */
a.navbar:link { color:orange; }
a.navbar:hover { color:lime; }
table table table td a:link { color:orange; }
table table table td a:hover { color:lime; }
a.text { color:orange; }
a.text:hover { color:lime; }
a.man:link { color:orange; }


/*** LAYOUT ***/

/* SCREEN BG */
body {
background-color:eee;
border-style:none;
}

/* PAGE, FOOTER BG */
/* border: LR ok, T or B (not both) */
table {
background-color:white;
border:2px solid ..ccc;
border-width:0 2px;
}

/* NAVBAR, PROFILE TABLE BG */
/* border OK */
table table {
background-color:white;
border:1px solid black;
}

/* PROFILE BLOCK HEADERS or BG */
/* border OK */
table table table {
background-color:ccc;
border:1px solid black;
}

/* PROFILE BLOCK BODY BG */
/* border NO */
table table table table {
background-color:white;
border:none;
}

/* TD: must be transparent! */
td {
background-color:transparent;
border:none;
}

</style>


see the results here: myspace profile
myspace: fonts
Some styles to control typefaces in myspace. Again, very ramshackle, but that's how they've set it up:

/* RESET ALL PROFILE PAGE FONTS */
.nametext, .orangetext15, .whitetext12, .lightbluetext8, span.blacktext12, table table table table table strong, .btext, .redbtext, .redtext, table table table table td, table table table td, table table td, table table table table div, table font font
{
font-family:Trebuchet MS;
}

/* STYLE INDIVIDUAL SECTIONS */
/* links */
a.navbar { color:lime; }
a.navbar:hover { color:green; }
table table table td a { color:pink; }
table table table td a:hover { color:red; }
a.text { color:yellow; }
a.text:hover { color:blue; }
a.man:link { color:purple; }

/* headers */
.nametext {color:yellow; font-size:32px;}
.orangetext15, .whitetext12, .lightbluetext8 { color:cyan; }
span.blacktext12 { color:lime; font-family:monospace; }
span#_ctl0_PageContent__ctl0_UserNetwork1_ctrlMessage { color:cyan; }
table table table table table strong { color:cyan; }

/* latest blog entry, has x friends */
.btext { color:indigo; }

/* friend count, comment count */
.redbtext, .redtext { color:blue; }

/* photo,details,comments */
table table table table td { color:red; }

/* latest blog */
table table table td { color:orange; }
table table td { color:yellow; }

/* URL */
table table table table div { color:red; }

/* footer */
table font font { color:salmon; }
Deconstructing myspace
My sister wants me to makeover her myspace profile, so I'm trying to figure out the layout for profile pages. Here's the stylesheet I've come up with:

/* SCREEN BG */
body {
background-color:#333;
border-style:none;
}

/* PAGE, FOOTER BG */
/* border: LR ok, T or B (not both) */
table {
background-color:red;
border:2px solid lime;
}

/* NAVBAR, PROFILE TABLE BG */
/* border OK */
table table {
background-color:orange;
border:2px solid cyan;
}

/* PROFILE BLOCK HEADERS or BG */
/* border OK */
table table table {
background-color:yellow;
border:2px solid black;
}

/* PROFILE BLOCK BODY BG */
/* border NO */
table table table table {
background-color:green;
border:2px solid fuchsia;
}

/* TD: must be transparent! */
td {
background-color:transparent;
border:none;
}


The profile page html is pretty shabby. Of course, as soon as I get it figured out, they'll switch to something more rational.
IE Layout Troubles
What a headache figuring this out, but I have learned by laborious trial and error (or, more accurately, error and befuddlement and dogged persistance) that putting hidden comments at the top of an xhtml document will throw off centered page layout in IE6. Not sure exactly why and don't really care to find out. Suffice it to say, not a problem in Firefox.
CSS: Reference/Quotation Styles
Three different types of reference styles. For straight quotations: .quote. For displaying code: .code. And for displaying style sheet code: .ipod.

.quote

.quote
{
margin:3px 6px;
padding:8px;
background:#fcfcfc;
border:solid thin #f6f6f6;
font: bold "MS Trebuchet",arial,sans-serif;
color:#c06000;
}


.code

.code
{
margin-bottom:0px;
padding:1em;
font-size:11px;
font-family:"Lucida Console",Monaco,monospace;
font-weight:normal;
line-height:1.5em;
color:green;
background:#eee;
border: 1px solid #ccc;
white-space: pre-wrap; /* CSS2.1 compliant */
white-space: -moz-pre-wrap; /* Mozilla-based browsers */
white-space: -o-pre-wrap; /* Opera 7+ */
_white-space: pre; /* IE */
}


.ipod

.ipod
{
margin-bottom:0px;
padding:1em; line-height:1.5em;
background:#d2e2f2; color:#3c4782;
font-family:Lucida Console,Monaco,monospace;
font-weight:normal; font-size:11px;
border:1px solid #3c4782;
white-space: pre-wrap; /* CSS2.1 compliant */
white-space: -moz-pre-wrap; /* Mozilla-based browsers */
white-space: -o-pre-wrap; /* Opera 7+ */
_white-space: pre; /* IE */
}


The negative bottom-margin compensates for the auto-linebreak setting on Blogger.
New Blog
I explain my reasons for starting this blog in the other one. The emphasis will be on design. The title comes from Walter Pater's conclusion to Studies in the Renaissance -- one of his characteristically felicitous phrases:

What is the whole physical life in that moment but a combination of natural elements to which science gives their names? But those elements, phosphorus and lime and delicate fibres, are present not in the human body alone: we detect them in places most remote from it. Our physical life is a perpetual motion of them--the passage of the blood, the waste and repairing of the lenses of the eye, the modification of the tissues of the brain under every ray of light and sound--processes which science reduces to simpler and more elementary forces.


The design of the blog, as the blog itself, will be a work in progress.