fordie's Blog » aide-mémoire http://fordie.co.uk Just another WordPress weblog Tue, 10 May 2011 17:58:14 +0000 en hourly 1 http://wordpress.org/?v=3.3 Ffffffliping floats! http://fordie.co.uk/2007/03/20/ffffffliping-floats/ http://fordie.co.uk/2007/03/20/ffffffliping-floats/#comments Tue, 20 Mar 2007 13:45:57 +0000 admin http://fordie.co.uk/index.php/2007/03/20/ffffffliping-floats/ I’ve been having various problems over the past few days with CSS floats. more specifically, either background images on containing elements not appearing or floated elements acting as if they’ve run out of room in the parent element and dropping down on to “the next line”.

The cause of this is the fact that I haven’t cleared the float before closing the containing element. I have found two ways of curing the problem.

  1. Clear the float.
  2. set a min-height on the parent (containing) element. Remembering of course to add a height in your IE specific stylesheet.

This is pretty basic stuff, but it’s been a while since I’ve hit a problem like this in CSS so it makes sense for me to blog it to help me remember next time; and who knows it might help someone else too.

]]> http://fordie.co.uk/2007/03/20/ffffffliping-floats/feed/ 0 Sometimes the little thing you forget causes you the most pain http://fordie.co.uk/2006/08/02/sometimes-the-little-thing-you-forget-cause-you-the-most-pain/ http://fordie.co.uk/2006/08/02/sometimes-the-little-thing-you-forget-cause-you-the-most-pain/#comments Wed, 02 Aug 2006 06:21:31 +0000 admin http://fordie.co.uk/index.php/2006/08/02/sometimes-the-little-thing-you-forget-cause-you-the-most-pain/ I spend a lot of time wrestling with CSS working round IE’s broken box model.

A lot of this pain could have been avoided, if only I’d remembered about the “doctype switch”.

If you don’t know what a box model is, or why IE’s is broken, have a look at this.

There are lot’s of CSS hacks that help you get around this issue, but by far the most effective solution is to put IE into “Standards Mode”, this is done using a doctype declaration. As the name sort of implies, this is a line of code that declares the type of document you are serving to your client.
I knew that I could use a doctype to change IE’s rendering mode (because gnarly reminded me the other day), but I couldn’t remember which one to use. There are lot’s of articles on the web about this, but none that I saw simply said “if you want standards mode – do this”.

So here it is…

Thanks to Hurricane on the DDN Forum

If you want to put IE into standards compliant mode

Use:

A full strict doctype, either HTML 4.01 strict or XHTML 1.0 strict without an XML prologue.

In other words:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

needs to be the first thing in your xhtml document

]]> http://fordie.co.uk/2006/08/02/sometimes-the-little-thing-you-forget-cause-you-the-most-pain/feed/ 2