...

View Full Version : IE and hiding list bullets



qwertyuiop
02-12-2005, 08:09 PM
Hi,
I'm trying to hide the bullets for a certain list on my site.

In the css:

ul li {
list-style-image: url(/images/li.gif);
list-style-type: disc;
}

That automaticaly makes ALL li in ul have that list type, right?

But there's a certain list that I DONT want to have ANY bullet.

So for that list, I do this:

#submenu ul li {
list-style: none;
list-style-type: none;
margin: 0;
}
#submenu ul {
list-style: none;
list-style-type: none;
padding: 0;
margin: 10px 0 10px 0;
}

It works in Firefox, but not in IE.

IE seems to just push the bullets to the far left to "hide" the bullets. But when my menu is on the far right, the bullets show in the middle of the page.

How can I get rid of the bullets, not just "hide" them?

Jalenack
02-12-2005, 08:36 PM
I have a feeling this is a specificity issue. I believe the browser thinks that the rule "ul li" is more specific than "#submenu li"

What I would suggest is changing the submenu id from the div to the actual ul tag. Also, theres some considerable cleanup that can be done to your css.

#submenu ul li {
list-style: none;
margin: 0;
}
#submenu ul {
padding: 0;
margin: 10px 0;
}

the <ul> tag never has list bullets, only the <li> tags within them. For the margin rule, you can specify vertical and horizontal like shown. list-style is the shorthand and includes list-style-type. So if you wanted a list-style of an image and if that didnt work: a disc, then I believe you could go (not tested though)

list-style: url(images/list.gif) disc;

Hope this helps

qwertyuiop
02-13-2005, 01:10 AM
shouldnt adding !important make it work?

Jalenack
02-13-2005, 01:19 AM
yes...but IE doesn't understand !important :(

qwertyuiop
02-13-2005, 01:28 AM
o, i didnt kno that.

qwertyuiop
02-13-2005, 01:34 AM
isn't another option making the list use an "invisible" (transparent gif) bullet?

im gonna try that now.

qwertyuiop
02-13-2005, 02:34 AM
the invisible bullet trick works!

I did this:


ul li {
list-style: none;
list-style-image: url(/images/invisiblebullet.gif);
}


and it works in IE and Firefox. Firefox uses the list-style none, and it seems to ignore the invisible bullet, and IE uses the invisible bullet!

harbingerOTV
02-13-2005, 05:25 AM
I have a feeling this is a specificity issue. I believe the browser thinks that the rule "ul li" is more specific than "#submenu li"


I found this out tonight. The ul li sets a "standard" that over rules #divname

I just found it easy to do the:

#divname li {
list-style-image: url(../images/bullet.gif);
}

#anotherdivname li {
list-style: none;
}

to define to look of the lists. At least this way there isn't the unnessicary (? never can spell that word) loading of images when one line a text can make it work.

qwertyuiop
02-13-2005, 07:34 PM
well, the image is super-duper small, at only 51 bytes. its probably smaller than the extra line of text.

thanks for the tip though.

rmedek
02-13-2005, 07:45 PM
hm... this looks harder than it has to be. Usually if I only want a certain list to be non-bulleted I do this:


html:

<ul id="nav">
<li><a href="#">link one</a></li>
<li><a href="#">link two</a></li>
<li><a href="#">link three</a></li>
</ul>

css:

ul#nav, ul#nav li {
list-style-type: none;
}


Anyhoo... if you already have this figured out, never mind; but again, I do get the feeling that this "invisible bullet" thing is overkill. Could it be something in the html that's not letting the specificity rules apply?

Jalenack
02-13-2005, 07:54 PM
still, that doesn't explain why his bullets were way over on the other half of the screen. Also, IE does understand !important, but sometimes has issues with it. I was just reading something about it last night.

I think we've overcomplicated the issue. The use of invisible bullets sounds absurd...its another HTTP request, plus 52 bytes = 52 characters of unicode, most lines of text are shorter..right? Try rmedeks way.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum