Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 3115

Mar 5th, 2009

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)
 
                <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

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.

Similar Threads

Stretch Image in JLabel in Java
Firefox background-position problem solved in JavaScript / DHTML / AJAX
Background for different sized screens ? in Site Layout and Usability
Setting a Background Image problem in PHP
How to make an image unsaved? in IT Professionals' Lounge

clekkas

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

2 posts
since Mar 2009

Permalink

Mar 6th, 2009

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)
<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.

colweb

Reputation Points: 34

Solved Threads: 52

Posting Whiz

Offline

316 posts
since Nov 2007

Permalink

Mar 6th, 2009

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.

colweb

Reputation Points: 34

Solved Threads: 52

Posting Whiz

Offline

316 posts
since Nov 2007

Permalink

Mar 9th, 2009

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

clekkas

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

2 posts
since Mar 2009

Permalink

Mar 9th, 2009

Re: Background image is not displayed in IE 7

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

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Mar 9th, 2009

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.

colweb

Reputation Points: 34

Solved Threads: 52

Posting Whiz

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.

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

DaniWeb Message

Cancel Changes

User Name
Password