This seemingly simple bug has been doing my head in for hours, can anyone help me?

I have my navigation in a <ul> using display:block, background images/position changes on hover to create rollovers. In some places I have 2 elements side by side (either a static image or a narrower nav button) and their 2 widths add up to the container div width.

I wanted to keep all the elements in a single list for accessibility/simplicity.

It works great in all browsers except for IE7 (and IE6) where for some reason the 2 half-width elements refuse to sit side by side, and the second drops below. I tried position:inline, but without results.

It also adds some phantom padding/margin to the header.

You can see the page here:
About Sarah de Nordwall | Poetry Opens The World | sarah@sarahdenordwall.com

Can someone help me figure out why it doing this and how to fix it? I dont mind the site breaking in IE6, but would really like it to look ok in IE7.

Thanks so much in advance,

Claire Louise x