CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
noobprogrammer
noobprogrammer

Reputation: 1154

Different positioning div between FF & Chrome - HTML CSS

I have a footer in my website and it looks good on Chrome:

enter image description here

However, it looks not that good on FF:

enter image description here

Looks like the FF doesn't recognise the z-index property on my css. Here's the code:

footer.html

<div id="footer">
    <img src="layout/footer.png" style="position:absolute; z-index:-1;"></img>

            <div  class="socmed" style="margin-left:20px;">
            <a href="www.facebook.com">
            <img src="layout/fb.png"></img>
            </a>
            </div>

            <div class="socmed">
            <a href="www.facebook.com">
            <img src="layout/tw.png"></img>
            </a>
            </div>

            <div class="socmed">
            <a href="www.facebook.com">
            <img src="layout/yt.png"></img>
            </a>
            </div>

            <div class="clear"></div>

</div>

style.css

#footer {
    margin-top: 30px;
    margin-bottom:-10px;
}

.socmed{
    float:left;
    margin-left:10px;
    padding-top:5px;
}

Is there any solution to this problem so I have code which Chrome & FF would obey the same position? (The FF's positioning will look like Chrome's). Thanks.

Upvotes: 2

Views: 70

Answers (1)

Ming
Ming

Reputation: 4578

Your <img /> that is position:absolute; z-index:-1; should simply be a background-image on the #footer.

#footer {
    margin-top: 30px;
    margin-bottom:-10px;
    background: url('layout/footer.png') no-repeat 0 0; /* this line */
}

Then it will just sit behind your icons without you having to do anything.

Then, to make sure that #footer has height (because floated children get taken out of the document flow, so your div will no longer have height) you could change your .socmed to:

.socmed{
    display: inline-block; /* this line */
    margin-left:10px;
    padding-top:5px;
}

Here's the code I updated from yours, and with an image I grabbed from Google images:

http://jsfiddle.net/9V2KV/

Upvotes: 1

Related Questions