Floated dives - IE 8 creates a phantom div

I’ve been pulling my hair out for days over this one.

http://djembefola.com

In ie 8 there is 5 columns, even though there is only for 4 subcontentcols in the markup.

I’ve tried removing all the content of the columns and I’m now stumped.

Anybody have any ideas?

I’m not sure if this is it or not, but I couldn’t validate your page for errors using validator.w3.org because of an error on line 52:

52.<input type="hidden" name="redirect" value="$redirectPath/index.php">

That variable could screw some stuff up.

Because of the error, I copied & pasted your source from the home page into the validator and received 30 errors & 42 warnings… The majority of them were unclosed tags. That can/will throw everything off.

If you fix those, you might just fix your site. Also, a big one is you have a closing div after the closing html tag.
Like this:

</html>
</div>

As suspected by the other posters above your problem in IE8 is cause by the invalid code. More specifically it’s this missing closing anchor here;


<h2>Latest <a href="/blog">African drumming</a> news:</h2>
<ul>
<li><a href="/blog/interviews/interview-with-mbembe-bangoura">Interview with M'Bemba Bangoura</a></li>
<li><a href="/blog/articles/djembe-and-african-drumming-tours-in-west-africa">Djembe and African drumming tours in West Africa</a></li>
<li><a href="/blog/articles/study-drumming-in-africa">Study Drumming in Africa</a></li>
<li><a href="/blog/reviews/mama-africa-festival-2010">Mama Africa Festival 2010</a></li>
<li><a href="/board/blog/">Some of our Member's Blogs!</a></li>
<li><a href="/blog">mo[B]re news</a>[/B]</li>

If you put that closing tag in place as shown above the the columns display properly and shows that even one missing tag can break a whole layout :slight_smile:

Cool thanks, I removed the div and it doesn’t help. My initial idea was also to try validate the page, but I couldn’t figure out that first error. I didn’t see the $redirectPath/index.php

I’ll try remove that a get it to validate.

Thanks for your help.

It’s really strange that the same heading is repeated across the first two columns…

I suspect that invalid code might be the culprit.

But … hmmm … I tried to validate your page and W3C just spat it straight back because there’s an invalid character somewhere in there. So I copied the source code and pasted it in, and W3C spat it straight back because the Doctype is wrong - you’re missing ‘html’ before ‘PUBLIC’. So I put that in, and it found 31 errors.

What’s really confusing me is the </div> after </html> - is that a spare one in case you run out, or have you managed to close the document without first closing all the divs inside it?

The first thing you need to do is to tackle those errors. That might fix the problem, and if it doesn’t then it should be an easier job for us to work out what else is wrong.