Chet Reads & Writes*

I recently entered the position of Web master at SHSU Recreational Sports. There are many projects that I am about to embark upon, but my first conquest is “fixing” the navigation bar. The following is the chronicle of my adventure into the land of CSS-only coding and design. Before I begin there are a few things you all should know.

1. Internet Explorer should me likened to the spawn of Satan. Unlike the rest of Beelzebub’s seemingly intelligent sin practitioners,  it has Down Syndrome. I have a theory that Microsoft let a group of twelve three-year-old children write the Internet Explorer source code.
2. I hold great disdain for Internet Explorer and its tyrannical strangle hold over most household internet browser usage. If you’re viewing this now from Internet Explorer,  I beg of you to go out and download any of the other free browsers out there. This list includes but is not limited to Mozilla Firefox and Opera. They’re both superior to Internet Explorer.
3. Throughout the rest of this post Internet Explorer will be referred to as IE followed with a number to indicate which version I am working with (e.g. IE5.5, IE6, IE7).

I sat down at my desk challenged with the task of making the Web site’s navigation bar work. On numerous pages the words and buttons didn’t line up or it was taking up more than one line on the page. Both of these unfortunate events were unacceptable. After browsing through the code behind the existing navigation bar and not being able to follow the previous author. I decided to create my own navigation bar to throw in, and to top it all off it was going to be completely CSS based. This was all jolly-good except I failed to understand that IE was coming in to thwart my day. The plan started out simple enough. I created a basic unordered list, then started applying the styles through my CSS, and it all started to flow together beautifully. I finally reached a point where I realized it would be a good time to give it a test run.

I opened up my browsers IE7 and Firefox 3.0. I loaded up the page and behold my link bar. I hovered over each button in IE, and everything worked flawlessly. I was so excited, because more often than not if it works in IE it will work in FF. I quickly clicked over to FF and then, what the hell? Nothing worked. The buttons just stared at me tauntingly. This was a crystal clear message. If it works in IE, but not FF it’s often because of faulty coding. I scoured my code, but found nothing. I then moved off to CodingForums.com for some real insight. They quickly helped me see my mistake and things were rolling smoothly again! Embarrasingly enough I was closing my list items too soon.

Now everything was working well, except the bar was vertically stacked instead of horizontally. I argued with my CSS for several minutes before I finally found a configuration that worked. It was extremely frustrating, because none of the techniques I was pulling out of the Google-sphere were working for me. Once i finally whipped the list into submission and had it flowing horizontally; I rested.

The next day I checked and noticed that everything was working everywhere, except IE6. There was no pop-down action what so ever. It was back to the forums. I found this neat little IE work-around which uses .htc files to force IE to accept the :hover pseudo-class. If that sounds like gibberish to you, that’s okay. It is gibberish that means nothing to real people. Just know that it means IE is a pain in my ass. I incorporated the .htc into my code and then it was once again working beautifully.

It was time for the final lap, the finish line was within sight and I would be sprinting by within in seconds. Suddenly somewhere YHWH decided to yell, “FAIL!” Eveything fell apart. I had loaded the RecSports homepage in FF3, IE6, and IE7. I focused on FF3 first. The menu was pushing everything down when it opened, and covered the words with errant background colors. I got rid of the background color, and added up some z-index (more gibberish). Success was mine! Everything was smashing in FF.

On to IE. IE7 actually offered me no issues except some positioning issues due to the z-indexing. Once I worked out the positions and sizing problems everything was flowing smooth. It was at this point that I was willing to award IE some point because of its drastic improvements between IE6 and IE7.

I pulled up IE6 and thar she blows. Everything was positioned perfectly! I excitedly scrolled over the links and saw the appropriate color changes, but then there were no drop downs. My brain went in to panicked mode. What had I changed that made it not work? I twiddled with the code making no progress. I finally decided to just view the menu by itself again. Lo and behold, the drop downs worked. I was perplexed to say the least.

I ran back to CodingForums to ask why in the world it worked in IE6 in some instances, but not all. No one has responded, except a great coder who has been a great help in all of this. They’ve suggested that I add in some JavaScript to counter-act IE6′s assholery (As a sidenote Firefox accepted the word assholery without question. What the heck?) This is where I am now, trying to incorporate the Javascript cleanly. It will work smoothly when I’m done.

The lesson you all should take away from this is, ABANDON INTERNET EXPLORER. Run for the hills and adopt any other Web browser out there! I use Firefox, but that’s because it’s fairly light and simple. Plus it let me have neat add-ins. There’s a link to the right that takes you to the Firefox download page. If you’re interested that is. One last proving point I have to offer is the fact that IE8 has been abandoned by Microsoft in support of Mozilla’s open source browser Firefox. This means that Firefox will come standard with Windows machines, and we won’t have to worry about IE workarounds ever again!

Next time: Grammar, Grammar and more Grammar!

ChetG