List images not showing in IE(CSS Problem) - Webmaster Forum - Web Design, Programming and SEO forums

10-30-2007, 01:46 PM

Nightscream

Status: Junior Member
Join date: Aug 2006
Location:
Expertise:
Software:

Posts: 58

iTrader: 0 / 0%

Nightscream is on a distinguished road

List images not showing in IE(CSS Problem)

Got a problem with css and IE, my list images aren't showing in IE but they are showing in FF
I have no clue why, sometimes one list shows them but other lists don't and when I do select all they are all there :s
That's just weird

live version: http://nighttemplates.x10hosting.com

Screen:
FF: http://img91.imageshack.us/img91/9585/listffok0.jpg
IE: http://img519.imageshack.us/img519/941/listiecb7.jpg

HTML

Code:

<div id="left">
			<div id="LatestTemplates">
				<ul>
					<li>Lorem Ipsum <span class="LeftPadding">xx commment(s)</span></li>
					<li>Lorem Ipsum <span class="LeftPadding">xx commment(s)</span></li>
					<li>Lorem Ipsum <span class="LeftPadding">xx commment(s)</span></li>
					<li>Lorem Ipsum <span class="LeftPadding">xx commment(s)</span></li>
					<li>Lorem Ipsum <span class="LeftPadding">xx commment(s)</span></li>
				</ul>
			</div>
			<div id="LatestTutorials">
				<p><img src="images/latestTutorials.gif" alt="Latest Tutorials" width="125" height="30" /></p>
				<ul>
					<li>Lorem Ipsum <span class="LeftPadding">xx commment(s)</span></li>
					<li>Lorem Ipsum <span class="LeftPadding">xx commment(s)</span></li>
					<li>Lorem Ipsum <span class="LeftPadding">xx commment(s)</span></li>
					<li>Lorem Ipsum <span class="LeftPadding">xx commment(s)</span></li>
					<li>Lorem Ipsum <span class="LeftPadding">xx commment(s)</span></li>
				</ul>
			</div>
			<div id="LatestBuyers">
				<p><img src="images/latestBuyers.gif" alt="Latest Buyers" width="115" height="30" /></p>
				<ul>
					<li>Lorem Ipsum <span class="LeftPadding">xx commment(s)</span></li>
					<li>Lorem Ipsum <span class="LeftPadding">xx commment(s)</span></li>
					<li>Lorem Ipsum <span class="LeftPadding">xx commment(s)</span></li>
					<li>Lorem Ipsum <span class="LeftPadding">xx commment(s)</span></li>
					<li>Lorem Ipsum <span class="LeftPadding">xx commment(s)</span></li>
				</ul>
			</div>
		</div>

CSS

Code:

#left ul {
	width: 200px;

	padding: 0;
	margin: 0;
	margin-left: 30px;
	
	list-style-image: url(images/list_icon.gif);
}

#left ul li {
		
	padding: 4px 0 3px 10px;
	margin: 0;
	
	border-bottom: 1px solid #192127;
}

10-30-2007, 02:00 PM

JochenVDV

Status: I'm new around here
Join date: Oct 2007
Location: Belgium
Expertise:
Software:

Posts: 18

iTrader: 0 / 0%

JochenVDV is on a distinguished road

That's indeed very weird. For me in IE7 no list images show up at all. I can't think of a proper solution for this problem. Maybe you should try this, this is just a guess, it will probably won't work either.

Code:

#left ul {
	width: 200px;

	padding: 0;
	margin: 0;
	margin-left: 30px;
	
	list-style-image: url(images/list_icon.gif);
}

#left ul li {
		
	padding: 4px 0 3px 10px;
	margin: 0;
	
	border-bottom: 1px solid #192127;
	list-style-image: url(images/list_icon.gif);
}

I just copied the list-style-image command and inserted it also in the declaration for #left ul li. Try this, I have no idea if it will work but it could.

10-30-2007, 02:35 PM

Jmz

Status: Member
Join date: Jun 2007
Location: Newcastle, UK
Expertise:
Software:

Posts: 245

iTrader: 7 / 100%

Jmz is on a distinguished road

As far as I know its an IE bug, I didn't know it still happened in IE7 though.

I copied your code to my computer and it works fine for me.

10-30-2007, 02:45 PM

Salathe

Status: Community Archaeologist
Join date: Jul 2004
Location: Scotland
Expertise: Software Development
Software: vim, PHP

Posts: 3,820

iTrader: 25 / 100%

Salathe will become famous soon enough

Rather than using list-style-image, apply some extra left (or whichever side you want the icon!) padding and set the icon image as a background.

10-30-2007, 02:52 PM

JochenVDV

Status: I'm new around here
Join date: Oct 2007
Location: Belgium
Expertise:
Software:

Posts: 18

iTrader: 0 / 0%

JochenVDV is on a distinguished road

Originally Posted by Salathe

Rather than using list-style-image, apply some extra left (or whichever side you want the icon!) padding and set the icon image as a background.

That's a creative solution, I'll remember that.

10-30-2007, 03:06 PM

Nightscream

Status: Junior Member
Join date: Aug 2006
Location:
Expertise:
Software:

Posts: 58

iTrader: 0 / 0%

Nightscream is on a distinguished road

well I still testing it in IE6 because i hate IE7 I've never installed it

well i'm going to use your advice Salathe
thanks for helping going to test it

10-30-2007, 06:02 PM

Anthony

Status: Sin Binner
Join date: Jul 2004
Location: Yorkshire Coast - UK
Expertise:
Software:

Posts: 5,911

iTrader: 29 / 91%

Anthony is on a distinguished road

Salathe got it in one. Using list-style-image isn't really the best method. Setting a background is, as you have more flexibility with what you can actually do with the appearance of the list and also the text that is displayed (if you're not using css image replacement for rollovers, or navigation elements).