CSS hates me…

And here I thought I had it all figured out 🙁

All was going well and I was creating my design, which has a history of its own and I will not speak about it now. However I have come across a VERY CONFUSING AND INFURIATING problem. I cannot get a background to appear in the middle part of my design, the one where the posts and the navbar will be. What is more aggravating is the fact that it is not working on FireFox while IE displays it perfectly. The reason for my vex is that everybody is saying that IE is the problematic one when it comes to compliance to CSS standards.

If any good soul out there can help me figure it out, pls do so! Download this file where I have the the five files (three images, one .php and one .css) and tell me what I’m doing wrong, for pity’s sake!

HELP!

The kind soul has been found. His name is Wolfcry911 and resides in the CSS Creator Forum. As it turns out it WAS the fault of IE as it ASSUMED things that it shouldn’t have! Poor FireFox did its job correctly, pointing out my error in all the right ways (isn’t it fun how everything falls into place after someone told you what was wrong?).

As it turns out, IE misreads nesting divs and just sums them all up when it can (by coders not applying correct CSS of course, like me). However, FireFox clearly understood the proper structure of CSS and refused to display the divs I wanted to encase in my “container” div. CONGRATS FireFox, I may have blamed you for a brief while, but I did so only in amazement, never in resentment!

UNINSTALL IE FROM YOUR COMPUTERS NOW!

P.S. The Gods of Blogging have been good to me! Wolfcry911’s post in the forum was at 17:05 and I have just found out that another kind soul, Christopher, posted in the comments the exact same solution at 17:10. So within 5 minutes I got two knowledgeable people to explain to me that I should be ashamed for blaming FireFox. This to me can only mean good things. Thank you to the both of you!

2 thoughts on “CSS hates me…”

  1. Firefox is indeed displaying things correctly. It’s IE that’s wrong. IE is expanding the #main div to enclose it’s floating children. This is not right by default, but it is what you need to do for this to work. The easiest solution is to add overflow: hidden; to #main

Leave a Reply

Your email address will not be published. Required fields are marked *

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.