www.webdeveloper.com
Results 1 to 4 of 4

Thread: Different Margin-Top in all browser but IE8 / Opera

Hybrid View

  1. #1
    Join Date
    Sep 2008
    Posts
    6

    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:

    Code:
    #kassaInfo{
    
    width:745px;
    height:671px;
    color:#74CCE5;
    position:absolute;
    margin:0px;
    z-index:1000;
    left:50%;
    margin-top:-800px;
    background-image:url(http://www.kassandrafoto.com/images/kassaInfo.png);
    background-repeat:no-repeat;
    
    }
    
    body{
    
    margin:0;
    width:100%;
    height:100%;
    background-color:#fff;
    font-family:Arial, Helvetica, sans-serif;
    background-image:url(http://www.kassandrafoto.com/images/bg.jpg);
    background-repeat:repeat-x;
    overflow:hidden;
    }
    This is the html code, as you can see the div is the first one:

    <body id='body'>

    <div id="kassaInfo">
    <div id="closeKassaBtn"></div>
    </div><!--The rest of the Code-->
    </body>

    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.

    Code:
    var $kassaInfo = document.getElementById('kassaInfo');
    var $kassaMargin = findMargin('kassaInfo');
    TweenMax.to($kassaInfo,1,{css:{alpha:0.6, marginLeft:$kassaMargin},ease:Expo.easeOut});
    And here is the function for the click event:

    Code:
    var $kassaInfo= document.getElementById('kassaInfo');
    TweenMax.to($kassaInfo,1{css{alpha:1, marginTop:220},ease:Expo.easeOut});
    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.

  2. #2
    Join Date
    Feb 2013
    Posts
    1
    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.

  3. #3
    Join Date
    Feb 2013
    Posts
    16
    Why are you using external paths to your files?

    For position: absolute (or relative, or fixed) you do not specify "margin" -- just
    Code:
    h2 { position:absolute; left:100px; top:150px; }
    The position: absolute is "The element is positioned relative to its first positioned (not static) ancestor element." And it is taken out of normal HTML flow so you can layer on tip of other elements. See, for example, http://www.w3schools.com/cssref/pr_class_position.asp or http://css-tricks.com/absolute-posit...e-positioning/

    All I saw on MAC Firefox was black.

  4. #4
    Join Date
    Sep 2008
    Posts
    6

    Thanks

    @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.

    Greetings man.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles