Hiding a List Item in IE???

I'm trying to shrink the size of the "Archive" list on the right side of the page.  If you are looking at this blog in firefox you'll see what I mean. (minus the link to "Full Archive" I intend to put there.)  Below is the CSS override that works in firefox. If anyone knows how to make this work in IE let me know.  If your answer involves "make IE fully support CSS 2.0" then your not helping. 

#sidebar-a a#_ctl0__ctl0__ctl0__ctl0_BlogSideBar1__ctl0__ctl1__ctl0_Categories__ctl20_Link{
color: white;

Comments (11)
  1. geoff.appleby says:

    In IE you should just need to say ‘display: none;’ shouldn’t you?

  2. François Battail says:

    The position: absolute is completely broken in IE so it’s not a good idea to rely on it. "left:-999" is an incorrect statement according to CSS grammar (a unit is mandatory when the value is not 0), it should be:

    left: -999px

    So try something like that :



    position: relative ;

    left: -9999px ;

    height: .1px ;


    The height: .1px is used to cancel the vertical spacing between links (because of the display: block).

    Note that the links will not be hidden to screen readers. This CSS technique is mostly used to "show" to screen readers hidden links to visual browsers like "skip to content".

    Hope it will be useful.

  3. admin says:

    Are you hiding it because it pushes your other links too far down the page? Instead of hiding it, do you think it would be better to put it at the bottom of the left column?


  4. Gary Owen says:

    How about using the display property.

    #sidebar-a a#_ctl0__ctl0__ctl0__ctl0_BlogSideBar1__ctl0__ctl1__ctl0_Categories__ctl20_Link{




  5. Bjoern Graf says:

    geoff is right with display: none; visibility: hidden; will not render the element content but leave the box in the flow, e.g. push following stuff around – even though position: absolute; will remove it.

    — b.gr

    P.S.: A full DOCTYPE (including the URIreference, see [1]) will make the rendering behaviour of IE and FX more predictable as it would switch both engines to strict mode 🙂

    [1] http://www.w3.org/QA/2002/04/valid-dtd-list.html

  6. David Betz says:

    Why isn’t <li class="inv">stuff</inv> with .inv{ display: none; } working?

  7. Josh Ledgard says:

    Scott: Not sure how I could I put it at the bottom of the left column? That would get me 80% of what I’m after. (Trying to remove clutter) With this theme (the only 3 column blog layout) the "Archive" section doesn’t have a DIV around it. So I can’t move just it around like I could with the search box or subscription links.

    Really, having this as well as the calendar feels redundant. And I like the calendar. 🙂

    BTW: IMO, the "E-mail" subscription options should show up for non-subscribers to get them to sign up. I added it to the Subscription Options on the right side of my blog. And I’m not sure what the "Contact" link has to do with subscription options. It fails the "one of these things is not like the other" test.

  8. David Betz says:

    Of course my answer is for Standards more, not Quirks mode. But I have no respect for Quirks programmers, so that’s appropriate.

  9. Bjoern Graf says:

    Follow up:

    a) David: Quirks mode doesn’t do anything to the display behaviour or class usage

    b) saving the page with IE results in an UNKNOWN rule for the #sidebar-a a#* selectors. Seems like the CSS parser doesn’t like an underscore as first character for an id…

  10. Jemm says:


    Display: none;



    <li Style="Display:none;">Second</li>



  11. Bjoern Graf says:

    Last comment on this 🙂

    IE is right (as in: follows the standard) in ignoring IDs that start with an underscore. To quote the relevant part of the HTML standard:

    "D and NAME tokens must begin with a letter ([A-Za-z]" [1]

    So, this seems to be either a bug in ASP.NET or the control used by CS…

    — b.gr

    [1] http://www.w3.org/TR/html401/types.html#type-id

Comments are closed.

Skip to main content