First <li> item does not display bullet

Dev Shed Forums Sponsor:

November 2nd, 2007, 12:11 PM

Chewie

Coding fun is drunk

Join Date: Jan 2001

Location: Lincoln, UK

Posts: 127

Time spent in forums: 1 Day 22 h 27 m 36 sec
Reputation Power: 21

First <li> item does not display bullet

Hi Guys,

I have what i think is a rather odd problem and i have not seen it before.

I have just finished creating a wordpress template for my blog which can be found at http://www.mobileshop.com/blog i have pretty much got everything sorted (except Safari pushing the RSS info down) but i have one strange problem in IE.

If you look on the right hand bar in a non IE browser you can see that the lists all have a little icon of a phone as the bullet points. Now if you switch to IE then you will see that the first item of each list is missing the phone icon. Even if i swap it back to normal bullets it still misses the first one off.

The <li>'s all seem structured fine in the html and my css is as follows...

Code:

#rightbar ul li ul {
	background: #fff url(images/cat-bg.gif);
	background-repeat: repeat-y;
	color: #03036a;
	padding: 8px;
	margin: 0;
	margin-top: 0;
}
#rightbar ul li ul li {
	margin: 0;
	margin-left: 20px;
	padding: 0;
	line-height: 20px;
	list-style-image: url(images/phone-bullet.png);
	background: none;
	font-size: 120%;
	width: 210px;
}

I know its probably not the best code but i cannot for the life of me work out why IE does not display the icon for the first <li> item, anyone have any ideas?

Thanx

__________________
"The cause will equal the effect after the effect has preceded the cause"

November 2nd, 2007, 02:49 PM

webable

Registered User

Join Date: May 2007

Location: Countryside, Sweden

Posts: 14

Time spent in forums: 16 h 28 m 24 sec
Reputation Power: 0

The only reason I can think of is that there would be not enuff space for the first bullet. And the vertical distance is a few pixel less in IE for the first bullet.

November 2nd, 2007, 11:17 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,834

Time spent in forums: 6 Months 1 Day 21 h 3 m 17 sec
Reputation Power: 4192

I recommend that you use background-image instead of list-style-image.

That page has a lot of XHTML errors.

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

November 3rd, 2007, 05:47 AM

Nilpo

Master of Disaster™

Join Date: Jan 2004

Location: New Springfield, OH

Posts: 863

Folding Points: 600856 Folding Title: Super Ultimate Folder - Level 2

Time spent in forums: 5 Days 16 h 50 m 17 sec
Reputation Power: 1185

Quote:

Originally Posted by Kravvitz

I recommend that you use background-image instead of list-style-image.

I agree. List-style-images perform inconsistently across browsers.

__________________

Don't like me? Click it.

Scripting problems? Windows questions? Ask the Windows Guru!

Stay up to date with all of my latest content. Follow me on Twitter!

Help us help you! Post your exact error message with these easy tips!

November 3rd, 2007, 08:26 AM

Chewie

Coding fun is drunk

Join Date: Jan 2001

Location: Lincoln, UK

Posts: 127

Time spent in forums: 1 Day 22 h 27 m 36 sec
Reputation Power: 21

Ok guys thanks for the input, i will change the code to use background images.

Nearly all of those errors are caused by code in a wordpress plugin, i will edit it to clean it up.

February 15th, 2013, 12:38 AM

kossik8

Registered User

Join Date: Feb 2013

Location: Albuquerque

Posts: 1

Time spent in forums: 7 m 33 sec
Reputation Power: 0

Try to apply clear: both; on the UL - That works for me!

First <li> item does not display bullet

Developer Shed Advertisers and Affiliates