Image Positioning Issues (Safari vs IE and Firefox)

[cyesuwan]

Hi,

I've been having an image positioning problem and I'm not sure what the cause for it can be... apologies in advance if this topic is a repeat of an earlier one (If so, can someone link me to that topic?)

I'm placing three image buttons in the footer of a panel, and everything looks fine in Safari: http://www.charlesyesuwan.com/Babble/Safari.jpg

But in IE and Firefox the images appear like this: http://www.charlesyesuwan.com/Babble/FF_and_IE.jpg

The buttons appear 15px below where they should be, which of course could be solved by a {top:-15px}, but then Safari would render them weirdly.

Any insight into this? I'm so confused as to what could be the problem. Thanks so much in advance!

Here's the CSS code for the footer div and the images in it:

#mostpopular300 div.footer {
position: relative;
width: 297px;
height: 20px;
background: url('/global/panels/panelcontent/rankedarchivepanel/Width300/Images/mostpopular300footer.gif');
background-repeat:no-repeat;
padding: 2px 0 3px 3px;
}

#mostpopular300 div.footer img{
display:inline;
position:relative;
float:left;
top:0;
margin:0;
padding:0;
}

And here's the CSS for the pagination module that appears to the right of the images, for reference:

#Pagination {
display:inline;
float:right;
padding-right:5px;
font-family:Arial, Helvetica, sans-serif;
text-align:right;
}

#Pagination p {
position: relative;
display:inline;
font-size:12px;
}

#Pagination ul.pagination {
position: relative;
right: 0px;
list-style: none;
text-indent: none;
float:right;
display:inline;
}

#Pagination ul.pagination li {
display: inline;
float: left;
margin: 0 3px 0 0;
text-align: center;
}

#Pagination ul.pagination li a {
display: block;
height:15px;
width: 15px;
background-color: #eeeeee;
color: black;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
line-height: 12px;
}

[koyama]

I'm afraid that we will need a link to the actual page so we can inspect for ourselves.