Howto use CSS defs/values for interesting tricks (techdoc)

Some css style defs will only work in combination with other defs and/or an enclosing markups with different css defs.

dropcap

A dropcop is a large letter at the start of a paragraph that spans over multiple lines. The rest of the paragraph does flow around to the left and below the dropcap. It is not correct to use complicated table layout - instead use a div-float enclosed in another div (a "p"aragraph isa "div" with some extra padding).

  <div style="max-width : 20em ; text-align : justify" >
  <div style="float : left ; font-size : 220%"">
  H</div>ere is a short example text with a dropcap 
  at the  beginning...  </div>

dropnote

A dropnote is usually a small image without a caption that should be shown somewhere near a specific point in text. Using a table cell will often create additional whitespace either below the note or below the main text. Instead use a div-float enclosed in another div. Most of the time you want to set some extra padding for the enclosed image as it would otherwise look more like a misplaced dropcap.

  <div style="max-width : 20em ; text-align : justify" >
  <div style="float : right ; padding : 0.5em">
  <b>oops</b></div> Here is a short example 
  text with a dropnote placed at the right...  </div>

listseparator

Especially during formatting of xml via css you might come across a list of items where you do not want to present each on its own line - but on one line being seperated by a comma. You do not need to run that through an xsl stylesheet to add some comma to the text content, instead use a clever list of pseudo-tags and addup css defs - i.e. "content: ','".

You can try this: address :after { content : ',' ; }
However you will notice that it does not work in Explorer (for html) and most browsers will only recognize these things if they are run in strict XHTML mode (i.e. xml with html tags) but not in legacy HTML mode (i.e. sgml with html tags). Even mozilla has a lot of CSS formatting cleared out of the world in legacy mode.

Links

http://www.quirksmode.org/css/100percheight.html

Shows problems in filling "100%" of the viewport - i.e. to ensure that a footer line is always displayed at the bottom of the viewport.