CSS - Background-position Not Working In Ie6!

I'm currently using the tutorial located at Use Sprites to Create an Awesomeness-Filled Navigation Menu

Based on that I've created a sprite image that is 960x88.

I've got my menu in place, but the background-position completely fails. While I can change the width of each item, revealing more or less of the image it still only shows the first part of the image, repeating "Home". See attached screenshot for example of what it's doing.

Here is my HTML and CSS:

html Code:
Original - html Code <nav> <ul id="main_nav"> <li><a href="#" class="home"></a></li> <li><a href="#" class="case_studies"></a></li> <li><a href="#" class="solutions"></a></li> <li><a href="#" class="free_quotes"></a></li> <li><a href="#" class="government"></a></li> <li><a href="#" class="recycle"></a></li> <li><a href="#" class="resources"></a></li> <li><a href="#" class="about_us"></a></li> <li><a href="#" class="contact_us"></a></li> <li><a href="#" class="login"></a></li> </ul> </nav>

  
  <nav>
    <ul id="main_nav">
      <li><a href="#" class="home"></a></li>
      <li><a href="#" class="case_studies"></a></li>
      <li><a href="#" class="solutions"></a></li>
      <li><a href="#" class="free_quotes"></a></li>
      <li><a href="#" class="government"></a></li>
      <li><a href="#" class="recycle"></a></li>
      <li><a href="#" class="resources"></a></li>
      <li><a href="#" class="about_us"></a></li>
      <li><a href="#" class="contact_us"></a></li>
      <li><a href="#" class="login"></a></li>
    </ul>
  </nav>

css Code:
Original - css Code #main_nav { height: 40px; } #main_nav li { float: left; } #main_nav li a { background:url(../images/main_nav_sprite.png); display: block; height: 40px; } .home { background-position: 0px 0px; width: 60px; height: 40px; } .case_studies { background-position: -60px 0px; width:120px; height:40px } .solutions { background-position: -180px 0px; width:100px; height:40px } .free_quotes { background-position: -280px 0px; width:100px; height:40px } .government { background-position: -380px 0px; width:120px; height:40px } .recycle { background-position: -455px 0px; width:75px; height:40px } .resources { background-position: -555px 0px; width:100px; height:40px } .about_us { background-position: -642px 0px; width:87px; height:40px } .contact_us { background-position: -748px 0px; width:106px; height:40px } .login { background-position: -822px 0px; width:74px; height:40px }

  

  


 #main_nav {


     height: 40px;


 }


 #main_nav li {


     float: left;


 }


 #main_nav li a {


     background:url(../images/main_nav_sprite.png);


     display: block;


     height: 40px;


 }


 .home {


     background-position: 0px 0px;


     width: 60px;


     height: 40px;


 }


 .case_studies {


     background-position: -60px 0px;


     width:120px;


     height:40px


 }


 .solutions {


     background-position: -180px 0px;


     width:100px;


     height:40px


 }


 .free_quotes {


     background-position: -280px 0px;


     width:100px;


     height:40px


 }


 .government {


     background-position: -380px 0px;


     width:120px;


     height:40px


 }


 .recycle {


     background-position: -455px 0px;


     width:75px;


     height:40px


 }


 .resources {


     background-position: -555px 0px;


     width:100px;


     height:40px


 }


 .about_us {


     background-position: -642px 0px;


     width:87px;


     height:40px


 }


 .contact_us {


     background-position: -748px 0px;


     width:106px;


     height:40px


 }


 .login {


     background-position: -822px 0px;


     width:74px;


     height:40px


 } 

hey, i have this code below at the top of my page...the image that is there a a background image i would like to more to the right a bit so that some of the orange background is shown on the left!! can anyone advise how i do this please?? thanks

Code:

#TitleBar {
	margin:0px 0px 10px 0px;
	padding:28px 0px 5px 10px;
	padding-left:10px;
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height:33px; /* 14px + 17px + 2px = 33px */
	border-style:solid;
	border-color: #ffffff;
	border-bottom: 1px #ff9900 solid;
	border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
	line-height:11px;
	background-color:#ff9900;
	background-image:url(../images/webmedia72.gif);
	background-position: left;
	background-repeat: no-repeat;

/* This is a fix for IE% */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:14px; /* the correct height */
	}
/* "be nice to Opera 5" */
body>#TitleBar {height:14px;}

thanks
RF

