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 html code, as you can see the div is the first one:
</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.
var $kassaInfo = document.getElementById('kassaInfo');
var $kassaMargin = findMargin('kassaInfo');
And here is the function for the click event:
var $kassaInfo= document.getElementById('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.
Thanks for any help or hint that can help me out. Greetings.
I'm having a hard time understanding why you're using a negative value on a margin. A margin should represent a gap between an element and it's peers. Once you get to 0 there is no margin left.
My suggestion is to rebuild your code in such a way that you don't rely on setting negative values for padding or margin. If a parent elements padding is 0 then the child element will be at position 0 relative to where the parent is. And if you need the child element at a position less than zero then you should use the CSS position rule. Set the position of the parent element to relative and the child element at a negative value, seeing as negative values are appropriate in positioning and not padding or margin.
@webdoer thanks man, yep, I didn't know this different. In absolute there is no margin, its more like just top,left. I've change that in the css and the js (top instead of margin-top) an all works like a charmed.