Log in

View Full Version : HELP: IE's CSS Bugs Are Eating My Brain



ETpro
04-27-2011, 03:00 AM
I'm trying to get an accordion menu script to behave. It's the http://www.dynamicdrive.com/dynamici...ordionmenu.htm menu. I have used if before, on http://www.borderstogo.com/ and it behaves just fine in IE as well as real browsers. Here it is in IE.

http://lib.store.yahoo.net/lib/greatgolf/borderstogo-ie.gif

I have stared and stared at the CSS, and as far as I can see, all the controlling styles are the same on the test page as they are on BordersToGo.com above. But on http://www.greatgolfdeals.com/test-features.html it looks just as it should in Firefox and Chrome. However, In buggy IE the little + and - boxes that control the accordion effect seem to be inheriting the padding of the text to their right. This even though they are position: absolute. Below is the menu on the left in Chrome and to the right IE.

http://lib.store.yahoo.net/lib/greatgolf/greatgolf-chrome.gif http://lib.store.yahoo.net/lib/greatgolf/greatgolf-ie.gif

Can anybody see what's different in the HTML or CSS that's making this not work.Is it the DTD? BordersToGo is uses HTMLL 1.0 strict. while GreatGolfDealsuses HTML 4.01 transitional. Please note, becaause these are both Yahoo Stores of different vintage, it is not possible for me to simply change the DTD. I'm stuck with finding a way to make what I've got work..

ETpro
05-06-2011, 02:51 AM
VICTORY! It was Yahoo! JavaScript being above the HEAD tags. That threw all versions of IE into quirks mode. In quirks mode, emulating IE 5.5 with all its proprietary weirdness, IE "thinks" elements should inherit the styles of elements above them in the document flow whether they are in a position to inherit or not. And so the little + image, even though it was absolute positioned, was inheriting the 24 pixels of left padding in the containing A tag. Simply adding the zoomfix cured it, forcing the IMG tag to be treated by IE as hasLayout. I gave the image a zoom: 1; in the CSS, which means nothing in any real browser as of today, but tells IE to take that element out of quirks mode and put it where the heck the CSS says it goes.

Sheesh. Trapped between Microsoft and Yahoo! with both giants both insisting on ignoring standards and letting us poor mushrooms adapt -- no wonder my brain was melting.