943,522 Members | Top Members by Rank

Ad:
Mar 5th, 2009
0

Background image is not displayed in IE 7

Expand Post »
Hi everyone,

Kind of a newbie in the web design arena and therefore my apologies if this post is a repeat of a previous one, all the ones I found to be similar didn't seem to fix my problem

I have a list surounded with a class which its purpose is to add a tick for each list item. it works find in FF but of course not in IE7

here is the code

HTML and CSS Syntax (Toggle Plain Text)
  1.  
  2. <ul class="tick-list">
  3. <li>A&amp;E onsite</li>
  4. <li>
  5. <img src="/img/scorecards/Fair.gif" alt="Fair" title="Fair" /> blah blah
  6. </li>
  7. </ul>

and here is the css

HTML and CSS Syntax (Toggle Plain Text)
  1.  
  2.  
  3. ul.tick-list li {background:#fff url(/img/find-services/listings/tick-list.gif)no-repeat 0 0; padding:0 0 .6em 27px; min-height:21px;}

If anyone can help that will be great

thanks
Last edited by clekkas; Mar 5th, 2009 at 12:57 pm.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
clekkas is offline Offline
2 posts
since Mar 2009
Mar 6th, 2009
0

Re: Background image is not displayed in IE 7

You should place the list inside a div and give the surrounding div a background. Like so;
HTML and CSS Syntax (Toggle Plain Text)
  1. <head>
  2. <html>
  3. <style type = "text/css">
  4. ul.tick-list li {padding:0 0 .6em 27px; min-height:21px;}
  5. .ulwrapper {background:#fff url(/img/find-services/listings/tick-list.gif) no-repeat 0 0;}
  6. </style>
  7. <body>
  8. <div class="ulwrapper">
  9.  
  10. <ul class="tick-list">
  11. <li>A&amp;E onsite</li>
  12. <li>
  13. <img src="/img/scorecards/Fair.gif" alt="Fair" title="Fair" /> blah blah
  14. </li>
  15. </ul>
  16. </div>
  17. </body>
  18. </html>

The above code works in IE 7 and Firefox 3.
Last edited by colweb; Mar 6th, 2009 at 9:07 am.
Reputation Points: 34
Solved Threads: 52
Posting Whiz
colweb is offline Offline
316 posts
since Nov 2007
Mar 6th, 2009
0

Re: Background image is not displayed in IE 7

The copy of the code didn't go correctly. It should start with <html> and just before the body </head>.
Last edited by colweb; Mar 6th, 2009 at 11:48 am.
Reputation Points: 34
Solved Threads: 52
Posting Whiz
colweb is offline Offline
316 posts
since Nov 2007
Mar 9th, 2009
0

Re: Background image is not displayed in IE 7

Hi colweb,

That did the trick, if it is easy to explain why this is needed it will be good to know for future purposes

Thanks for your quick reply and help
Reputation Points: 10
Solved Threads: 0
Newbie Poster
clekkas is offline Offline
2 posts
since Mar 2009
Mar 9th, 2009
0

Re: Background image is not displayed in IE 7

Lists are not block objects, and won't take an image.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Mar 9th, 2009
0

Re: Background image is not displayed in IE 7

Click to Expand / Collapse  Quote originally posted by clekkas ...
Hi colweb,

That did the trick, if it is easy to explain why this is needed it will be good to know for future purposes

Thanks for your quick reply and help
It seems the problem is solved than. And MidiMagic has already explained why it needs the surrounding div. Please press the "solved" butten next time.
Reputation Points: 34
Solved Threads: 52
Posting Whiz
colweb is offline Offline
316 posts
since Nov 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Display Events in Calendar
Next Thread in HTML and CSS Forum Timeline: Dynamic Iframe for External Domain





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC