SuperSatellite ||

One of the challenges of modern web design is designing to standards that haven’t been truly standardized. Nearly any web designer will agree that the concept of CSS (Cascading Style Sheets) is great, however, anyone who has done a true XHTML 1.0 Strict and CSS layout is familiar with all the discrepancy that exists between browsers, which is no fault of the code. This is painfully obvious in Internet Explorer, of course, which balks at anything not designed with Microsoft holding its hand (aside: it’s for this reason that I truly believe that web developers should boycott any designing that requires special testing or coding to work properly in IE (Internet Explorer), but that’s a rant for another time). Maybe that’s not very fair, but in all seriousness, Internet Explorer is a haven for rendering bugs.  So, it is inevitable that you will run in to a situation where you have to rack your brain to get around an inconsistency. I was faced with just such a situation recently that has a simple solution, but one that took some scrounging to solve. I present it here for anyone finding the same issue.

Challenge: W‭ithout using tables, create a template that will sit in a layout that collapses when empty, and expands when content is plugged in.

Yes, I know there are a number of brilliant ways to make this work with simple scripts, particularly something Javascript/CSS based. The thing is, the environment this was being used in required a nearly idiot proof editing means, and there was no access to the programming environment to create a backend to handle it. Web content editing was managed through Macromedia Contribute, which those familiar with it will tell you is a terrible little piece of software for content management. But, we work in the environment we have.

The base layout template extends a background left to right, width agnostic, with a centered, fixed-width content region. So, at the point where the alert should appear, I created a div:

This sets up the div that will extend the full width of the browser and display a flashing background. Next, we need to set up a div that will be the fixed-width in the center.

At the next step, we’ll start to see the problem posed by the browser discrepancy in Internet Explorer. We place a simple line of SSI (Server Side Include) code that will grab the file that holds the alert message and place that within the display region:

With the exception of IE, this works exactly as expected. When there is text in /elements/alert.htm, the div expands for the content within the overall page layout. When it is empty, it simply collapses down into nothing and is unseen. But then there is IE. As you can see in the screenshot below, even if the alert file is empty, it wants to try and render out the div.

It turns out that this is one of the many bugs  IE has with respect to rendering out empty elements.  When an element has no height defined, it defaults to producing an element that is a single line-height tall, regardless of if there is content there or not.  The original solution to this problem was a rather sloppy application of negative margins and added padding, which is more trickery than proper coding. After some research into the issue, I managed to scrounge up a page that appeared to mention the same issue over at the Webmaster World forum that provided a far more elegant solution. The trick is to include an empty comment in the layout. When IE renders out the divs, it is able to understand that the inner div is actually empty and will seal it up. The finished code, which requires no fancy CSS juggling, appears as thus:

And with that, problem solved. This code creates a cross browser, collapsible div when empty, and expands with content. Ideally, this would be better done by writing a script into whatever content management or template handling system you use that will write in the whole chunk of code when needed, and leave it out when not, or toggle the display value in the document’s stylesheet which would eliminate the need for the empty comment trick entirely. But, as in our case, that isn’t an option 100% of the time.