CODEWITHSUNDEEP
htmlcss
Yawr Mailk
Yawr Mailk

Reputation: 9

Firefox showing strange behaviour in css margin padding not working

So i have alignment problem in mozilla Firefox only.All other browser showing good results.Actually the problem remains that loadingImage(bunny) is not showing any effect on maring-bottom parameter in firefox.

 html, body {

       margin:0; padding:0;
       background-color: #000000;
}

#myCanvas {
    background-color: black;
    position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;

margin: auto;
}
#loadingImage{
        color:#90B3DF;
        position: absolute;    
        padding-left: 00px;
        margin: auto;
        top:0;
        bottom: 220px;
        left: 0;
        right: 0;
        margin: auto;

    }

While the html code is 

        <span  id="sp1" style="width: 0%"></span>
        <div>
         <img src="images/loading.gif" alt="Smiley face" id="loadingImage" height="166" width="135">
        <h1 id="bolo">LOADING</h1>

        </div>


</div>

All the browsers are placing the bunny image above the loading bar but mozilla is showing exception ,an image like this probably

https://i.sstatic.net/Ufngd.png

Upvotes: 0

Views: 2162

Answers (1)

Devin
Devin

Reputation: 737

For your case, you would only want to set either the top or bottom of your absolutely positioned element. In this case that would be #loadingImage.

You have both top, and bottom set. If you're trying to get it to be positioned 220px from the top of what the #loadingImage position is relative to, use top. Otherwise use bottom, and remove top. From MDN:

  • "If both top and bottom are specified (technically, not auto), top wins."
  • "If both left and right are specified, left wins when direction is ltr (English, horizontal Japanese, etc.) and right wins when direction is rtl (Persian, Arabic, Hebrew, etc.)."

This is not to say you can not use top and bottom at the same time (or even left and right for that matter). But you would only do that specifically for when you want to fill the space between the two positions you are setting.

read here: https://developer.mozilla.org/en-US/docs/Web/CSS/position

Also other general tips:

  • Inline styling is generally a bad idea. I would recommend handling presentation inside a css file altogether. Makes your project more maintainable over time.

  • padding: 0px is all thats necessary, don't have to use 00px

  • Try to keep your HTML and CSS markup neatly spaced. This also goes back to having a more maintainable project over time. Example:

This is easier to read:

#myCanvas {
    background-color: black;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Than:

#myCanvas {
    background-color: black;
    position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;

margin: auto;
}

Upvotes: 1

Related Questions