IE6 sucks

Posted by Phil on May 1, 2008 under Websphere Commerce | Be the First to Comment

So some of you may have run into this issue before. You’ve coded your page and it looks fabulous in IE7, IE8 (beta), FF2, FF3 (beta), and even in Safari. Then you crack open your standalone copy of IE6 and notice “ghost text” under one of your divs. It’s usually in a header, or near a breadcrumb. You can’t believe what you see so you run over the corner and fire up the Windows2000 beast just to make sure it’s really happening. It is, welcome to yet another quirk of our least loved browser

Now, thanks to the efforts of International, and Team Awesome (Domestic), we have a solution to this quirky and rather annoying problem.

1 – Make sure that you have your DOCTYPE declared (This worked for Remo)

2 – (this really isn’t a fix, but more of a bandaid) add a few  ’s behind the last text in your sentence.

3 – Throw in an empty span and make it display:inline, so if your original code looks like this:

<div id="breadcrumb-container">
	<h1 id="cat-header"><c:out value="${product.description.name}" escapeXml="false" /></h1>
	<div id="breadcrumb-nav">
		<a href="<c:out value="${TopCategoriesDisplayURL}" escapeXml="true" />">Home</a>::<a href="<c:out value="${parentCategoryDisplayURL}" escapeXml="true" />"><c:out value="${parentCategory.description.name}" escapeXml="true"/></a>::<c:out value="${product.description.name}" escapeXml="false" />
	</div>
</div>

You need insert the empty span tag in there so your code becomes this:

<div id="breadcrumb-container">
	<h1 id="cat-header"><c:out value="${product.description.name}" escapeXml="false" /></h1>
	<div id="breadcrumb-nav">
		<a href="<c:out value="${TopCategoriesDisplayURL}" escapeXml="true" />">Home</a>::<a href="<c:out value="${parentCategoryDisplayURL}" escapeXml="true" />"><c:out value="${parentCategory.description.name}" escapeXml="true"/></a>::<c:out value="${product.description.name}" escapeXml="false" />
	</div>
	<span style="display:inline;">&nbsp;</span>
</div>

If all goes well, your page should look better (more like this)