HTML and CSS

Background image is not displayed in IE 7

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Mar 2009

Posts: 2

Reputation: clekkas is an unknown quantity at this point

Solved Threads: 0

clekkas

Offline

Newbie Poster

Background image is not displayed in IE 7

Mar 5th, 2009

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

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
 
                <ul class="tick-list">                            
                            <li>A&amp;E onsite</li>
                        <li>
                            <img src="/img/scorecards/Fair.gif" alt="Fair" title="Fair" /> blah blah
                        </li>
               </ul>
 
                <ul class="tick-list">                            
                            <li>A&amp;E onsite</li>
                        <li>
                            <img src="/img/scorecards/Fair.gif" alt="Fair" title="Fair" /> blah blah
                        </li>
               </ul>

and here is the css

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

 
 
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.

•

Join Date: Nov 2007

Posts: 45

Reputation: colweb is an unknown quantity at this point

Solved Threads: 1

colweb

Offline

Light Poster

Re: Background image is not displayed in IE 7

Mar 6th, 2009

You should place the list inside a div and give the surrounding div a background. Like so;

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<head>
<html>
<style type = "text/css">
	ul.tick-list li {padding:0 0 .6em 27px; min-height:21px;}
	.ulwrapper {background:#fff url(/img/find-services/listings/tick-list.gif) no-repeat 0 0;}
</style>
<body>
	<div class="ulwrapper">
 
                <ul class="tick-list">
                            <li>A&amp;E onsite</li>
                        <li>
                            <img src="/img/scorecards/Fair.gif" alt="Fair" title="Fair" /> blah blah
                        </li>
               </ul>
	</div>	
</body>
</html>
<head>
<html>
<style type = "text/css">
	ul.tick-list li {padding:0 0 .6em 27px; min-height:21px;}
	.ulwrapper {background:#fff url(/img/find-services/listings/tick-list.gif) no-repeat 0 0;}
</style>
<body>
	<div class="ulwrapper">

                <ul class="tick-list">
                            <li>A&amp;E onsite</li>
                        <li>
                            <img src="/img/scorecards/Fair.gif" alt="Fair" title="Fair" /> blah blah
                        </li>
               </ul>
	</div>	
</body>
</html>

The above code works in IE 7 and Firefox 3.

Last edited by colweb; Mar 6th, 2009 at 9:07 am.

•

Join Date: Nov 2007

Posts: 45

Reputation: colweb is an unknown quantity at this point

Solved Threads: 1

colweb

Offline

Light Poster

Re: Background image is not displayed in IE 7

Mar 6th, 2009

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.

•

Join Date: Mar 2009

Posts: 2

Reputation: clekkas is an unknown quantity at this point

Solved Threads: 0

clekkas

Offline

Newbie Poster

Re: Background image is not displayed in IE 7

Mar 9th, 2009

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

•

Join Date: Jan 2007

Posts: 3,193

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 162

MidiMagic

Offline

Posting Sensei

Re: Background image is not displayed in IE 7

Mar 9th, 2009

Lists are not block objects, and won't take an image.

Daylight-saving time uses more gasoline

•

Join Date: Nov 2007

Posts: 45

Reputation: colweb is an unknown quantity at this point

Solved Threads: 1

colweb

Offline

Light Poster

Re: Background image is not displayed in IE 7

Mar 9th, 2009

•

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.