Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Why does IE scramble my background image?

    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 in both IE and Firefox

    Here is the CSS for the icons:
    Code:
    #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");
    }
    
    etc...
    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!

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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?

  • #3
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •