I'm using a jQuery code to set a div in a calculated position using margin-top (and not top) which works perfectly in all browsers except IE8. (it does work in IE6 and IE7).
I narrowed down the problem to the fact that, if I set a top-margin using jQuery, it won't update on IE8, the margin remains as set by the CSS. I have seen on some forums that it is a common IE8 problem and I have found some workarounds for it but I have discovered something that made me wonder if it is really a bug or not ?! I reduced all the code to the following and still not working :
Here is the body of the HTML :
<body>
<div class="menu_header"></div>
<div class="main_content"></div>
</body>
Here is the CSS code :
.menu_header
{
position:relative;
background-color:red;
margin-left:auto;
margin-right:auto;
width:950px;
height:50px;
}
.main_content
{
position:relative;
margin-top:0px;
width:950px;
height:500px;
background-color:black;
margin-left:auto;
margin-right:auto;
}
And finally here is the jQuery code.
$(document).ready(function(){
$(".main_content").css("margin-top","100px");
})
Well, if you try the previous codes in IE8 you will have the first div (.menu_header) positioned correctly BUT the second div (.main_content) will not have any margins. I thought that the jQuery wasn't updating the HTML/CSS at all and that the original value of 0px is still taking effect so I checked using the developer tools in IE8 and I found out that the CSS code has been updated (inline CSS) but still the top-margin doesn't show.
Well as I said, I found out on the internet that it was a known IE8 bug that happened for various reasons (such as margin collapsing with a div set to float and other explanations depending on the CSS "content") but I had originally a part of the jQuery code that made me wonder what this bug is really about because none of the explanations could fit with this ?!
What I had in the original jQuery code is few more lines that I have reduced to the following for clarity purposes :
$(document).ready(function(){
$(".main_content").css("margin-top","100px");
$(window).resize(function(){$(".main_content").css("margin-top","100px");})
})
Well, in this code, as you might have noticed, there is an additional line (3rd line) that sets the margin-top when the user resizes the browser and MAGICALLY, when a user does resize the browser, the margin-top updates and displays correctly but still not working when the document gets ready (2nd line)!
I continued playing around (yes, at this point it became a game because Microsoft can't be serious doing that !) and I have noticed that in the HTML code, if I add <p>some text</p> or <span>some text</span> or whatever element with a content, after the div, the problem doesn't occur and the margin updates correctly.
So, basically, I'm not looking for workarounds as I have two which are to add a div with a content and set its height to 0 and overflown:hidden so it doesn't alter the website design or by adding <p> </p> after the div.
I just hope that someone can explain to me why updating the margin doesn't work when the document is ready while it does on resize() and why adding some HTML after the div solves the problem and are there any other solutions that might be even simpler that the one I have ?
It's just one of those IE things.
IE ignores the margin-top, you have to apply margin-bottom to the preceeding element or use padding.
If you still searching why, I'd try adding some height to .main_content, floating and clearing it, etc...