Hi,
I have to get background position of image from a css class in a javascript function.
[CODE]
abc.button { width: 47px; background-image: url(../bt/save.gif); background-position: 0 -123px; }
[CODE]
I am able to get it in IE using backgroundPositionX and backgroundPositionY
[CODE}
var x = document.getElementById('abc').currentStyle.backgroundPositionX;
var y = document.getElementById('abc').currentStyle.backgroundPositionY;
[CODE}
But I am not able to get the background position in FireFox. Is there a way to get background position of image
in Firefox.
Thanks

I have the following CSS and HTML:

Code:

<DIV STYLE="width: 50px; height: 10px; line-height: 10px; background-color: #D0D0D0;">
 <DIV STYLE="width: 100%; height: 100%; background: url(/imgs/blog/stars/smallblock.png) -15px 0px no-repeat;">
 </DIV>
</DIV>

In all browsers except Safari the outer div is covered by the inner div except for the very last 15px, hence the -15px to offset it. In Safari the inner div covers all of the outer div. Any way to fix this?

CSS :
Code:

body{
	margin:0;
	background-image:url(images/pattern1.gif);
	padding-left:5%;
	padding-right:5%;
}
h1{
	background : url(images/logo.gif) no-repeat;
	width:291px;
	height: 127px;
}
#main{
	background : #FFFFFF url(images/back.gif) repeat-x;
	border-left: 8px solid #5D5F60;
	border-right: 8px solid #5D5F60;
}

HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" title="standard" href="blueDream.css"/>
		<title></title>
	</head>
	<body>
		<div id='main'>
			<h1></h1>
		</div>
	</body>
</html>

There appears to be a very strange gap on the left side
of the heading background which I cannot seem to get rid of.
Any ideas?

I am trying to make a rectangle with an image on the left and a horizontal list of anchor links on the right. Each anchor link should be a 32x32 px image with text underneath each image.

My problem is that the anchor links are not tall enough and the text is on top of the image instead underneath it.

Please help.

Code:

<style type="text/css">
.toolbar_list ul { float: right; text-align: right; margin:10px;}
.toolbar_list li{list-style: none;display: inline;}
.toolbar_list a { float: none; width: 32px; height: 32px; }

div.toolbarheader {line-height: 48px;padding-left: 55px;background-repeat: no-repeat; border-style:solid;}

.icon-32-delete    { background-image: url(stdimages/icon-32/delete.png); }
.icon-32-save    { background-image: url(stdimages/icon-32/save.png); }
.icon-32-new    { background-image: url(stdimages/icon-32/new.png); }
.icon-48-module    { background-image: url(stdimages/icon-48/module.png); }
</style>

</head><body>

<div class="toolbar_list">
 <ul>
  <li><a href="#" class="icon-32-delete delete" title="Delete">Delete</a></li>
  <li><a href="#" class="icon-32-save save" title="Save">Save</a></li>
  <li><a href="#" class="icon-32-new new" title="New">New</a></li>
 </ul>
 <div class="toolbarheader icon-48-module">Title</div>
</div>

ahh thanks figures it out

never mind.

I'm using background images on a <span> tag.

Code:

.thespan {
  display: -moz-inline-box;
  display: inline-block;
  height: 16px;
  width: 16px;
  margin: 2px;
  /* using longhand on purpose, since other classes override bits later */
  background-image: url(../img/iw_ds_sprite.gif);
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

And already there's an issue. IE (even 6!) FF2 and 3, and Safari all do what I expect. However, Opera is off by about 40 pixels.

There is a shell around the span - changing this shell's class makes the internal background-position change, like so:

Code:

.theshell .thespan {
  background-position: 0px -40px;
}

This actually works, except it doesn't. Opera, having been wrong in the first place, is now wrong by the same amount - it jumps to -80px.

I've been pulling my hair out on this...I can't believe that it works in IE6 but not Opera!

Any help is greatly appreciated.

Tim

I'm trying to do < td background="image" , i actually have the settings in a .css file, but it's not working for internet explorer.

So, in my css file i have the background-image : image;

and then in the html i have the <td=class so and so. but internet explorer makes the box smaller than it should be. Oh, and also i have designed the height: 108px; and the width in the style sheet.. i originally had it in the html, but either way, it still does this.

rocktvs.t35.com <===here

any suggestions?

I am trying to manage the background repeat using CSS. I have tried as many html hacks as I can think of, but none seems to work.
Here is a sample of my style sheet

.content{
padding: 0px;margin:0px;
width:961px;height:100%;
float:left;
}
#bgLeft {
width:5px;height: 100%;
min-height: 100%;
background: url(img/bg_left.gif) repeat-y;
float:left;
}
#bgRight {
background:url(img/bg_right.gif) repeat-y 100%;
width:5px;height:100%;
min-height:100%;
float:left;
}
.bodyMain{
padding: 0px;margin:0px;
width:735px;height:100%;
background-color: #f8f8f8;
float:left;
}

