#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2001
    Posts
    12
    Rep Power
    0

    Angry CSS Image Padding


    I'm trying to renew my website using css.
    i have a list with images inside. something like

    <ul>
    <li><img ... /></li>
    <li><img .../></li>
    </ul>

    my style definition looks like
    img {
    margin:0px;
    padding:0px;
    }

    ul {
    margin:0px;
    padding:0px;
    }

    li {
    margin:0px;
    padding:0px;
    }

    i don't want any pixels between two items (images), but i cannot find the way to do that. i always get some pixels between them...
    anyone can help me? thanks!
  2. #2
  3. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,143
    Rep Power
    2493
    Code:
    <style type="text/css">
    <!--
    img {
    margin:0px;
    padding:0px;
    vertical-align: top;
    }
    ul {
    list-style-type: none;
    margin:0px;
    padding:0px;
    }
    li {
    margin:0px;
    padding:0px;
    }
    -->
    </style>
    I think this should do it (I change the alignment of the image). HTH.

    Cheers,
    Jamie

    >_ skiFFie ? | Twitter

    __________________

    Let the might of your compassion arise to bring a quick end
    to the flowing stream of the blood and tears .....
    Please hear my anguished words of truth.

    __________________
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2001
    Posts
    12
    Rep Power
    0
    still don't work. it seems that <li> height is bigger than img height. i put a example in my site in order you can make a idea what i'm saying. the heigth of both images is 8px...

    have a look at http://www.desorden.net/prueba.html
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Lyon, France
    Posts
    49
    Rep Power
    12
    Make sure the line-height property in the css is the height of your images e.g.

    line-height:8px;

    or

    font:300 8px/8px verdana !important;

    that should squash the extra space..

    Cha'mone OCB
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2001
    Posts
    12
    Rep Power
    0
    thanks ocb. i got it working now in netscape 7.0 and mozilla firebird, but still i have a extra pixel in the bottom of the images...
    any workaround to eliminate them?
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2001
    Posts
    12
    Rep Power
    0
    sorry, what i wanted to say, is that i have an extra pixel on the bottom of the images, but only in internet explorer 6.0.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Lyon, France
    Posts
    49
    Rep Power
    12
    Try to display:inline the li, this *might* just fix the problem.

    But hey, it's IE6 - the only real solution is to start trying crazy things in the css until you find and squash the problem..

    actually, is the space between images being caused by a space between the li tag and the image tag?

    e.g.<li> <img...

IMN logo majestic logo threadwatch logo seochat tools logo