[Wylug-discuss] a webdesign query / mini rant

Fri Jan 13 17:07:37 GMT 2006

On Fri, Jan 13, 2006 at 10:01:35AM +0000, Stephen Patterson wrote:
> You can also frob the stylesheets for IE only with this little bit of code
> <!--[if IE]>
>    <style type="text/css">
>       /*<![CDATA[*/ 
> 	  #testElement {
> 	  	color: #00cc00;
> 	  }
> 	  /*]]>*/
>    </style>
> <![endif]-->

Conditional comments like that are within the letter of the HTML/XHTML
standards, but they do require you to add the comment/s to every
page/template on your site (tedious and error prone).

The simplest way to achieve the same end is to learn the subset of CSS
which works consistently in older IE/Win (versions 5.x) and stick to
that.

If you really must have all the funky stuff, including CSS3, hide it
from the relevant IEs (using the Tan Hack) and ensure that your design
degrades gracefully to bog standard core CSS2 for the IEs.

This approach gives maximum funkiness and only requires you to edit one
file on your site (the site-wide stylesheet).

    See http://css-discuss.incutio.com/?page=BoxModelHack

CSS Hacks are not usually to be recommended, since they typically rely
upon hiding stuff behind standard CSS selectors that particular browsers
don't currently understand, but might understand in future.  

The Tan Hack is a bit of an exception, cos it uses a CSS selector which
depends on the presence of a mysterious (non-standard and undocumented)
HTML element which IE wraps around the page's root element (<html>).
This seems to be an intrinsic part of the IE/Windows interface and less
likely to be 'fixed' than most 'bugs'.

Most people run into to box and float model trouble with CSS positioning
in IE for two reasons:

  1. They use width/height properties to size boxes, rather than offsets
     from the container (e.g. margin, left, right, top, etc.)

  2. They use floats for layout, instead of relative absolute
     positioning (i.e. relative container, absolute column).  

     Float layouts are much less robust, because horizontally stacked
     floats are supposed to wrap onto a new line if their combined width
     exceeds that of the container.  

     Keeping horizontally stacked floats within the container width is
     difficult on stretchy layouts, cos (according to the standard)
     borders can't be set with percentage widths (making it impossible
     to calculate the accumulated percentage width of contained boxes).

See the 'Holly Hack' for how to prevent IE float layout bugs:

     http://www.communitymx.com/content/article.cfm?page=2&cid=C37E0

> Oh, and I think I'll link this page in too - http://dean.edwards.name/IE7/

Dean Edward's solution basically uses JavaScript to hack the IE DOM,
i.e. it fixes Microsoft's bugs for them.

I was amazed to find that it worked so well when I first tried it a
couple of years ago, but I've never used it on a production site, for
two reasons:

  1. It depends on JavaScript

  2. Since SP2 some Windows users get dire warnings about the security
  implications of running these scripts  (whether you see the warning
  depends on your local security settings).

If you use CSS hacks and are worried about them breaking under
Microsoft's IE7, see:

  http://www.positioniseverything.net/articles/ie7-dehacker.html

Dave