Grow your CSS skills. Land your dream job.

li adding unecessary space

  • # January 28, 2013 at 9:23 pm

    Hello, just recently found this site. It’s neat!

    So, I have an annoying problem:

    My lists add unwanted spacing in between the lines. I think it wants to ‘equal it out’ – Whatever it is, I want to get rid of it.

    Orange is the background color for the

      list, on a yellow div background, so you can see better.

      The HTML (look at source, I don’t know how to make it appear as code, it automatically formats):

      • (1) 5800PIR-RES Wireless Motion Detector
      • (3) 5816 Standard Wireless Door/Window Transmitters with Magnet and Spacer
      • (1) GSM Module
      • (1) 5834-4 Wireless Keychain Remote
      • (1) RJ31 jack and cord set
      • (1) Rechargeable Back-up Battery Pack
      • (1) 9VAC Transformer
      • (1) LYNX Touch Programming Guide
      • (4) Alarm Warning Decals
      • LYNX Touch User Guide

      The CSS:

      .productwrapper li
      {

      width: 48%;
      height:100%;
      float: left;
      margin-right: 4px;
      font-size:11px;
      line-height:110%;
      background-color:orange;

      }

      The Problem ( picture):
      http://imageshack.us/photo/my-images/9/67490038.png/

      See the annoying space? Tried some things such as making the

      • tags on the same line,
        didn’t work.

        It’s on wordpress in the text edit tab for the page, in case that makes a difference.

    # January 28, 2013 at 9:43 pm

    @Gingerbread Can you make a Codepen so it’s easier for us to see the problem?

    # January 28, 2013 at 9:47 pm

    @srig99, how do you do that? I clicked the ‘code’ button when I highlighted the html, but it formatted anyways.

    # January 28, 2013 at 9:53 pm

    @Gingerbread You don’t make a Codepen on the Forums itself. Go on [Codepen](http://codepen.io/ “Codepen”) and click New Pen at the top. Just type in your code and then save it, and share the link with us. Here’s a tutorial if you need any help: [Codepen Tutorial](http://css-tricks.com/forums/discussion/comment/87079 “Codepen Tutorial”). Tell me if you need any help!

    # January 28, 2013 at 9:54 pm

    @Gingerbread Also, if you need to type code into the comment box on the forums, just use regular code tags or just click “Code” on top of the comment box.

    # January 28, 2013 at 10:16 pm

    OK, thank you. The code tag seems to only work on the CSS for some reason, not the HTML. But that doesn’t matter.

    I made a codepen: http://cdpn.io/khsgF

    Cool thing! Can you help?

    # January 28, 2013 at 10:41 pm

    @Gingerbread I just made this: http://codepen.io/srig99/pen/wdqpE using the tutorial that I found here: http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/.

    # January 28, 2013 at 10:53 pm

    @srig99

    Hello, thanks for the help!
    It actually works if I restrict the size to the original box I had, too, but once I replace it with my li list it does the same thing!

    # January 28, 2013 at 10:55 pm

    @Gingerbread So it works for you? All good? Anything else?

    # January 28, 2013 at 10:58 pm

    Not quite, it doesn’t work with my line items and still divides it in a strange way. I actually figured out now how to link to the original code I had, it’s here:

    http://codepen.io/anon/pen/khsgF

    I think it might have something to do with the ‘strong’ tags?

    # January 28, 2013 at 11:11 pm

    @Gingerbread Well, here’s the one without strong tags: http://codepen.io/anon/pen/crifA and here’s the one with: http://codepen.io/anon/pen/jApou. They look fine to me. What about you? Is this what you wanted?

    # January 28, 2013 at 11:17 pm

    @srig99
    First of all, thank you for your patience.
    Second of all, the pages you linked claim there’s nothing there. :(

    # January 28, 2013 at 11:18 pm

    @Gingerbread Try now. Sorry for that!

    # January 28, 2013 at 11:22 pm

    Hello,
    @srig99
    Can you put it in a box with this size:
    width:395px;
    height: 140px;

    It seems to be messing up with that size.

    # January 28, 2013 at 11:26 pm

    @Gingerbread Yeah, this is what I have: http://codepen.io/anon/pen/GJjxc. I don’t think this is possible with those dimensions because the ul needs more space to fit and also, if I try using overflow: scroll, it still needs more space (http://codepen.io/anon/pen/CymiH). So I think you need more space in order to successfully handle this.

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".