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)
     }

Reset Stylesheets

Ground Zero

A friend of mine pointed me to an article that talks about using Reset Stylesheets. It is a style sheet that sets a common base line for all browsers to build on. essentially, it gets rid of all the baggage and default style rules that are thrust upon the developer by the browser.

"Even the browsers with the most rigorous support for web standards have slightly different starting points for many HTML elements. It's true -- measure your page elements in Firefox, Safari and Opera with a ruler and you'll see each renders them in their own subtly different ways."

For more information, I suggest you read the full article:

• Webmonkey: Using Reset Stylesheets

Missing Cursor in Input Field in Modal Layer (FireFox)

Ajax Modal Pains in Firefox! (spelling intentional)

I came across this problem at my previous employer, American Well. It was the first place I worked at where they were making heavy use of Ajax. They were big fans of the DoJo Toolkit, particularly the dijit widgets that DoJo offers. Throughout the application there are a large number of interstitial forms that were presented in Ajax Modal Panes. You know, those modal layers that aren't popups that pop new windows, but rather a new layer. Well anyway, whenever we had one of those modal layers with a form element in it (typically <input>), the cursor would not appear inside the field.

It was a small company, and whenever something was a pixel off, or didn't look quite as it should, they would come to me. Well, thanks to some Google searching I found out that there was nothing wrong with our code.

It turns out it is a well documented bug in FireFox:

• Bug 167801 - Cursor (caret) sometimes fails to appear in input text fields (shown/painted in wrong widget)

Great! I'm not crazy. I found the solution that worked for me at the bottom of page one of this message board:

• Ext JS Forums: Infamous Firefox cursor bug - Info and possible workarounds

I tried the simplest fix which was to wrap the <input> elements in a <div> and apply the following styles to that <div>:

{
  overflow:auto
  }

I may have also set { position: fixed; }. I can't remember.

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.

Microsoft Filters and ClearType

I originally posted this in another blog in April of 2007. It now has a new home in this blog.

ClearType not Working?

Recently at work, I was asked "How come the ClearType isn't rendering on the page you coded?" I wasn't sure why. I didn't care much either as I personally don't like how ClearType renders. (I think it makes text blurry and more difficult to read, especially on smaller fonts...)

So after some research (Googling) I found out why from the IEBlog, this post in particular: Notes on the interaction of ClearType with DXTransforms in IE7.

It states:

To ensure good readability of Text in IE, in the Release Candidate build we decided to disable ClearType on elements that use any DXTransform. We will render the text in those elements as aliased text, in order to increase readability.

Oh, ok. Hmmm, since I personally do not like ClearType, all I have to do in order to disable it form my personal web site, Martinator.com, is to apply a DXTransform filter to the BODY tag that essentially does nothing :-)

body {
     filter:progid:DXImageTransform.Microsoft.Gradient
            (GradientType=0, 
             StartColorStr='#00FFFFFF',
             EndColorStr='#00FFFFFF'); 
     }

Now my site is ClearType free and the smaller fonts no longer render as "blurry."

Editing the Hosts Files in MAC OS X 10.5.5

Point Browsers on a MAC to a DEV Machine

All my work is done on a Windows box using MS Visial Studio 2008. It is easy enough to adjust the hosts files on a Windows box to see your work (C:\WINDOWS\system32\drivers\etc\hosts). So I can set up dev1.martinator.com in IIS and edit this hosts file so that dev1.martinator.com will point to the IP address on my machine (where my local web server resides).

Easy-Peasy as my daughter would say.

However, if I wanted to test my local build on a MAC, it is a another story. Apple makes things on a MAC easy, but only the things they want to make easy for you. The MAC I use at work is running OSX 10.5 (Leopard I believe). It took me about a half a day or so to find a clue on the Internet as to how to change the hosts file for a MAC running OSX 10.5. I finally found out how in a message on an obscure message board that I probably couldn't find again. Here it is:

1. Open up Terminal
2. sudo vi /etc/hosts
3. put in your password
4. press "a"
5. paste/enter in your addresses, i.e.:

   101.505.39.99    dev1.martinator.com 

6. press Escape
7. press Shift+: (Hold down Shift and press the “:” button)
8. enter "wq" and hit Return.

For older MAC's, look here: Mac OS X: How to Add Hosts to Local Hosts File

My Work Environment

Machines

At my desk I've got two PC's and one Mac.

As for browsers, on my main Development PC I have:

• Internet Explorer 7
• FireFox 2.0
• Sarafi 3.0 for Windows
• Opera 9.x
• Google Chrome

On my second PC I have:

• Internet Explorer 6
• Firefox 3.0

On the MAC (OS X 10.5.5), I have

• Safari 3.1
• FireFox 2.0

Plug-in for Browsers to help debug code:

• FireBug (FireFox)
• IE Developer Toolbar (IE)

Tools

• MS Visual Studio 2008
• Homesite 5.0 (it come in handy once in a while)
• Photoshop CS2
• Calipers
• ColorPic
• SnagIt 8
• WinMerge
• CSS and HTML specs

Why?

I decided to start this blog in order to share the bizarre quirk, trick, and obstacles I've come across when trying to write cross browser compliant HTML and CSS (They do go hand in hand after-all). Mostly I will post solutions to problems here that I have found on the web by hammering away with a Google Search what my exact problem is. 99% of the time, somebody else has an answer.

Browser Neutral

I do not favor (religiously) one browser over another. I am a Web Interface Developer. I have to make sure my stuff works on all browsers (not in beta). Most of the trouble comes when making a site look the same in FireFox and IE. There there is the added bonus of IE7 and IE6 having their differences (BTW, I've found a non-hack, non conditional comment, method of targeting styles for IE7 and IE6 in the same style sheet, more on the later.) Firefox also has it's share of bugs, some of which only really good QA personal can pick up on.

I have worked on many of Fidelity Investments web sites/apps, both internal and external. I have done some very interesting stuff at American Well (when their stuff hits the market, it should be game changing), and currently I work at Monster on the Hiring/Employer site.

At each step of the way I've thought "what else is there left to learn?"

Answer: lots!