Postion: Issues in Chrome & Safari

HTML & CSS
1

On a site I am tweaking I’m having an issue with the Footer on two browsers only which are Chrome & Safari.

The div#footerInner is causing the issue and is about 20px to high in those browsers compared to all other web browsers.

Any ideas?

Site is http://safoods.togetheragency.co.uk:8080/

#footer{
	background-image:url(images/sa-background-transparent.png);
	background-position:bottom right;
	background-repeat:no-repeat;
	padding-top:292px;
	height:140px;
	/* top:-422px; */
	margin-top:-310px;
	z-index:-2;
}
/* Chrome & Safari */
#footerInner{
	clear:both;
	float:left;
	position:relative;
	top:0px;
	border:0px solid red;
}


#footerInner h2{
	margin:0px;
	padding:0px;
	font-size:14px;
}

#footerInner p{
	font-size:9px;
	margin-bottom:0px;
	padding-bottom:0px;
	padding-top:3px;
	margin-top:0px;
	position:relative;
	z-index:1;
}

#footerInner img{
	z-index:1;
}

#footerInner a{
	color:#8B8078;
}
2

Hi, are you talking about the image in teh footer? That’s out of place in CHrome/FF.
If that’s the case, you are relying on exact pixel measurements to hpoefully line it up. Your best chance right now would be to move the background image on the footer, to the <body> and set the background position to “center bottom” and no-repeat

I don’t see any other 20px difference on the footer anywhere other then the actual image :).