making scrumptious trails IE6-ready

1 Nov

Scrumptious trails *was* working in IE6 last week. This was the basic
interface and it mostly worked thanks to the magic of jQuery.

I did a complete UI overhaul last week – out with the carousel that
was always awkward due to too much customisation – and in with a row
of markers, dropdown ,and lots of work around hovers. This led to
several IE6 bugs that I’ve just fixed:

* transparent PNGs failed. Converted these to transparent GIFs. (IE6
no like the transparent PNG.) Thanks imagemagick.

* “select” element failed. For one thing, I find every time I work on
“select” tags, they are way too annoying and I wish jQuery would have
some nice core functions for dealing with them. There are just too
many ways to do the same thing (set the select’s ‘value’, set the
select’s ;selectedIndex’ set an option’s “selected” attribute). So
anyway, what I did worked in Safari and Firefox, but not in IE. I
fixed two things here. (a) to see what’s selected, use
$(“select”).val() instead of $(selectedOption).

* I came across this ugly IE6 z-index bug –
http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html
which was preventing overlay notes being shown. As soon as I added the
iframe, the overlay note disappeared, even though its z-index was
greater than the iFrame z-index. As explained on QuirksMode, IE6 (and
IE7) has a weirdness with z-indexes and relative-positioned elements;
the z-indexes become relative to their absolute-positioned ancestor
rather than being absolute. I had a “notewrapper” element with some
note things inside it (an expander, the content of the note itself,
and other things. The answer was to apply a high z-index to the
notewrapper element itself. And it was fixed.

I also used the CSS triangle hack ,and that’s not looking good, though
still functional, due to IE6’s (mis-)handling of the “transparent”
background color. Will be fixed.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: