HanDyMango

A friend of mine from PurplePops.com asked me to look into a problem she was having related only to Internet Explorer browsers.

While the page layout looked perfectly fine in Firefox or Opera (as seen below)


it was not displaying the "fifteendots" graphic link on IE 6 and 7 (maybe 8 as well)


it turns out that the graphic link was somehow positioned at the bottom of the page


I immediately knew this problem was related to CSS and told her that I can't guarantee the fix since CSS is not my strength, not to mention I hate working with CSS.

I'm a pretty old-fashioned web developer. I like things clean and black-and-white when it comes to html and page layout. That's why I still prefer and continue to use TABLE tags instead of fancy CSS even if I have to use several nested tables.
I know the advantages of CSS and why it's better than TABLE but I can visualize better in my head with TABLE than with CSS.

Anyways, going back to the problem...
When I reviewed the CSS file, I saw that the problematic graphc link was part of a DIV tag that had #sidebardeco style, which had a position attribute value of absolute.


Without any further investigation, I changed the absolute value to static and when I reloaded the page in IE, I was pleasantly surprised that it got fixed! It matched exactly how it was shown in Firefox and Opera.

However, I knew this was too easy to be true... it turns out that this change now broke the Firefox and Opera.


As you can see from above screen shot, the graphic logo is now slightly shifted to the right and is no longer perfectly aligned with the above layout.

I spent couple of hours trying to figure out the cause of the problem and how I can make it work for both Firefox and IE but I wasn't successful (only because I really suck in CSS).

Only solution I had was that absolute position works for Firefox and Opera but not IE, and static position works IE but not others.
If I had the access to the PHP source, I would have created two CSS files then add PHP condition to include different CSS based on the browser type but since I don't have access to the source, I wanted to look for a solution that will work within CSS and/or HTML.

After searching for few more hours in google, I finally found the solution. It's Conditional Comment for IE!
We all hate Microsoft for not conforming to the standards and doing their own things and this is one of them. Microsoft apparently added this conditional comment since Internet Explorer version 5!

Conditional Comments for IE is basically an HTML comment (<!-- -->) with some sort of condition that can only be interpreted by Internet Explorer browsers. If the condition resoles to true, then IE will parse the HTML comments inside the condition and treat it as a normal HTML instead of a comment.

Here's an example:

<!--[if IE]> 
<style type="text/css"> 
#sidebardeco { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN-LEFT: 700px; PADDING-TOP: 0px; POSITION: static } 
</style> 
<![endif]--> 

Basically, the above style gets included in the HTML page only by an Internet Explorer browsers.

So the easiest way to fix the PurplePops frontpage issue is to include the above conditional comments anywhere after the main style.css has been declared. This means that the original #sidebardeco style will get overwritten to the above style ONLY for IE browsers.

If the page was showing fine for Internet Explorer version 8, then we can exclude IE 8 by changing <!--[if IE]> to <!--[if lt IE 8]>, which means to evaluate the conditional comments only if the IE version is less than 8.

You can find everything about conditional comment from Microsoft Developer Network

Hope this helps Haewon! I tested it on Firefox, Opera, IE 6 and IE 7.
and thanks since I learned something new as well