Yet more layout twiddling – I can see this is going to go on for a while! Perhaps the right aesthetic will reveal itself once all the content has been sorted out. Soon there’ll be a system of sub-menus and a bibliographical page referencing some of the design and programming books from which I’ve drawn techniques and inspiration.
On the subject of techniques; this latest incarnation of wasabicube uses a technique I came up with to get the background image layout working properly in IE/Win. When floating a div
, that has it’s own background imagery, within a div
that itself has a background image, IE seems to insert margins to the right or left of the image. This has at least two undesirable side-effects:
- The containing
div
’s background image hasbackground-colour
ed ‘borders’ - The floated
div
’s background image doesn’t extend to the edge of the containingdiv
An answer is to place a overflow: hidden;
entry in the CSS defining both the containing and contained div
s. And to makes sure the background image placement is appropriate for the type of float. E.g. top left no-repeat;
when floating to the right. In addition it’s necessary to have some ‘sacrificial’ pixels at the appropriate edge of the image that will be the background for the floated div
.
I’ll research this and see who’s come across the problem and how they’ve fixed it, and let you know.