Tinkering

11 May 2004

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 has background-coloured ‘borders’
  • The floated div’s background image doesn’t extend to the edge of the containing div

An answer is to place a overflow: hidden; entry in the CSS defining both the containing and contained divs. 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.