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

    Join Date
    Sep 2012
    Posts
    3
    Rep Power
    0

    Double-Border Issue on Wrapping Divs




    So I have a menu of inline-blocks that wrap (a good thing, there are a lot of them).

    Problem is, if I add a border to each one I get a double border (which is ugly). If I add a border-right to them all and a border-left to the first one, it fixes that problem except for the first li that wraps.

    I can't seem to come up with a solution to this problem that doesn't involve manually wrapping them (which removes the ability to resize the window and have them fit).

    I'd appreciate any help!

    Code:
    menu li {
    	display: inline-block;
    	border-right: 1px solid #c2c9bf;
    }
    menu li:first-of-type {
    	border-left: 1px solid #c2c9bf;
    }
    Code:
    <menu>
    <ul>
    <li class="selected"><a href="?list=all"><img src="/images/icons/cube-empty.png" alt="" class="icon12" /> All</a></li>
    <li><a href="?list=7"><img src="/images/icons/free7.png" alt="" class="icon12" /> Producers</a></li>
    <li><a href="?list=11"><img src="/images/icons/free11.png" alt="" class="icon12" /> Directors</a></li>
    <!-- etc . . . -->
    </ul>
    </menu>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Dec 2004
    Posts
    2,969
    Rep Power
    374
    it doesnt "wrap" for me. if i take off:

    menu li:first-of-type {
    border-left: 1px solid #c2c9bf;
    }

    all that happens is the border-left is removed. if i add in, i get a border to the left. No wrapping seems to occur.

    but i am using only the code here. if it is part of bigger code, maybe the problem lies elsewhere and couple of screenshots would help
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    3
    Rep Power
    0
    ...I agree. There should have been a screenshot attached, but:
    "We are sorry, new user accounts are not permitted to create posts containing URLs. Please review our forum rules for more information."

    So...
    http://
    gravityfreeproductions
    .com/
    hydra-screenshot.png

    You'll notice on the second line, "Post Audio Mixers" has no left border.

    Thanks.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    695
    Rep Power
    441
    Put the border all the way around and add a margin-right: -1px.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    3
    Rep Power
    0
    Hah! Success! And super simple. Thanks!!!

IMN logo majestic logo threadwatch logo seochat tools logo