Different Margin-Top in all browser but IE8 / Opera
I was having this problem with margin-top in all browsers but IE/OPera, I set a div's margin-top on -800px and if I trace the div position in IE is -800px as the same is in Opera, but in FF/Chrome it adds 300px, so it says that the Div is at -1100px in the margin-top.
I've seen that the best practice is use padding instead of margins, but I'm pretty new on the whole concept. By now I can't see from where comes this 300 extra px. I actually put this div at the beginnig of my html and in the end of the html, right below of the opening body tag (As it is right now) and right at the botton just above the closing body tag, both with the same result of extra pixels.
You can see the problem here: http://www.kassandrafoto.com/ if you click on Kassandra Cruz at the main menu at the top you will see the extra margin or the 300 px gap, I want the design as in FireFox or Chrome, but in this case is weird that IE is working as I want to do it: margin-top is -800 and not -1100 (The animation is right because I play with this difference, but my problem here is ¿where those 300 px come from?.
This is the CSS of the div in question:
This is the html code, as you can see the div is the first one:
font-family:Arial, Helvetica, sans-serif;
</div><!--The rest of the Code-->
Here comes the first Js actions with it, this only centers the div base on rest the half of its witdh (This works fine) so since its 50% leftted is going to be always at the center. PS. I used Greensock TweenMax JS library but is just a tween movement of margin.
And here is the function for the click event:
var $kassaInfo = document.getElementById('kassaInfo');
var $kassaMargin = findMargin('kassaInfo');
Well here comes the thing, as you can see the div is outside from anyone and is absolute, I don't know why the extra space in FF/Chrome.
var $kassaInfo= document.getElementById('kassaInfo');
Thanks for any help or hint that can help me out. Greetings.