Welcome to WebmasterWorld Guest from 54.162.239.134

Forum Moderators: not2easy

Message Too Old, No Replies

bullets showing in other than IE browsers

     
3:10 pm on Sep 26, 2011 (gmt 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 Sep 26, 2011 (gmt 0)

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



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 Sep 26, 2011 (gmt 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 Sep 26, 2011 (gmt 0)

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



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 Sep 26, 2011 (gmt 0)



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

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



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 Sep 26, 2011 (gmt 0)

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



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 Sep 26, 2011 (gmt 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 Sep 26, 2011 (gmt 0)

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



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 Sep 26, 2011 (gmt 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 Sep 26, 2011 (gmt 0)

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



#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 Sep 27, 2011 (gmt 0)

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



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 Sep 27, 2011 (gmt 0)



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

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



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

Featured Threads

Hot Threads This Week

Hot Threads This Month