IE 1px off, background position

rrsub · Aug 15, 2005

Is there a workaround/hack for this IE-only quirk?

Basically this is a rollover effect and Win/IE only has the graphic as 1px off from the top (I guess because it doesn't see the border as a pixel count.

Code:

#leftnav a {
	color: #FFF;
	text-decoration: none;
	background: #2F7BCF;
	border-top: 1px solid #FC0;
	border-bottom: 1px solid #000;
	line-height: 17px;
	padding-left: 20px;
	display: block;
}
#leftnav a:hover {
	color: #003366;
	background-image: url(gfx/nav-arrow.gif);
	background-repeat: no-repeat;
	background-position: 136px 4px;
}

rrsub · Aug 15, 2005

OK, so I think I have it

Code:

#leftnav a:hover {
    color: #003366;
    background-image: url(gfx/nav-arrow.gif);
    background-repeat: no-repeat;
    background-position: 136px 4px;
    _background-position: 136px 5px; /* Win IE Only */
}

I guess IE ignores the underscore?

Vragabond · Aug 15, 2005

Is your IE in standards mode and using the correct box model?

rrsub · Aug 15, 2005

Using XHTML Transitional

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html>
<head xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">

I assume from other sources that this should fix it but it doesn't.
I should add that this page in question has missing 'alt' for images.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

IE 1px off, background position

rrsub

MIS

rrsub

MIS

Vragabond

Programmer

rrsub

MIS

Similar threads

Part and Inventory Search

Sponsor