homepage Welcome to WebmasterWorld Guest from 54.226.230.76
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
bullets showing in other than IE browsers
AnkaS




msg:4367356
 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

 

penders




msg:4367366
 3:37 pm on Sep 26, 2011 (gmt 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?

AnkaS




msg:4367393
 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...

penders




msg:4367417
 4:35 pm on Sep 26, 2011 (gmt 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.

AnkaS




msg:4367420
 4:38 pm on Sep 26, 2011 (gmt 0)

Ok, I will do it and let you know of the results. Thanks a lot.

lucy24




msg:4367422
 4:45 pm on Sep 26, 2011 (gmt 0)

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.

penders




msg:4367432
 5:01 pm on Sep 26, 2011 (gmt 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?

AnkaS




msg:4367461
 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...

penders




msg:4367468
 6:43 pm on Sep 26, 2011 (gmt 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.

AnkaS




msg:4367475
 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.

penders




msg:4367485
 8:15 pm on Sep 26, 2011 (gmt 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?

penders




msg:4367849
 3:41 pm on Sep 27, 2011 (gmt 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?!

AnkaS




msg:4367866
 4:34 pm on Sep 27, 2011 (gmt 0)

Can you tell me how to download and use the Firebug?

penders




msg:4367888
 5:14 pm on Sep 27, 2011 (gmt 0)

Firebug is Firefox Add-On. So, using Firefox, navigate to the firebug page at mozilla.org....
https://addons.mozilla.org/en-US/firefox/addon/firebug/

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved