Thursday, September 2, 2010

Drupal Zen theme IE fixes

IE7
When using a background image as a bullet for a custom bullet list, IE7 was showing the default bullet AND the background image. Solution:
On ul:
list-style-image:none;
list-style-position:outside;
list-style-type:none;
and on li:
list-style-image:none;/*Benefit IE7 else double bullet*/
list-style-position:outside;/*Benefit IE7 else double bullet*/
list-style-type:none;/*Benefit IE7 else double bullet*/

this made the default bullet go away.

Background image bullet 'centering' vertically, a bit off on IE when text size is set to 'larger'.
....

floated block links like for navbar etc, if they show up in IE6 as stretching to the full width.
/*Fixes from above as suggested for .primary and .secondary used here for .nicemenus*/
ul.nice-menu-down li a
{
_display: inline; /* Otherwise the blocks mistakenly get 100% width in IE5 */
_di\splay: inline-block; /* Otherwise the blocks mistakenly get 100% width in IE6 */
}

ul.nice-menu-down
{
_width: 100%; /* Otherwise IE5 treats the ul as floated */
_w\idth: auto; /* Reset to auto width for IE6 */
}


possible bugs
weird, ie6, 7, 8 all display the same...
As you can see, div.floatleft should have a bottom margin of 10px but it doesn't appear in any of the IE versions. It only happens to left-floated items, and the margin is correctly applied to right-floated items in the "clearfixed" container. There are work-arounds like using padding instead of margins but this is a bug and I was disappointed that it didn't get fixed in IE8.

this seems to be happening to me, using padding on the bottom altered layout across IEs which seemed to be ignoring the margin., except im using 1.0 strict doctype... all validates fine.
a- doctype isnt written correctly
b- IE8 is in quirks mode or emulating IE7


test with padding that will show it up. also might mean the doctype is not correctly written.



Which makes me wonder if your site isn't listed in the blacklist MSFT keeps of sites that get IE7 mode forced onto them, and hence IE8 will continue to act up like IE7 does till you manage to get out of that list.
IE8 shows that list on this pseudo URL: res://iecompat.dll/iecompatdata.xml
Or if you managed to turn on the "display all sites in compatibility mode switch".

Brings us to establishing you do to have IE8 in that dreaded compatibility mode.