Well, this is surely a most annoying bug I’ve encountered with IE.
First thing to note is that the problem only occurs when the site is deployed on remote server (?!??), and I simply can’t wrap my head around it.
This is the screenshot of what happens:
When testing locally, on Cassini or local IIS (even with Fiddler limiting speed on localhost to simulate network latency) there is no problem in IE.
The menu has a 1px white line effect at the bottom. When in IE 7, there is a 1px of empty space added magically on the top of elements of the menu (they are blocks inside list item elements which are of course in list)
You can see that the element is lowered by 1px from the top. I can fix this IE7 issue by adding -1px negative top margin (isn’t really a solution if everything works locally, right?).
In IE6, there is also 1px added to the bottom as well on the top (this bottom white line is added to the main menu div (again, only on remote server?!)
The last thing is the problem with the menu out of place in IE6 …
Again, none of these problems occur on the remote test server (shared hosting)…
EDIT1:
I’ve managed to fix some of the problems with IE only fixes, but those fixes work on live server, while breaking the site in local IE testing …
I’ve added negative -1px margin for IE7, and width 1% for li elements of the menu (fixed the IE6 menu jumping out problem), but this problem makes no sense to me … :/
SOLUTION:
Because it is an asp menu control with css friendly adapters, the publish mechanism of VS created app_browsers.dll in the bin which must be deleted manually :/
That is why the local and remote were different, when I checked with the firebug I saw the markup was completely different (should have done this a sooner, obviously you can’t rely on anything 🙂 )…