Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts

    IE and hiding list bullets

    Hi,
    I'm trying to hide the bullets for a certain list on my site.

    In the css:
    Code:
    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:
    Code:
    #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?

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    Berkeley, California Age: 15
    Posts
    398
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Jalenack.com .:. YWDA Founder .:. Rounded Corners Maker 1.1! .:. My Blog
    The hardest thing about teaching is not knowing the right answers, but knowing the right questions - Elisabeth Klein
    Pretty buttons does not a great website make.

  • #3
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    shouldnt adding !important make it work?

  • #4
    Regular Coder
    Join Date
    May 2004
    Location
    Berkeley, California Age: 15
    Posts
    398
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes...but IE doesn't understand !important
    Jalenack.com .:. YWDA Founder .:. Rounded Corners Maker 1.1! .:. My Blog
    The hardest thing about teaching is not knowing the right answers, but knowing the right questions - Elisabeth Klein
    Pretty buttons does not a great website make.

  • #5
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    o, i didnt kno that.

  • #6
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    isn't another option making the list use an "invisible" (transparent gif) bullet?

    im gonna try that now.

  • #7
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    the invisible bullet trick works!

    I did this:
    Code:
    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!

  • #8
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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.

  • #9
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    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.

  • #10
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    hm... this looks harder than it has to be. Usually if I only want a certain list to be non-bulleted I do this:
    Code:
    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?

  • #11
    Regular Coder
    Join Date
    May 2004
    Location
    Berkeley, California Age: 15
    Posts
    398
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Jalenack.com .:. YWDA Founder .:. Rounded Corners Maker 1.1! .:. My Blog
    The hardest thing about teaching is not knowing the right answers, but knowing the right questions - Elisabeth Klein
    Pretty buttons does not a great website make.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •