list items dropping down in IE7

Hello,
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

This is a common error in Internet Explorer 7 and below, in which float is buggy. I'm a bit rusty in Internet Explorer 7 CSS, but try setting width to 1% for each li and see if that works. Alternately, you can use display: inline-block, rather than floating.

Well, all of your code is EXTREMELY problematic, particularly with the endless presentational classes for nothing, image replacement method that does not actually work when images are disabled, content cloaking the h1 (with nonsensical heading orders to match), presentational style inlined in the markup for christmas only knows what reason, hordes of scripting for ... not sure what... etc, etc...

Probably why the layout is busted in Opera and Safari here as well... to go with the fixed width layout and px metric fonts that also should be pitched.

Though the problems are further compounded by all those IMG tags that are in the markup that frankly, don't even belong there!

I'd probably have to throw it all away and start over from scratch to even TRY to fix IE issues as the page is built with flawed methodologies. I have a saying -- CSS is only as good as the HTML it's applied to, and your HTML... well...

To illustrate what I mean, there is little reason for the HTML on that layout to be much more than:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en" /> <meta name="description" content="Sarah de Nordwall is a rhapsodic theatre performer, poet and poetry workshop leader based in London, UK." /> <meta name="keywords" content="poetry, poems, performance, performer, workshop, school, session, business, coach, rhapsodic, theatre, bard, London, UK" /> <link rel="shortcut icon" href="favicon.ico" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> About Sarah de Nordwall - Poetry Opens The World </title> </head><body> <div class="arc1"></div> <div id="pageWrapper"> <a href="audio_player.html" class="audioplayer"> <img src="images/play_button.gif" alt="play" /> Listen Now </a> <h1> Sarah de Nordwall <small><span> - </span>Poetry Opens the World</small> <span></span> </h1> <ul id="mainMenu"> <li class="home"> <a href="index.html"> Home <span></span> </a> </li> <li class="performance"> <a href="poetry_performances.html"> Performances <span></span> </a> </li> <li class="workshops"> <a href="poetry_workshops.html"> Workshops <span></span> </a> </li> <li class="testimonials"> <a href="testimonials.html"> Testimonials <span></span> </a> </li> <li class="shop"> <a href="shop.html"> Shop <span></span> </a> </li> <li class="about"> <a href="about_sarah_de_nordwall.html"> About Sarah <span></span> </a> </li> <li class="whatsNew"> <a href="http://www.sarahdenordwall.blogspot.com/"> What's New <span></span> </a> </li> <li class="contact"> <a href="contact_sarah.html"> Contact<span></span> </a> </li> </ul> <div id="content"> <div class="plateWrapper"> <img src="images/sarah.jpg" alt="Sarah de Nordwall, performance poet" class="trailingPlate" /> <h2>About Sarah</h2> <p> What has poetry opened for me? </p><p> The beauty of writing poetry is that you don't have to know exactly what you are talking about, at least, at first.<br />But the opening line calls you. </p><p> It has an idea it wants to convey to you and you must obey by writing the poem. </p><p> That's how it feels sometimes. And so, the problem that you had, the question you were asking, becomes unfurled as the poem progresses, as the image blossoms into differing layers of perception and you too look back in wonder, as the answer presents itself with a smile. </p> </div> <p> When you are given a brief, whether to write a poem or a constellation of poems and stories for a BBC Manager, for a wedding, a jazz club, a political campaign or a group of work colleagues considering a particular dilemma, you will discover the answer through many sideways glances, hunches and clues, until the ground appears under your feet. The poem begins. </p><p> Its fulfilment comes, though, in performance and through the reception and responses of those for whom it is performed. </p><p> It even takes on a different form and significance, depending on the group who may be called upon to respond with their own ideas or creative writing; their own creative work that will have been kindled by the offering of the performance. </p><p> This is the immense joy and terror of my work. The never knowing and yet the trusting, that if you reach out from the inner place of your own experiencing and musings, then the ones who receive the Rhapsodic Theatre of your performance, will be enabled to hear it from the place within, that sacred space within each person, from which we often flee, but within which so many keys and revelations hide. </p><p> And that is what my life as a poet and bard is for; </p><p> my life as a performer of Rhapsodic Theatre, which is the rendering of poems, stories and songs into a bardic live form. </p><p> It is for the purpose of disclosure. </p><p> For the revealing of hidden treasure, of unexpected answers, of unlooked-for celebrations. </p><p> For the gorgeous humanising relish of realising the presence of beauty and possibility, where the forces of blandness had begun to peel the paint off the walls and sprinkle dust on the keyboard. </p><p> It is all delight. </p> <h2> How have other people's worlds been opened? </h2> <p> My background has been in the world of arts and media, education and social engagement. </p><p> Performing at the House of Lords for a meeting on freedom of Conscience and belief was a particular high point, because I had always wanted to bring the unique insights that the shared experience of poetry in performance brings, right into the heart of public life. </p><p> The angle that I chose to present on that occasion to the UN Rapporteur from Pakistan, touched upon the danger of bland and over prescribed language, which limits the richness of public discourse. George Orwell in his famous essay about politics and literature names the fact that before a regime abuses people, it must first abuse the language. The poem managed to bring humour and shared reflection to a very serious space in which parallel viewpoints had been presented in rational presentations without room for a shared imagination. </p> <div class="infoSection"> <h2>Education:</h2> <p> University of London, Westfield College and Central School of Speech and Drama Summer Scholarship to University of California, Berkley, to study Theatre and Philosophy (Existentialism in Film, Novel and Drama and Epistemology from Plato to Wittgenstein) </p> </div> <div class="infoSection"> <h2>Work:</h2> <p> 3 years teaching poetry, drama and religion at Primary Level, Rosecroft school, Manchester Where I directed a play with the 10 yr olds that won 3 awards at a National Drama Competition </p><p> 2 years at the BBC at beeb.com as a researcher and then BBC Worldwide as researcher and assistant producer on Cult TV Online, also writing poems for meetings and the Annual Review at the Strand Theatre where I was declared the Unofficial Performance Poet in Residence </p><p> 2 years at the Schools and Youth Departments of The Commonwealth Institute and Action Aid where I got the opportunity to visit the Art and Social Transformation conference in Pakistan, and visited projects in India and Bangladesh where children were being inspired to set up their own collaborative businesses in slum areas. I also trained up Yr 10s to research and speak out about issues that impassioned them - which they delivered to the Secretary General of the Commonwealth Institute </p> </div> <p> What is disclosed by beauty? - in relationships, in the workplace, in politics, in the community? What threshold are you looking to cross and how could some rhapsodic theatre help engage you and your colleagues, family, friends or community group in some transformation from the heart? </p> </div> <div id="footer"> <ul> <li><a href="index.html">Home</a></li> <li><a href="poetry_performances.html">Performances</a></li> <li><a href="poetry_workshops.html">Workshops</a></li> <li><a href="testimonials.html">Testimonials</a></li> <li><a href="shop.html">Shop</a></li> <li><a href="about_sarah_de_nordwall.html">About Sarah</a></ll> <li><a href="http://www.sarahdenordwall.blogspot.com/">What's new</a></li> <li class="last"><a href="contact_sarah.html">Contact</a></li> </ul> © Sarah de Nordwall 2011 | sarah@sarahdenordwall.com | site by <a href="http://www.hereismydesign.com">hereismydesign.com</a> </div> </div> <div class="arc2"></div> </body></html>

Maybe some more empty span and classes for those image h2's -- but I'd give webfonts a good hard look for that instead. You'll notice menu-wise I threw out over two thirds the markup.

Being sunday I'm away from the workbench -- but I'll try to remember this thread when I get back there and belt out CSS to show you how I'd approach coding that same page.

thanks so much deathshadow, if you have the time to post the css it would be really, really great to see how you would do it.

Claire x