Information Squid

Back to main AEAChicago2007 post

Web 2.0 reflection of Yoda!
isindex tag? from HTML 1.0, no one's used it in five years or so.
display: table doesn't have to only apply to tables
padding on images not just text; images have backgrounds
punchouts with transparent images so changed background on rollover
	shows through
turn a table into a bar graph
	old version on Meyer's site
	table { display: block; position: relative; }
	tr, th, td { position: absolute; bottom: 0; }
	tr { width: 25% } (create columns)
	th, td {width: 100%; }
	thead tr { left: 100%; top: 50%; margin: -2.5em 0 0 5em; }
	(headers outside table)
	thead th positioned correctly - legend with border on each th
	table #q2 {left: 25%; border-right: 1px dotted #999; } etc
	table tbody th { top: .75em; vertical-align: top; }
		(Q1 label at top of column)
	start using <th scope="row"> and <th scope="col">
	tbody td.sent vs td.paid colors
	position td.sent on left of column, 40% wide
	and td.paid on right, 40% wide
	borders set so look like buttons
	outset CSS property doesn't say what colors should be
	so browsers decide (poorly)
	#q1 .sent { height: 36.9%; }
	#q1 .paid { height: 33%; } etc
	precalculated numbers here; since probably coming out of database,
		just program to produce
	or could use JavaScript
	CSS will probably never let you do math: see section 8(?) of CSS1
		but also see CSS3 proposals
	Microsoft had behavior CSS-like property, but many people hate it
	extra div/list/whatever for tick marks at each $10,000
	could use content::after if willing to lose them in IE
	could use tfooter row maybe?
	#ticks { position: relative; top: -30em; margin-bottom: -30em; }
	#ticks .tick { border-bottom: 1px dotted #999; }
	#ticks .tick p { position: absolute; left: 100%; }
		(put them to the right of the graph)
use same markup for horizontal bar graph instead of vertical
accessible and indexable
reset styles
	:focus { outline: 0; }
	table { border-collapse: separate; border-spacing: 0; }
		(need cellspacing in markup)
	blockquote:before, blockquote:after, q:before, q:after { content: ""; }
	blockquote, q { quotes: "" ""; }
Firefox package / Contents/Mac OS/res/ has Firefox's default .css files
line layout is incredibly complicated, so not getting into
can set all elements to display:block and will show head etc. in (most?)
	modern browsers
html element's background inherits upward to canvas
if html element doesn't have a background and body does, it inherits
	upward to canvas
if display html element, there can be space outside it - that's where the
	Force comes from

This entry was posted on Wednesday, October 3rd, 2007 at 8:52 pm and is filed under Conference, Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.