SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background color to list bullets

    I'm trying to create a list menu with a mouseover effect that changes the background of the list item. But I can't get the background to start before the bullet image.

    any one know if this is possible?

    Idan
    Idan Arbel
    Arbel Designs
    Email/msn idan@arbel-designs.com
    http://www.arbel-designs.com

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think you need to use
    Code:
    li { list-style-position: inside; }
    , but if I remember correctly IE6 doesn't like this. Try it out though and see what happens.

  3. #3
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried...didn't get it to work well.

    I did this:

    margin-left:-30px;
    padding-left:30px

    but ie6 didn't like it. works great in firefox.

    Idan
    Idan Arbel
    Arbel Designs
    Email/msn idan@arbel-designs.com
    http://www.arbel-designs.com

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Without seeing the full working example, I'm not entirely sure what you're after but I'd suggest using a background image and adjusting the padding instead of using list-style-image.

    I put this together to help someone elses problem but it probably applies to this situation as well?

    http://www.dave-woods.co.uk/wp-conte...08/index3.html

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hmm, a background image is probably a more robust method.

    arbel, this could also be something to do with you not setting default padding and margins to 0. This works identically in IE6 and Firefox:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
      <title>Badger</title>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
      <meta name="generator" content="Crimson Editor">
      <style>
      ul, li {
    padding:0;
    margin:0;
    }
    li {
      list-style-position:inside;
      background-color:red
    }
      </style>
      <script type="text/javascript">
      </script>
    </head>
    
    <body>
      <ul>
        <li>Item one</li>
        <li>Item one</li>
        <li>Item one</li>
        <li>Item one</li>
        <li>Item one</li>
        <li>Item one</li>
      </ul>
    </body>
    </html>

  6. #6
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks,

    I'll take a look.

    Idan
    Idan Arbel
    Arbel Designs
    Email/msn idan@arbel-designs.com
    http://www.arbel-designs.com

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Raffles, you're also going to need a full doctype

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    There's nothing wrong with that doctype. It will trigger standards mode in everything except IE5/Mac, which is dead and nobody should care about.

    See the table here: http://hsivonen.iki.fi/doctype/

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That link does also state though that omitting the URI from the doctype triggers almost standards compliance mode for some browsers

    Firefox, Safari and Opera 7.5 (and later) also have a third mode known as “the Almost Standards mode”, which implements the vertical sizing of table cells traditionally and not rigorously according to the CSS2 specification.
    EDIT: although the table at the bottom seems to contradict that statement. Either way, it's there for a reason so I'll continue use the full one.

  10. #10
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, omitting the URI will trigger Almost Standards Mode in old versions of Opera, Konqueror and IE/Mac. Opera users tend to know a bit more about browsers and update it regularly, so ignoring Opera 7.x is sensible, and IE/Mac like I said before is as good as dead to me.

    The table doesn't contradict the statement. You can trigger Almost Standards Mode in Mozilla and Safari but only with a Transitional doctype, which seems sensible to me, since Traditional doctypes are for people who are still stuck in the 1990s.

    At the end of the day I suppose using the full doctype is sensible, I just use that one because it's the only one I know off by heart!

  11. #11
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To be honest, even though I'm coding web pages everyday, I wouldn't even know as much as the first part of the doctype off the top of my head.

    I've got a template setup which I always use as a starting point which includes it and if I ever didn't have access to that then I've got them noted on my website or could just copy and paste from another site.

    I'm sure there's a few designers who do know them off the top of their head but I'm sure most just copy and paste or use a template

  12. #12
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    To be honest I didn't even know what all the bits in the doctype meant until I read something that broke it down, about it a couple of months ago. Can't remember where it was, but there's an explanation here: http://www.autisticcuckoo.net/archiv...t-type-headers

  13. #13
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, interesting read, there's also an article by Zeldman on alistapart which many might find useful

    http://www.alistapart.com/stories/doctype/

    Sorry for taking this thread off topic


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
  •