Howdy all, this is my first post at DP so if I'm not meeting protocol, please forgive my ignorance. I've searched here and google generally, and can't find an answer to this. Experience-wise, I'd say I'm intermediate with CSS and HTML -- I spend a ton of time with a text editor to create websites with clean code that validate. Here's the URL (don't laugh -- it's not completed, and whatever the client wants, the client gets) http://www.canoecreekairboats.com/airboat-rides.html and the stylesheet is at the same root URL named style.css This one has me baffled. In the code, you can see I have a wrapping div with no margins or padding around the "content" of the page. Inside that div, I have a div for the "rounded" portion at the top with a CSS background to create the effect, and a similar div at the bottom. Between those two div's, I have the actual "content" div, with a background applied in the CSS to complete the "box" effect visually. What I'm running into is when I try to create two "columns" with an exact width specified to fit inside my content div (no margins or padding), one floated left, one floated right... Mozilla3 removes the background of the parent div, but IE7 displays the background. Without the floated "columns" nested into the "content" div, the background appears just fine in both IE7 and M3 (which can be seen on the other pages). I'm struggling to figure out why this is happening... Mozilla is generally a better parser of clean, valid XHTML and CSS. Any ideas? Help! Thanks in advance for any advice.
The problem is simple. You are looking at what IE is doing and assuming it must be right. IE is never right. You are witnessing an IE bug. Parent elements are NEVER to expand to contain floated elements. To make other more modern browsers imitate IEs bug, add 'overflow:auto' to #contentbody to see the background. I don't have time to go through the rest. Never, ever use IE as a reference for how things should work.