The one thing you can depend on when there are specifications is that if there is wiggle room for interpretation of the spec, there will be differences in the implementation and the final results. In the case of W3C, CSS and browsers, there is definitely wiggle room and both FireFox and IE developers have chosen their own paths. I pretty much lost my mind working on a layout problem last night. I was up until 1:45 AM working on a subtle difference between IE and FireFox which had a major (and unwanted) impact on how google ads are positioned on the screen.

I've decided to go with a two column layout for my web site with a header and footer section. The problem difference between IE and FireFox manifested itself when I place a google ad-line (768px X 15px) in the footer section. FireFox decided that the ad-line should be displayed under the header section, before all content, and IE placed the ad-line in the footer. It turns out that placing a clear:both; fixed up FireFox, but caused IE to not paint the navigation window. So off I went to Google land to search and test, search and test and finally I graduated to just trying stuff without searching.

The offending css definition looks like this :

#footerContent

{

    height: 40px;

    text-align: center;

    padding: 5px;

    clear:both;

}

The last line caused FireFox to display my page layout correctly, but caused IE to go all dodgy. The fix lay in the XHTML. I had to wrap the footer code in a completely non-functional <div></div> section in order for both IE and FireFox to be happy.

The final XHTML for the footer came out looking like this: (I've bolded the fix.)

<!-- The outer div is used to keep IE honest. Otherwise, the clear:both

in footerContent will blank out the navigation content.

Adding clear to footerContent cleaned up a positioning problem

in FireFox, but caused IE to hide the left side content. -->

<div id="HackforIEclear">

    <div id="footerContent">

    <asp:ContentPlaceHolder ID="BottomAdContent" runat="server">

    </asp:ContentPlaceHolder>

    <p class="copyright">

Copyright © 2008 M. E. Harris ALL RIGHTS RESERVED</p>

    </div>

</div>

The long and the short of it is: just like C++, the fix to a complex problem in HTML generally takes hours of testing to find and five minutes to fix.