SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    I hate resets... (reset problem with list)

    http://mayacove.com/dev/test_ul.html

    can't get bullets to appear on this list.. they only appear if I hide reset..
    (always have this problem with lists with resets... )

    would appreciate help/suggestions.. thank you..

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Just change your reset or override it with something like ul.class li {}.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Forinstance I always go with whatever is used most in whatever site. My site I'm working in now has more lists with no bullets and no margins/padding. So I remove both with my reset and then when I need it to have them I simple add class default to my ul.

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Hi Maya,

    yes, you've found one of the weak spots of resets! This is why many of us developers who DON'T use this type of reset make our own, as Eric said. We keep ours simpler and we only made those rules because we found we were repeating ourselves too much.

    So your reset has
    li{list-style: none;}

    You added
    ul.inner {border:0; list-style:circle; }

    Now I also remove list-style, but not from the li. I remove it from the ul. But whatever, like Eric I usually have more lists without padding and bullets than lists with them, but when I DO want bullets, I have to do this:

    Code:
    ul.bullets {
      margin-left: 1em; /*I add in some bullet margin*/
    }
    ul.bullets li {
      display: list-item;
      list-style-type: circle;
    }
    See, I had to explicitly add back in the display: list-item setting. This is what li's are defaulted to (before your reset). Removing list-style seems to also set li's from display: list-item to regular plain old "display: block" (since this is also their default). So you have to set the display: list-item back in.

  5. #5
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    who decided all of a sudden that we need resets anyway? I think they're really a nuisance.. b/c now at a lot workplaces they make you use them.. funny how some bad habits spread fast... I guess this goes for development just like it goes for so many things in life...

    thank you all for yr responses.. yes I hadn't noticed that list-style:none was set in reset for both ul and li... (at work recently I altered reset b/c of a related problem and they told me noooooooo.. don't touch the reset... stupid...)

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    who decided all of a sudden that we need resets anyway?
    Someone who uses them I guess : )
    I think they're really a nuisance..
    Yes
    b/c now at a lot workplaces they make you use them.. funny how some bad habits spread fast...
    That sucks. : ( I would probably howl in protest if my place of employment told me what kind of code I had to write (unless, of course, they were telling me to write valid, accessible, cross-browser code, lawlz).

    Resets can cause all sorts of problems and make code bigger. They are best used sparingly by the developers who find them useful. But if everyone else is writing on the same project assuming there IS a reset, then yeah, you're stuck with it.

    yes I hadn't noticed that list-style:none was set in reset for both ul and li...
    The simplest setup is just to remove it from the ul, because unless you're in Quirks mode, it will cascade down to the li just fine.
    If you're in Quirks Mode then you'd need to remove it for both... at least that's what I remember : )

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hello, good morning

    I do margin-left:40px as I don't want that growing to the right. And default is actually list-style:disk;

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Afternoon : )
    And default is actually list-style:disk;
    But Maya wanted circle.

    I only mentioned the default display states of the li's: block, and list-item.

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Afternoon : )

    But Maya wanted circle.

    I only mentioned the default display states of the li's: block, and list-item.
    Oh sorry - missed that - my bad.

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    My advice -- cut the unneccessary garbage that has NOTHING to do with being a "reset" out of your alleged "reset" -- that's not a reset, that's a framework.

    If you are doing more than this:
    Code:
    /* null margins and padding to give good cross-browser baseline */
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    }
    
    img,fieldset {
    	border:none;
    }
    You're wasting your time.

    It's not that resets are bad, they are really handy at getting browsers to behave consistently cross-browser. It's just the one you are using is fat bloated unnecessary rubbish.

  11. #11
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I wouldn't vilify the resets. They are handy when used properly ( whether they seem bloated, general or trim). Yeah, there are ways to make them either more or less SPECIFIC, but you have to keep in mind what YOU, specifically, are trying to do in THAT SPECIFIC site.

    *{ margin:0, padding:0; style: none;} is a reset.
    So is ul{margin:0; padding:0; style: none;}.


    The first is really broad and somewhat redundant despite its brevity; The latter is really specific. Neither, however is technically wrong. You just have to know that you will need to style (set) everything you have reset by hand.

    Anyhow, the lesson here is to remember that resets are GLOBAL! If you only wanted a specific UL touched for example, don't reset the UL tag... write a class or ID for that singular use. On the other hand if you find yourself changing the style of every UL... and feel it might be useful to start from a uniform baseline then a reset of the UL is for you.

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Crusty
    My advice -- cut the unneccessary garbage that has NOTHING to do with being a "reset" out of your alleged "reset" -- that's not a reset, that's a framework.
    The OP can't. It's insisted upon at $work.

    Quote Originally Posted by Dresden
    Neither, however is technically wrong.
    Except removing padding from everything really sucks for form accessibility in some browsers, PLUS the fact that you can't then later add it back in.


Bookmarks

Posting Permissions

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