Welcome to WebmasterWorld Guest from 54.196.208.6

Forum Moderators: not2easy

Message Too Old, No Replies

bullets showing in other than IE browsers

     
3:10 pm on Sep 26, 2011 (gmt 0)

New User

joined:Sept 26, 2011
posts: 6
votes: 0



Hello,
I have the left nav built as a list with no bullets, i.e.

list-style-type: none;
background: url('/files/images/BulletRedArrow.jpg') no-repeat left top;

I am using IE and my left nav looks beautiful, no bullets, but the images. When you use any other browser or a tablet, the bullets are visible in addition to the images (looks really bad). Does anyone know how to solve this problem?

Thanks, Anka
3:37 pm on Sept 26, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


I think what you have is sufficient. Do you have any errors in your CSS (ie. does it validate?) that might prevent it from working as it should?
4:03 pm on Sept 26, 2011 (gmt 0)

New User

joined:Sept 26, 2011
posts: 6
votes: 0


I don't have any errors. I always cross check my websites on different browsers especially when the page is CSS driven and usually I am able to fix any problems. This time, I really don't know what to do. I am thinking about removing the list entirely...
4:35 pm on Sept 26, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


As mentioned, what you have would normally be sufficient. However, do you have any conflicting styles, perhaps with a higher specificity, that could be overriding this style rule?

If you examine the element in firebug for instance, you should be able to see what style rule is applying the bullet.
4:38 pm on Sept 26, 2011 (gmt 0)

New User

joined:Sept 26, 2011
posts: 6
votes: 0


Ok, I will do it and let you know of the results. Thanks a lot.
4:45 pm on Sept 26, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
posts:12702
votes: 244


Where do you give the list-style-type? Under ul or under li? How about replacing "background" with a straight url? My equivalent (picking a css at random) has

li {list-style: disc inside url("images/smalltape.png");}

The "disc" (or bullet or whatever) will only display if the image can't be found.
5:01 pm on Sept 26, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


Where do you give the list-style-type? Under ul or under li?


I was also wondering this, however, since the background-image appears to display OK I had assumed it was on the li. But it did make me wonder whether it is actually correct to set it on the ul? It does appear to work OK (in all browsers I've tried) if list-style-type is set on the ul and not the li, but the spec does state that it applies to "elements with 'display: list-item'". However, the value is inherited, so if set on the ul, I assume the li inherits this value - is that correct?
6:33 pm on Sept 26, 2011 (gmt 0)

New User

joined:Sept 26, 2011
posts: 6
votes: 0


I changed the code to

li {list-style: disc inside url("images/smalltape.png");}

but it didn't help. It's still the same. I would like to test it on Firebug, but I have to admit I don't know how to download Firebug and how to use it.
Also, the list-style-type is under li and under ul. Believe me, I tried almost all the possibilities. I am more opting toward a theory that I have a code somewhere overriding the list-style-type in the left nav...
6:43 pm on Sept 26, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


It's still the same.


It can't be quite the same... since you've removed the code for the background-image?

As lucy24 mentions, with the new code:
li {list-style: disc inside url("images/smalltape.png");}

The list-style-type (disc) and list-style-image (url) are mutually exclusive. Either one or the other are displayed, never both. The list-style-image is not the same as the background-image.
7:08 pm on Sept 26, 2011 (gmt 0)

New User

joined:Sept 26, 2011
posts: 6
votes: 0


This is my code, perhaps I did something wrong...

ul#links {
font-family:Arial,serif;
font-size: 12px;
display: block;
margin-left: 4;
list-style-type:none;
text-align: left;
line-height: 10px;
}

#links li a{
list-style: disc inside url("/files/images/BulletRedArrow.jpg");
padding-left: .8em;
}

#links li a:hover{
list-style:none;
list-style-type:none;
background:url('/files/images/BulletBlkArrow.jpg') no-repeat left top;
background-position: 0 .1em;
padding-left: .8em;
}
You can see under #links li a:hover I have the old code and under #links li a, the new code. In the IE browser, it looks exactly the same and in Chrome the bullets show.
8:15 pm on Sept 26, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


#links li a {  
list-style: disc inside url("/files/images/BulletRedArrow.jpg");


You can't apply list-style to an anchor. list-style's relate only to list-item's (li's).

Although this doesn't explain why the bullets show in other browsers when you have list-style-type:none; set on the parent ul. Unless you have an overriding style elsewhere in your stylesheet?
3:41 pm on Sept 27, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


In the IE browser, it looks exactly the same and in Chrome the bullets show.


Despite the errors in the CSS, as mentioned above, the code you have posted works the same in IE8, Chrome and Firefox - the bullet is hidden in all browsers. So it would seem there is code elsewhere that is overriding your list-style-type?!
4:34 pm on Sept 27, 2011 (gmt 0)

New User

joined:Sept 26, 2011
posts: 6
votes: 0


Can you tell me how to download and use the Firebug?
5:14 pm on Sept 27, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


Firebug is Firefox Add-On. So, using Firefox, navigate to the firebug page at mozilla.org....
[addons.mozilla.org...]

And click "Add to Firefox", and follow the instructions.

There are similar tools built in to Google Chrome (right mouse and select "Inspect Element" to access the debugger). And in Opera there is Opera Dragonfly (again, right mouse and select "Inspect Element"). IE8 has the Developer Tools (F12).