Internet Explorer 7 dynamically loaded CSS and the Infragistics Web Menu

Now, that title doesn't much, but it's the only one I could think of, because I haven't yet determined the source of the problem. Baiscally, what happends is that there is a difference of behaviour between style included directly into the page and actually using javascript to add to the head of the page a dynamically created link element.

I have no idea what exactly is going on, but I will try to explain it based on the evidence. There was this menu control, an Infragistics Web Menu from the NetAdvantage 9.1 suite, that, given the right styling, would look exactly like what I wanted. After setting that style in a css file I decided to load it using a javascript dynamic load just in case the control would be rendered only on asynchronous postbacks. And it worked perfectly. In IE8, Chrome and FireFox. However, when tried on IE7, it exibited the strange behaviour that, on mouse over, the entire table that the menu was rendered as expanded to fill the screen and was completely blank. After extensive attempts to capture the element with Internet Developer toolbar I noticed that the border-bottom-width and border-left-with were abnormally high, like thousands of pixels.

As of now I know not the cause of this. I can tell you, though, that moving the same style from the dynamically loaded CSS into a statically loaded one or by copying that style in a style tag in the page fixed the issue. I really hope it helps someone lose less days of their lives attempting to see what is going on.

Also, if you know the cause of this, or maybe other pages reporting the same behaviour or, I dare hope, a fix, please let me know.