Unable to set marginTop style with script using IE8, but works in grown-up people browsers

Question

I'm attempting to animate the slide-out of a menu with script. To do this, I need to animate the marginTop property of an element and increment it from -30px to 0px.

However, in IE8, the animation simply does nothing. I've traced this down to the fact that setting marginTop in script seems to have no effect. In Chrome and Firefox, this works fine.

Here's an example that will work with Chrome/Firefox, but not IE:

http://jsfiddle.net/rm58T/2/

Is this an IE bug, and if so, are there any workarounds for this behavior? Thanks!

Update:

Here's some screen shots of the bug.

In Chrome, my Fiddle looks like this (You can see the "Name of new menu" text, since we changed the margin with script)

In IE8/Vista, it looks like this. I can confirm in Developer Tools that topMargin is actually 0px as expected, however the elements were not re-drawn:

Another Update:

This bug repros (at least for me) on IE8 running on Windows 7, and also IE8 running on Windows 2008 Server. It does NOT repro for me on IE7 running on WinXP. I do not have any IE9 machines to test it.

Yet Another Update:

I found one potential work-around. If I set p.newmenu to position: absolute; instead of position: relative; then it works. However, in my case I'm hosting this entire thing in a popup menu and need this control to push out the bottom of the modal dialog, so absolutely positioning it is not an option. However, perhaps this knowledge can help in finding a workable solution. An example of this work around can be found here.

Would You Believe Another Update?:

I did find a workaround for now. If I use top: -30px; instead of a negative top margin, then everything works. top behaves a bit differently than a margin, though, and makes the UI not look quite as nice. In particular, when you use top: -30px, then you'll have 30px of whitespace under your element since relative positioning doesn't affect other page flow.

I'd greatly like to figure out why I can't use a negative top margin on IE like I can with other browsers, so I'm still hoping someone can provide an answer that will provide all the benefits of a negative top margin but also work with IE8.

Answer 1

The trigger for this behaviour is how IE8 handles the fieldset element.

You can work around it by setting the display for fieldset to inline (or inline-block).

div.modal.addmenu fieldset {
   display: inline;   
}

Answer 2

This isn't exactly a bug; it is just based on the fact that (to keep up in performance comparisons) IE was built since version 5.5 with a minimized preset of static definitions;

That means: Instead of spending any Element the whole and correct definition (depending on which god of specifications you hail out for ...) for the type it is, IE is using less.

---

TODO: Give back what should be credited for acting as a top-model paragraph relatively positioned; DISPLAY it accordingly to its talents; any super-paragraph should do the catwalk inline, even if it is a block-head, you might try using sugar and whiplashes to remember your nasty P of its origin as a inline-block. It's a frenzy P, give some respect to its talents…

---

DOJO: In fact, you as a rune-reading script-javalchemist be the one who has to have to take control over the brew the browser serves. Or it makes boom, silently ...

---

GODO: Necessary things to do if you want to use negative-margins in browsers which don't play legally:

• remember the elements you want to use of their display's origin; don't believe in browser-vendors that they would have done that already for you

• • IF you are just out for IE 7+ use display:inline-block;
• • IF you want to get negative-margins to effect on all notable browsers, but can forget about NS4, then use display:inline; or display:block;

• Do not forget to build the foundation for your negative-margins: set position:relative;

---

MOJO: If IE-Betas and older ones like 5.5 or 6 are in your point of interest, you have to ensure that your relative-positioned negative-margin paragraph has values for width and height; Depending on what you are trying to achieve, sometimes a height:auto; helps out.