list items dropping down in IE7
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 | firstname.lastname@example.org
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