TW Blog :: Archives for October 2004

CSS Snippets Volume 1

Relates to Web Standards and CSS Design

Just noting a couple of useful CSS2 selectors (Standards UAs) and another IE hack to fix rendering:

Binding CSS behaviour of an explicit label and the related form field:

input:hover,label:hover+input,label:hover+br+input {…} 

Displaying update information for inserted content marked up by the <ins> element:

ins[datetime]:before {
  content:'Update: ';
  font-weight:bold;    
}
ins[datetime]:after {
 content: ' [' attr(datetime) ']';
 font-style:italic;
}
ins[datetime] {
  text-decoration:none;
}

Synchronizing Mozilla with IE's rendering of the align attribute for <col> elements:

IE will position cell content based on the align attributes:

<col align="left">
<col align="right" span="4">

For Mozilla a quick selector is required: (Code corrections made - see comments)

td {text-align:right;}
tr:first-child {text-align:left;}

or, slightly more economical:

td {text-align:left;}
td+td {text-align:right;}

Quick fix to IE6 overhang with fieldset backgrounds (relative sizes are arbitary but make the point):

* html fieldset {
  /* \ Not Mac */
  position:relative;clear:both;
  margin-top:1.5em;padding:1em 0;
  /* */
}
* html fieldset legend {
  /* \ Not Mac */
  position:absolute;
  top:-0.8em;left:0.4em;
  /* */
}

All are common-sense really, but someone may find them useful or enlightening!?

Posted on Friday, Oct 01, 2004 at 01:12:25.