[thelist] CSS problem with divs

[Gunlaug Sørtun]

Kevin Stevens wrote:
> http://www.ratking.co.uk

> I have finally decided to leave the dark side and start using CSS for
>  positioning instead of tables.

Good :-)

Here's a copy of your page...

<http://www.gunlaug.no/tos/alien/ks/test_07_081402.html>

...with corrections and additions in the style-element in page-head.

> [...] Despite IE doing what I think it should be doing it is leaving 
> a small gap at the bottom of the navbar div and the position: fixed 
> doesn't work either, although I think this is a bug in IE.

IE6 doesn't support 'position: fixed'. IE7 does.
I've added an expression with offset-values to simulate that
property/value in IE6.
See: 'position: fixed in IE/win'[4].

> So, should the container stretch to the size of the div?

Containers should *not* expand to contain floats by default - and not at
all when a specific 'height' is declared.
IE6 has an 'auto-expansion' bug not found in proper browsers. Fixed in IE7.

The standardized methods for making a container expand to contain its
floating children, is to either...

• add a 'clear: both' on an element at the very bottom of the container,
below all the children. This can be done by using a real element in the
source-code, or by applying one through the pseudoclass ':after' -
exemplified in 'easyclearing'[2].

...or to...

• establish a new 'block formatting context'[1].

I've chosen the latter method[1], since it works just fine in your case.
There are cases where this method won't work well, so you should look at
the alternatives.

Note that both 'position: fixed' and 'position: absolute' take an
element completely out of the flow, so a container won't expand to
contain such elements no matter what.

> And where is the space at the bottom of the navbar coming from in IE?

Images are inline-elements, so IE adds the space for descenders under
the image in navbar. Other browsers won't do that when in 'quirks mode'
or 'almost standard mode', but they will in 'standard mode'.

One "cure" is to turn the image into a 'block' element, which is what
I've done.

I've also changed the doctype to one that triggers 'standard mode'
- see 'Doctypes and their respective layout mode'[3].


Hope the above is of some help.

regards
	Georg

[1] http://www.w3.org/TR/CSS21/visuren.html#block-formatting
[2] http://www.positioniseverything.net/easyclearing.html
[3] http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html
[4] http://www.gunlaug.no/contents/wd_additions_15.html
-- 
http://www.gunlaug.no