By gav240z on

Hi Everyone,
I recently built my first Drupal (5.x) site, I'm very proud of it but am a bit frustrated at the moment with IE6 (What developer / designer - hasn't been?) Anyway I have my site up live so I'm hoping you can help.

The site is http://www.vintagejdm.com/

I went on a bit of a mission on my weekend trying to get IE6 installed with Windows Vista (came with the laptop - no choice unfortunately). Anyway after much frustration I got VMWare running with IE6 and Windows XP (can't install service pack2 though yet - ahhh the joy - just for IE6).

Anyway I have 4 major problems present in IE6 only.

1.) My icons are PNG 24-bit alpha transparent - will convert these to IE6 friendly png-8bit no big deal (just a pain).

2.) My rollover menu (primary nav) works fine in all browsers, but IE6 goes silly with background positioning. If you click on the any link - away from the homepage, you will see what i mean. It doesn't properly position the background element. Its CSS Sprite driven. (1 image - 3 states) See: http://www.vintagejdm.com/sites/all/themes/zen/vintagejdm/img/menu.png

3.) My 3 columns wrap in IE6, I thought the box model was a IE5.5 issue? I am using XHTML strict doctype to avoid the box model but it appears that IE6 can't fit all the columns in?

4.) I'm using the Nice Menu's module for Drop Downs, works fine in all browsers except, you guessed it IE6. Its even worse in IE5.5 but at this stage I'm willing to write that browser off since such a low percentage of users are using it now.

I'm thinking of using IE6 conditional comments, but will avoid it if possible.

Finally my theme is a ZEN subtheme.

Any help - really appreciated.

⋅ Categories: Drupal 5.x

Comments

ddorian’s picture

ddorian commented

for the first issue:
http://nettuts.com/html-css-techniques/evening-tip-force-ie6-to-display-...
it also fixes some other problems!

gav240z’s picture

gav240z commented

Thanks for the link, but I'm trying to avoid JS fixes for PNG. I'll use IE conditional comments and non-transparent gif's I think for now. Until IE6 disappears anyway.

Its the other problems that are giving me the most grief.

Jeff Burnz’s picture

Jeff Burnz commented

1) Use the fireworks png 8 or gif formats, you can use the alpha image loader in IE6, but 32 bit transparent png's become very difficult to position correctly (e.g you can't use background position, amongst other thorny issues) if you do so.

2 & 3) Bit tricky to diagnose because you are aggregating the CSS...

4) My guess is the JavaScript for Nice menus is not loading for IE6 (its needed to make CSS drop menus work in IE6).

Why avoid using conditional statements? That is precisely what they are for - i.e to build transcendent CSS sites rather than relying on hacks and work-arounds.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
gav240z’s picture

gav240z commented

Thanks for the reply, using an IE6 conditional comment I have set my content div to be about 10px smaller in IE and all the columns fit nicely. I just thought it was strange because I was sure the box model would be fine if I specify a strict doctype in IE6.

Yes I will use Fireworks PNG 8 bit format for the icons on the site. I just downloaded the png's from a free GPL source. Problem is they were 32bit. I should have used these :) http://www.lullabot.com/articles/free_gpl_icons_lullacons_pack_1

Yeah I'm guessing the Javascript isn't working for IE6 also but its difficult to diagnose. Anyone know where the best place to get help with Nice Menu's Module is?

Cheers,
Gavin.

Jeff Burnz’s picture

Jeff Burnz commented

The Nice menus issue queue is your first stop, submit a support request.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
gav240z’s picture

gav240z commented

Well I fixed #2.

Always remember (and I can't believe I forgot) to set links with LVHA
http://usefulwebsites.blogspot.com/2006/02/love-hate-lvha.html

1. a:link
2. a:visited
3. a:hover
4. a:active

#3 Was fixed using an IE6 Conditional comment, I had to set my page width to 10pixel less than other browsers including IE7. I still don't know why, perhaps IE6 will only render the box model correctly with a transitional doctype and not a strict doctype? It is a bit odd though.

#4 I still need help with the Nice Menu's module. How can I check that the Javascript for the Nice Menu's module and IE6 is being output in my template? A quick look at my HTML source looks like there is nothing in relation to this. So any help would be really appreciated.

Thanks to everyone who replied so far.