View Full Version : Why does IE scramble my background image?

Dec 8th, 2006, 08:49 PM
For the navigational bar on the page I am working on, I used CSS to put an icon as a background image next to each link. However, in IE, this image is bizarrely cut in half and put back together backwards

Here is how the navbar looks (http://www.tmiva.net/temp/) in both IE and Firefox

Here is the CSS for the icons:
#header a {
text-decoration: none;
font-size: 10pt;
margin-left: 10px;
padding-left: 20px;
padding-top: 7px;
position: relative;
top: 10px;
right: 5px;
letter-spacing: 1px;
background-repeat: no-repeat;
background-position: 0px -21px;

#header a:hover {
border-top: solid 2px #003971;
background-position: 0px 3px;

#header #selected a {
border-top: solid 2px #003971;
color: #003971;
background-position: 0px 3px;

#header #home {
background-image: url("../images/icons/home.gif");
#header #services {
background-image: url("../images/icons/services.gif");


I use PHP to wrap each <a> tag in <span id=selected></span> if it is the currently selected page.

I've tried using background-position: center left; instead of background-position: 0px -21px; but it didn't seem to make a difference to IE. I would extremely grateful if anyone could offer me help on this!

Dec 9th, 2006, 12:35 AM
I'm on a Mac so I can't test very quickly in IE but it looks like it's just not being positioned right and is repeating, rather than being "cut-up." What's your HTML look like?

Dec 10th, 2006, 12:58 AM
Taking out the position: relative; seems to fix the problem with IE. Why the position wold cause IE to miss render images -- well, who can tell why IE does anything? It does seem to still be a bit odd on Safari though.