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

    This reply has been reported for inappropriate content.

    @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

    This reply has been reported for inappropriate content.

    @Gingerbread You don’t make a Codepen on the Forums itself. Go on 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. Tell me if you need any help!

    # January 28, 2013 at 9:54 pm

    This reply has been reported for inappropriate content.

    @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

    This reply has been reported for inappropriate content.

    @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

    This reply has been reported for inappropriate content.

    @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

    This reply has been reported for inappropriate content.

    @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

    This reply has been reported for inappropriate content.

    @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

    This reply has been reported for inappropriate content.

    @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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed