IE 6 Reluctant friend and frequent foe – Part III

by Jessica Hammer

Part III – How to hunt down and patch up ie6 bugs

You are coding out a web page, you fit the styles, arrange your divs, align your margins, and check it on your browser, just to be sure that it’s correct.
It’s not.
There’s a huge hole in your layout, and you have no idea why! What do you do?
Well, you could read Part 1 of this series, and feel some solidarity with others (including me) who share your dilemma. Or you could read part 2, and employ some of the ie hacks I suggest, add an ie specific stylesheet, or try some different CSS tricks. But when none of that works, and you just cannot find the source of the ghost, you will need some serious tools.

As I have mentioned before, we test on many browsers at MoreVisibility, so our machines host a range of browsers ad web developer tools. Web developer tools are available for most browsers and are indispensable when troubleshooting layout. There is absolutely no way I would be sane, or even still working today, without my trusty Firefox and ie add-ons.

Firefox Add-ons
Firebug: https://addons.mozilla.org/en-US/firefox/addon/1843
This fantastic little tool was introduced to me by a colleague, who convinced me to ditch my old trial-and-error ways. With one click inside Firefox, a dialog box pops up within the window, showing the HTML and CSS side by side. You can mouse over an element to bring up its code, and what’s more, CSS styles are shown in hierarchical order, giving you a view of which styles are at the top of the inheritance pile. A great asset when you can’t figure out where that underline is coming from!

Mozilla Web Developer Toolbar: http://chrispederick.com/work/web-developer/
This toolbar isn’t as universally useful as Firebug, but it does pack a host of valuable tools. You can check the actual (not stated) size of an element, use the ruler and generate a great image report with a list of images, their sizes and urls.

Internet Explorer Add-on
There is only 1 proprietary application for ie in this category, and it works for all versions of ie http://www.microsoft.com/downloads/

It combines some of the tools available from both Firefox add-ons. You can view the html, but the CSS panel is often code-bloated or unspecific. There is a ruler, an outline feature, and some image options.

Ie Web Developer is essential in troubleshooting the browser, but even with its aid, you may still need to use your wiles and common sense. Happy Hunting!

IE 6 Reluctant friend and frequent foe – Part II

by Jessica Hammer

Part 2 – A few tips on improving your relationship with ie and its bugs

In part 1 of this series IE 6 Reluctant friend and frequent foe – Part I, I did rant just a bit about the myriad of downsides to Internet Explorer 6 and how much this frustrates me on a daily basis. I am often tempted to pin the logo to a dartboard and let rip! However, from the hours of trouble shooting, re-coding and incoherent, angered mumbling, a few small gems of knowledge have emerged, that help me cope.

Since it looks like we will have to live with ie6 for a while, let’s cozy up and make friends. Here are some things that make ie6 happy.

1. Fix ie Stylesheet
   For larger sites and many bugs, using an ie6 specific stylesheet helps you troubleshoot for ie6 alone.
   All you need to do is add the following code underneath the link to your regular stylesheet
   
   The code in fix-ie.css will only appear in ie6 (or as the code says; less than ie7) and over-ride any identical code in the regular stylesheet.

2. The miraculous double-margin manifestation
   It is a well observed phenomenon that if you have a floating div with a margin, ie will take that margin and double it! Now that’s generosity! But if you meant what you coded, then all you need to do is add
   { display:inline; }
   to the floated div and you are back on track.

3. More Padding and Margin drama
   While I haven’t got a full list of all the phantom margin additions in ie, I do know that it doles them out quite liberally. My advice: if you are having any margin, padding, or placement issues, set all paddings and margins explicitly. Do not leave any of it up to the browser’s defaults. If you want padding only, then set {margin:0;} just to be sure!
   I have observed that ie6 adds a lot of default padding to elements like

   and

   and

   tags, so be sure to state all padding and margins on these elements.

Hopefully this may help clear the ie fog, or at least assist you in extending an olive branch to ie6. If not, then all we can do is wait and cross-check. In my next post, I will share all our MoreVis browser cross-check and testing secrets. Hint: it involves a lot of desk hopping!!