How to make my layout interoperable?

Hi everyone!

I was hoping someone could give me a hand with a stylesheet of mine
that I have put a lot of time into but is completely crap in everything
except Firefox.

The stylesheet is the default on my web site at http://owl.me.uk/ -
perhaps a good page to see it in action would be something like
http://owl.me.uk/blog.php?month=102005 .

In Firefox it looks perfect, although the only way I could get the
various blocks to not run into each other was to use "overflow: auto"
(.title, .block, #titlebar) which is probably behaving differently to
how it is supposed to anyway. I certainly don't want any scrollbars
anywhere - I just want the blocks to be separate from each other as
they appear in Firefox.

In Internet Explorer, this overflow property seems to behave exactly as
Firefox displays the page without it set, and in Opera the sidebar gets
vertical space all to itself.

Can anyone suggest what I need to change to get the three bits (the top
bar, the main content and the variable-height sidebar) to play ball in
either IE or Opera? I don't have Windows here so it's hard for me to do
any kind of testing in IE.

I'd very much appreciate any help or pointers people can throw at me.

Thanks very much for looking at this for me!

~ Rich

Rich Daley wrote:

I was hoping someone could give me a hand with a stylesheet of mine
that I have put a lot of time into but is completely crap in everything
except Firefox.

Add clear:both to #menu. Maybe a couple of other places, like #main.

Revert to HTML 4.01 Strict. IE is more buggy with XHTML, especially with
the the "<?xml ... >" line.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)