Invalid HTML Does Break Things (<DIV>'s and Lists)...

Everything Looked Fine...

I was working on a project where we were creating a new Wizard for one of our web application. About 2/3's of the way through the screens looked good and everything was working well across all browsers. Then one day I get a Defect Ticket stating that the layout is completely blown out in IE6. The note in the ticket pointed out that X didn't line up with Y (amongst other things).

I looked into it. I fired up the old IE Developer Toolbar and I also looked at the site in FireFox (and FireBug). Even though it was an IE6 issue, I like to also use FireBug/FireFox in parallel in order to get a good lay of the land.

"Hmmm, IE Dev Toolbar is showing my DIV's aren't nested as they should be..."

It took a while to notice this, but, in IE6, the DIV's that contained X and Y were not nested in the Container DIV that they should be. However in FireFox (and IE7), they were. If this was due to an unclosed DIV tag, then all browsers should be screwed up. I did some probing and I found code that resembled the following:

<DL>
     <DIV id="this">
          <DT></DT>
          <DD></DD>
          <DT></DT>
          <DD></DD>
     </DIV>
     <DIV id="that">
          <DT></DT>
          <DD></DD>
          <DT></DT>
          <DD></DD>
     </DIV>
</DL>

Some Clever Developer...

Some clever developer wanted to conditionally SHOW or HIDE different <DT> and <DD> sets, so he wrapped them in <DIV> tags. The problem with that is, according to the HTML 4.1 specification:

Syntax <DL>...</DL>

Contents One or more DT or DD elements...

AHA! This means that a <DIV> cannot be a direct child of <DL>.

When FireFox and IE7 encountered the above code, it dealt with the bad HTML. When IE6 encountered the code, it "read" the improperly nested opening <DIV> but ignored the improperly nested closing </DIV>. The <DIV> was there, but IE6 wasn't acknowledging it because it wasn't properly nested. (It should have ignored the opening <DIV> but it is IE6 after all.)

Fixing the HTML Markup

So how do I fix this without having the developer (in Malaysia) have to rewrite their back-end code. I can clearly see what his intention is, so I modify the HTML Markup as such:

<DIV id="this">
     <DL>
          <DT></DT>
          <DD></DD>
          <DT></DT>
          <DD></DD>
     </DL>
</DIV>
<DIV id="that">
     <DL>
          <DT></DT>
          <DD></DD>
          <DT></DT>
          <DD></DD>
     </DL>
</DIV>

I break up the one <DL> into smaller bits and nest those inside the <DIV>'s. A little CSS tweaking and everything is working, and looking, as intended.

IE6 Multi-Class Bug

Why won't my cleverly written code work?

On a recent project I wrote some JavaScript to change the class assigned to a region so I could randomly set the background image by using different CSS classes.

In my style sheet, I had very explicitly set the styles using an #ID.ClassName combination. Well it didn't work in IE6 and it took a bit of investigating to find out why the following wasn't working for only IE6:

#UpperHome.ProspectImg1 {
     background-image: url(http://yada.yada/.../imageOne.gif)
     }
#UpperHome.ProspectImg2 {
     background-image: url(http://yada.yada/.../imageTwo.gif)
     }
#UpperHome.ProspectImg3 {
     background-image: url(http://yada.yada/.../imageThree.gif)
     }
#UpperHome.ProspectImg4 {
     background-image: url(http://yada.yada/.../imageFour.gif)
     }
#UpperHome.ProspectImg5 {
     background-image: url(http://yada.yada/.../imageFive.gif))
     }

I had a simple JavaScript that would randomly assign one of the five classes to the <DIV id="UpperHome" >. It worked fine in FireFox, Ie7, and Safari. The only place it wasn't working was in IE6. IE6 would only render the default background image I had set elsewhere.

Luckily, I found that somebody else was having a very similar problem, (I wish I could remember the search tern I used in Google to find it):

• Sonspring.com: IE6 Multi Class Bug

It turns out that if you have a series of #ID.Class pairings in a style sheet, and at least one of those pairing does not exist in the page that is calling the styles, then none of the #ID.Class pairings are interpreted by the IE6 browser.

I think. It's been a while.

Anyway, removing the #IDs from the style sheets and simply using "just classes" resolved my issue.

The following working in IE6 (and all others) just fine:

.ProspectImg1 {
     background-image: url(http://yada.yada/.../imageOne.gif)
     }
.ProspectImg2 {
     background-image: url(http://yada.yada/.../imageTwo.gif)
     }
.ProspectImg3 {
     background-image: url(http://yada.yada/.../imageThree.gif)
     }
.ProspectImg4 {
     background-image: url(http://yada.yada/.../imageFour.gif)
     }
.ProspectImg5 {
     background-image: url(http://yada.yada/.../imageFive.gif)
     }

Phantom Text in IE6

Wierd Ass Defect...

Recently I was passed along a defect that the UX team assigned to the project simply could not resolve. My manager figured it needed a "fresh pair of eyes". So I took a look at it.

"ext" text appears when optional note is checked... (IE6)

Ok. That looks bizarre. My initial thought was that it was probably a classic "unclosed tag" or something simple like that. So I popped open the page on my IE6 test machine and fired up IE Developer Toolbar and started poking around.

I tried and tried and I could not select/inspect the mysterious "ext". It was as if it did not exist in the DOM at all. It turns out it was because it didn't. It was an IE6 Rendering error.

When in doubt, Google it...

I forget the exact terms I searched with, but it was not easy to find anything that would clue me into what was going on. Finally, I think after the 3rd or 4th try I came upon a forum message on about page 3 of my search results that talked about my issue. It also referred to a page on PositionIsEverything.net. I had found my problem:

Explorer 6 Duplicate Characters Bug

"Internet Explorer 6 has a puzzling bug involving multiple floated elements; text characters from the last of the floated elements are sometimes duplicated below the last float. This bug is a real headbanger because there seems to be nothing triggering it. "

http://www.positioniseverything.net/explorer/dup-characters.html

I solved the defect above by simply adding a class to the last div tag that was being floated and applying the following styles to it:

div.newClassName {
     float: none;
     clear: both;
     }

For some reason the original UX developers decided to apply {float: left;} to all the DIVs inside this component. I think I would have coded/styled then a little differently.

This issue came up again in a French Channel of the application on another component.

I am now the "go to" guy for crazy things like this...

Targeting IE7 and IE6 Seperately From the Same Style Sheet

"If I fix it for IE7, it's broken in IE6! And visa-versa!"

Some people out there recommend using conditional comments [http://www.positioniseverything.net/articles/cc-plus.html]. However, I have found a way to target IE6 and IE7 from within the CSS Stylesheet by taking advantage of one of IE6's weaknesses.

Note! Correct DOCTYPE Needed!

In order for the following method to work, the DOCTYPE needs to be set to

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

What IE6 can't do (and how to take advantage of that!)

IE6 in the stricter DOCTYPE modes, does not support compound CSS selectors. By that I mean IE6 has trouble when you assign more than one CSS class inside a class attribute of a tag.

After you set your DOCTYPE in your page, add a <STYLE> tag that contains the following:

div.classOne.classTwo { 
 background-color: pink; /* Non IE Browsers*/
 /background-color: aqua ; /* IE7 */
 }
div.classTwo{
 /background-color: yellow; /* IE6 */
 }

Then in the BODY of your document, add the following and test it across different browsers:

<div class="classTwo  classOne ">
 <p>In all non IE browsers, this background would be PINK.</p>
 <p>In IE7, this background would be AQUA.</p>
 <p>In IE6, this background color would be YELLOW.</p>
</div>

• In all non IE browsers, this background would be PINK.
• In IE7, this background would be AQUA.
• In IE6, this background color would be YELLOW.

I'm not sure why it works exactly, but IE6 and IE7 will each pick up different styles set in the style sheet.