Fixed up two of the issues in regards into cross-browser compatibility with CSS positioning. It seems that Netscape and Opera take the width property as a starting point, then add the padding and border to this width; whereas MSIE reduces the content by these amounts. The end result is that each of the browsers rendered the page differently from the same content. On the front page, the main content box that this text appears in was about 12 pixels wider and overshot the edge of the topmost image.
The first possible way of solving this is to write some client-side Javascript to change using document.write or leverage some preexisting code in the mungenetengine. This code permits me to have PHP interpretted from within the MungenetCMS and rendering content conditionally. I look at the browser and render the CSS entry differently for the different browsers.
As a side result of this, Netscape 6 and Opera 6 users will also see PNG-24 graphics with transparency (check out the menu text to the left between the two browsers.)
In another subtle way, this is another reason to use server-side scripting and dynamically generated content. All it took to implement were some extra content holders with PHP to read the $HTTP_USER_AGENT.
Netscape seems stricter in its interpretation of the CSS positioning. For instance, in the original navigation box to the left I had placed a height: 430px; command. MSIE ignored this when the content grew larger than 430 pixels. Netscape didn’t expand the box and closed the box (resulting in a bogus looking clip). This is an advertisement for looking at sites with more than one browser to ensure you are writing clean code.
Another issue is that Opera seems to render my footer very differently and interpreting the offset from the content area wrong. Netscape and MSIE get it correct. So I’ve written a visible: hidden; for Opera. Sorry, no footers for Opera.
Small clean ups on the CSS to further remove tables, and reduce the size of the CSS download. Apart from some mis-written URLs (which I think are valid according to RFC1738) this site also passes the W3C Validation for HTML4.01 Transitional.
From what I can ascertain, MSIE is wrong in its calculation of ‘content width’ and NS6 and Opera are correct. (If you are really, really interested in reading specification documents: W3C on CSS content width) Either way, it’s still the designer’s responsibility to ignore the incompatibility (and upset Netscape/Opera users? wrong answer) or workaround/fix using server or client side scripting (correct answer).
Update: Opera 7 correctly renders the CSS margins and relative positioning. Fixed my code to catch this, server side. This fix breaks old Opera; but I suspect Opera users will upgrade. Safari seems to be close, at least in their build 48. From what I have read, it will get way better in the release version.