CODEWITHSUNDEEP
htmlcss
abk92
abk92

Reputation: 1

Footer gets cut off?

I'm having some issues with parts of the footer on my website getting cut of on different browsers.

On my website here http://reportalert.info/index-test.php, the twitter, rss and share icons get cut off and move around slightly when on different browsers. I've tried changing the background position and padding of each of the icons but I can't seem to get it to work across different browsers. Any suggestions on how to fix this?

Here is the code that I have for the footer: 

#footer 
{
    clear: both;
    font-family: "Droid Serif";
    margin:10px 0;
    padding-bottom:60px;
    width:100%;
    height:10px;
    text-align:left;
    font-size:80%;
    color:#444;
}
a.ftwitter
{
    background:url(http://reportalert.info/images/nra/ra-share.png/images/nra/ra-twitter.png) left no-repeat;
    background-position:0 -22.5px;
    padding:3px 55px;
}
a.ftwitter:hover
{
    background-position:0 0;
    padding:4px 55px;
}
a.frssfeed
{
    background:url(http://reportalert.info/images/nra/ra-share.png/images/nra/ra-feed.png) left no-repeat;
    background-position:0 -26.5px;
    padding:5px 55px;
}
a.frssfeed:hover
{
    background-position:0 0;
    padding:6px 55px;
}    
a.fshare
{
    background:url(http://reportalert.info/images/nra/ra-share.png) left no-repeat;
    background-position:0 -22.5px;
    padding:3px 60px;
}
a.fshare:hover
{
    background-position:0 0;
    padding:4px 60px;
}

Thanks in advance for your help

Upvotes: 0

Views: 3025

Answers (4)

Naele
Naele

Reputation: 530

Padding works differently in every browser, that's why your icons gets cut off in Chrome.

I would use a specific width and height instead.

Upvotes: 3

Niels Keurentjes
Niels Keurentjes

Reputation: 41958

The icons that get cut off are all empty a elements. Because it's an inline flow element, that means it collapses to default text height - 20 pixels in the font you use, while the Twitter icon is 22, hence causing 2 pixels to be cut off.

Set the anchors to display:inline-block, or another block layout style fitting in your layout, and the correct height which is then allowed, and it's solved.

Upvotes: 0

Anthony Weber
Anthony Weber

Reputation: 372

Instead of padding, try using width and height. And add a display: inline-block. Here for example:

a.ftwitter 
{
    display: inline-block; 
    background:url(http://reportalert.info/images/nra/ra-share.png/images/nra/ra-twitter.png) left no-repeat;
    background-position:0 -22.5px;
    width: 110px;
    height: 22px;
}

Upvotes: 1

cnut
cnut

Reputation: 17

I think this might help. Apply this to your icons:

position:relative;
z-index:99;

Upvotes: 0

Related Questions