List background-image not showing in IE6

Hi guys, after checking out my website in different browsers through www.browsershots.org I noticed that it works perfectly in every website but, you guessed it, IE6 There appears to be some issues with displaying the background-image property for some list items - here is the CSS:

/* --- NAVIGATION INFORMATION --- */
ul.pagenav
{
	list-style:none;
	margin:0 !important;
	padding:0 !important;
}

.page_item a
{
	display:block;
	height: 97px !important;
	width: 300px !important;
	text-decoration:none;
	text-align:left;
	color:#93114a !important;
	margin:0 !important;
	padding:0 !important;
}

.page-item-home
{
	background:transparent url('images/benson/Go-Back-Home---Dim.jpg') no-repeat;
	margin:0 !important;
	padding:0 !important;
}

.page-item-home a:hover
{
	background:transparent url('images/benson/Go-Back-Home.jpg') no-repeat;
}

.page-item-9
{
	background:transparent url('images/benson/Get-Invovled---Dim.jpg') no-repeat;
	margin:0 !important;
	padding:0 !important;
}

.page-item-9 a:hover
{
	background:transparent url('images/benson/Get-Invovled.jpg') no-repeat;
}

.page-item-11
{
	background:transparent url('images/benson/Give-Me-60-Seconds---Dim.jpg') no-repeat;
	margin:0 !important;
	padding:0 !important;
}

.page-item-11 a:hover
{
	background:transparent url('images/benson/Give-Me-60-Seconds.jpg') no-repeat;
}

.page-item-2
{
	background:transparent url('images/benson/What-Do-You-Do---Dim.jpg') no-repeat;
	margin:0 !important;
	padding:0 !important;
}

.page-item-2 a:hover
{
	background:transparent url('images/benson/What-Do-You-Do.jpg') no-repeat;
}

.page-item-3
{
	background:transparent url('images/benson/Why-Bother---Dim.jpg') no-repeat;
	margin:0 !important;
	padding:0 !important;
}

.page-item-3 a:hover
{
	background:transparent url('images/benson/Why-Bother.jpg') no-repeat;
}

.current_page_item
{
	display:none;
}

Code (markup):

<ul class="pagenav">


<li class="page_item page-item-11"><a href="http://xxx.com/60-seconds/" title="60 Seconds …">60 Seconds …</a></li>
<li class="page_item page-item-9"><a href="http://xxx.com/get-involved/" title="Get Involved!">Get Involved!</a></li>
<li class="page_item page-item-2"><a href="http://xxx.com/what-do-you-do/" title="What Do You Do?">What Do You Do?</a></li>
<li class="page_item page-item-3"><a href="http://xxx.com/why-vote/" title="Why Bother Voting?">Why Bother Voting?</a></li>

</ul>

Code (markup):

If anyone could help me out I would really appreciate this!

EDIT:

It appears as though the last item in the list has its background image property displayed correctly, but the rest are not.

 

Are you familiar with Haslayout? Setting haslayout on your main list often fixes IE list bugs.

Also if your list's left side is right up against the edge of the screen or the edge of some other element, the bullets or bullet images can be covered up or end up off-screen.

For an ordered list where I recently needed the numbers to show, I used this CSS:

ol {
  width: 96%;/*haslayout*/
  list-style-type: decimal;
  margin-left: 0;
  padding-left: 30px;
}

Code (markup):

The padding made room for the numbers, the margins were zero'd to stop IE from losing the bullets, and haslayout ensured that my first number appeared (I kept missing the first bullet only).

 

Ok, first off if you have to declare !important that many times, you've probably REALLY screwed up badly someplace. I'd suggest changing the markup to id="pageNav" so you don't have whatever else is dicking with you getting involved.

Second, if every element inside a container is getting the same class, don't bother putting the class on it and style off it's PARENT.

Third, if your title text is going to be identical to your content, don't bother using the title attribute - that's just a waste of code.

Finally, vague meaningless classes like "page-item-##" is piss poor coding... Lemme guess, turdpress? Looks like something wordpress would WASTE TIME outputting for markup.

So, cleaning up the TRAIN WRECK of markup, we can simplify down to this:

<ul id="pageNav">
	<li class="sixtySeconds">
		<a href="http://xxx.com/60-seconds/">60 Seconds ...</a>
	</li>
	<li class="getInvolved">
		<a href="http://xxx.com/get-involved/">Get Involved!</a>
	</li>
	<li class="whatDoYouDo">
		<a href="http://xxx.com/what-do-you-do/">What Do You Do?</a>
	</li>
	<li class="whyBotherVoting">
		<a href="http://xxx.com/why-vote/">Why Bother Voting?</a>
	</li>
</ul>

Code (markup):

on to the CSS... first whatever you are working on should have a good reset. Second, if you need all those !important then you are probably either editing the wrong stylesheet, or need to throw it all away and start over clean. Transparent should be the default behavior so there should be no need to declare that - likewise there's no reason to be wasting time setting padding:0 margin:0 on the targeted states, as a good reset should handle that, otherwise you could set them on the class common to all of them instead of on each one.

You also seem to have no positioning on any of these backgrounds, and really you are using a whole bunch of separate images for what I'd probably only use one for. Since this is a stack column I'd probably try making all the LI display:inline to avoid that pesky IE 'jumping up and down' bug... which would result in needing to put the background image on the anchor not the LI.

So my CSS for that would be something like:

#pageNav {
	list-style:none;
	margin:0;
	padding:0;
}

#pageNav li {
	display:inline; /* prevent IE positioning bugs */
	margin:0;
	padding:0;
}

#pageNav a {
	display:block;
	height:96px;
	width:300px;
	margin:0;
	padding:0;
	text-decoration:none;
	text-align:left;
	color:#93114a;
	background:url(images/pageNav.png);
}

#pageNav .sixtySeconds a {
	background-position:0 0;
}

#pageNav .sixtySeconds a:hover {
	background-position:0 -96px;
}

#pageNav .getInvolved a {
	background-position:0 -192px;
}

#pageNav .getInvolved a:hover {
	background-position:0 -288px;
}

#pageNav .whatDoYouDo a {
	background-position:0 -384px;
}

#pageNav .whatDoYouDo a:hover {
	background-position:0 -480px;
}

#pageNav .whyBotherVoting a {
	background-position:0 -576px;
}

#pageNav .whyBotherVoting a:hover {
	background-position:0 -672px;
}

Code (markup):

You then would just need to make a 'pageNav.png' file which would contain ALL of your button states one atop the other... resulting in a single 300x768 file. Single file means single palette per file, less handshakes and the possibility of better compression due to repetition. It would also mean you'd not have the 'delay' downloading the hover states when you first rollover them on a deployed site.