#1
  1. Coding fun is drunk
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Location
    Lincoln, UK
    Posts
    127
    Rep Power
    22

    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"
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    14
    Rep 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.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,126
    Rep Power
    4304
    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.

    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).
  6. #4
  7. Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2004
    Location
    New Springfield, OH
    Posts
    1,231
    Rep Power
    1469
    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!
  8. #5
  9. Coding fun is drunk
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Location
    Lincoln, UK
    Posts
    127
    Rep Power
    22
    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.
    "The cause will equal the effect after the effect has preceded the cause"
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Location
    Albuquerque
    Posts
    1
    Rep Power
    0
    Try to apply clear: both; on the UL - That works for me!

IMN logo majestic logo threadwatch logo seochat tools logo