And here is a copy of my html


<div class="content" align="left">
<div id="bgLeft"> </div>
<div class="bodyMain" >
<!-- ###CONTENT### -->
</div>
<div id="bgRight"> </div>
</div>


n.b.: the content of my site must have two lines images (one left and one right - see bgLeft and bgRight stylesheet), whose height depends on the content space.

In IE7 I can see the bgLeft and bgRight images, but not for all the vertical height, in Firefox I cannot see anything.

Any ideas?
thanks

Hi, I have the following code: Code:

<div id="nav">

                           <ul class="nav">
                                	<li>
                                        <a href="/webdesign/">web design</a>
                                	</li>
                                    <li>
                                        &nbsp;|&nbsp;
                                    <li>
                                        
                                    <li>
                                        <a href="/web programming/">web programming</a>
                                   </li>
</ul>
</div>

My CSS looks like this :: Code:

#nav {
z-index:999;
position:absolute;
	margin-left:246px;
	margin-top:105px;
	background-image:url('images/common/navbar.png');
	width: 777px;
	text-transform: none;
	text-decoration: none;
	border-bottom-style: none;
}


.nav{
	background-image:url('images/common/navbar.gif');
}

The background image isn't showing up in the div or the <ul> . I've been staring at this for a while and can't figure it out. Does anyone see what I'm doing wrong? I know my path to the images is correct.

thanks
-Sean

for some reason my background color won't show in firefox..

http://losemybreath.org/

take a look in IE and then in FF, I can't for the life of me figure out why it's not working.. any ideas?

this is the css
Code:

body {
	margin: 0;
	padding: 0;
	background: #ECF0CD;
	text-align: center;
	font: 12px Arial, Helvetica, sans-serif;
	color: #666; }
	
#header {
	margin-left: 25px;
	width: 800px;
	height: 524px;
	background: url(http://www.losemybreath.org/images/greenlayout.jpg) no-repeat;
	}
	
#center {
	margin: auto;
	width: 800px; }
	
#content {
    width: 495px;
	margin: auto;
    text-align: left;
	background: #BCD4B2; }
	
#blog {
	float: left;
	margin-left: 10px;
	width: 290px;
	text-align: justify;
	display: inline;
	background: #BCD4B2; }
	
#sidebar {
	float: right;
	margin-right: 10px;
	width: 165px;
	text-align: justify;
	display: inline; 
	background: #BCD4B2;}

p {
	font: 12px Arial, Helvetica, sans-serif;
	color: #666;
	margin-top: 0;
	text-align: justify; }
	
h1 {
	text-align: center;
	background-color: #ECF0CD;
	margin-bottom: 0;
	padding-bottom: 0;
	margin-top: 0;
	padding-top: 0;
	letter-spacing: 3px;
	font-weight: bold;
	font: 12px Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #77936C; }
	
ul,li {
	list-style-type: none;
	margin: 0;
	padding: 0; }
	
a:link, a:visited {
    color: #669257;
    text-decoration: none; }

a:hover,a:active {
    color: #666666;
	background: #ECF0CD;
	text-decoration: underline; }
	
hr {
	width: 100%;
	color: #ECF0CD; }
	
.right {
	float: right; }
	
textarea, select, input {
	color: #666666;
	background: #ECF0CD;
	border: 0px none;
	margin: 0px;
	padding: 2px;
	font: 10px Arial, Helvetica, sans-serif; }
	
#question {
	border: 1px solid #ECF0CD;
	padding: 2px; }

I searched google to see if there was a fix for this problem, and found a few hits, however, the solutions were not solutions. I tried them, yes the backgrounds of my clear .png's were still being filled with some random color.

Is there anyone than can tell me how to make a .png's background clear in internet explorer?

I'm trying to make a div have a background image that only appears down the left hand side, I thought that this would be simple enough but I got no background image at all.
Code:

div.bar { color: #000000; background-color: #cccccc; background-image: url(gfx/fade.gif);
background-repeat: repeat-y;}

Code:

<div class="bar">Writing and stuff</div>

What am I doing wrong? If it helps, here is the whole css file and here is the page I'm trying to use it on.