Back To Website Design Forum

List background-image not showing in IE6

  • michaelbenson
  • Born
  • Born
  • No Avatar
  • Joined: Sep 05, 2005
  • Posts: 1
  • Status: Offline

Post September 2nd, 2009, 8:15 am

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

Code: [ Select ]
/* --- 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;
}
  1. /* --- NAVIGATION INFORMATION --- */
  2. ul.pagenav
  3. {
  4.   list-style:none;
  5.   margin:0 !important;
  6.   padding:0 !important;
  7. }
  9. .page_item a
  10. {
  11.   display:block;
  12.   height: 97px !important;
  13.   width: 300px !important;
  14.   text-decoration:none;
  15.   text-align:left;
  16.   color:#93114a !important;
  17.   margin:0 !important;
  18.   padding:0 !important;
  19. }
  21. .page-item-home
  22. {
  23.   background:transparent url('images/benson/Go-Back-Home---Dim.jpg') no-repeat;
  24.   margin:0 !important;
  25.   padding:0 !important;
  26. }
  28. .page-item-home a:hover
  29. {
  30.   background:transparent url('images/benson/Go-Back-Home.jpg') no-repeat;
  31. }
  33. .page-item-9
  34. {
  35.   background:transparent url('images/benson/Get-Invovled---Dim.jpg') no-repeat;
  36.   margin:0 !important;
  37.   padding:0 !important;
  38. }
  40. .page-item-9 a:hover
  41. {
  42.   background:transparent url('images/benson/Get-Invovled.jpg') no-repeat;
  43. }
  45. .page-item-11
  46. {
  47.   background:transparent url('images/benson/Give-Me-60-Seconds---Dim.jpg') no-repeat;
  48.   margin:0 !important;
  49.   padding:0 !important;
  50. }
  52. .page-item-11 a:hover
  53. {
  54.   background:transparent url('images/benson/Give-Me-60-Seconds.jpg') no-repeat;
  55. }
  57. .page-item-2
  58. {
  59.   background:transparent url('images/benson/What-Do-You-Do---Dim.jpg') no-repeat;
  60.   margin:0 !important;
  61.   padding:0 !important;
  62. }
  64. .page-item-2 a:hover
  65. {
  66.   background:transparent url('images/benson/What-Do-You-Do.jpg') no-repeat;
  67. }
  69. .page-item-3
  70. {
  71.   background:transparent url('images/benson/Why-Bother---Dim.jpg') no-repeat;
  72.   margin:0 !important;
  73.   padding:0 !important;
  74. }
  76. .page-item-3 a:hover
  77. {
  78.   background:transparent url('images/benson/Why-Bother.jpg') no-repeat;
  79. }
  81. .current_page_item
  82. {
  83.   display:none;
  84. }


Code: [ Select ]
<ul class="pagenav">


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

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


If anyone could help me out I would really appreciate this! It appears as though the last item in the list has its background image property displayed correctly, but the rest are not.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post September 2nd, 2009, 8:15 am

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8926
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post September 3rd, 2009, 8:14 am

Do you have a screenshot of the problem that you can attach to this post?
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post September 3rd, 2009, 8:37 am

In addition to what Bigweb requested...

I don't understand why you're using the "transparent" directive in the LI's when the parent element, UL, doesn't have a background.

Have you tried it without that directive?
- dM
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post September 3rd, 2009, 5:08 pm

I played around with this for a while and couldn't replicate the problem. A screen shot or your full markup and CSS would really help.

I can only assume it's a problem with inheritance.
- dM

Page 1 of 1

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 165 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.