The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

How To Remove Border?

  • # March 1, 2013 at 6:48 am

    Do you know how to do this please?
    Because I’ve ages trying work this out

    There’s a white border
    between the “sample-category-2” and the “All Products” menu

    How do I remove it please?
    because I don’t want a gap between the two menu’s

    Many Thanks and Best Regards


    # March 1, 2013 at 8:16 am

    Not in Chrome there isn’t.

    # March 1, 2013 at 9:04 am

    This reply has been reported for inappropriate content.

    Indeed… There is one below each link though (you can see it if you hover it) and it’s causing the weirdness Paulie_D pointed out as well, try global.css line 523.

    # March 1, 2013 at 10:00 am

    Many Thanks for both your great help
    I’ve fixed the bottom border.

    Sorry I didn’t say
    The gap only show when the right side
    hover menu is next to the active menu

    Many Thanks again your time and help :)

    # March 2, 2013 at 6:39 am

    It’s ok I think I’ve solved it now

    # March 2, 2013 at 7:04 am

    This reply has been reported for inappropriate content.

    It’s marked as solved? There is no border in Chrome, Firefox and IE10. What browser do you use when you see the border/gap thingy?

    # March 3, 2013 at 1:40 pm

    Thanks once again, I’m most grateful for all your help and time.
    I found it was.

    My google chrome browser was on 90% Zoom
    and that’s what was causing the gap’s
    in the menu.

    Do you know any way to fix this for users
    who have browser on zoom 90%

    Many Thanks again

    # March 3, 2013 at 2:24 pm

    To start with…your list items (li) should have the same height as your list (ul)…then set the background to your li (ul) to the same as the li (or don’t set an color at all).

    # March 3, 2013 at 2:30 pm

    This reply has been reported for inappropriate content.

    I managed to remove that gap removing some css like all the overriding display properties you have on those list items, but now I can’t reproduce it and I don’t know what I did before… no offense, your css is a mess :P

    Try figuring out what exactly you want for the list items to do… float? inline-block? Inline-blocks tend to give problems when zooming because of the hacky way to remove the white-space gaps.

    # March 3, 2013 at 2:39 pm

    Inline block works fine if you

    ul {

    li {
    font-size: whatever;

    Very simple and works like a charm.

    # March 3, 2013 at 3:57 pm

    This reply has been reported for inappropriate content.

    Yeah but I’ve heard IE or some browser got issues with font-size: 0… forgot what it was :P

    # March 4, 2013 at 10:10 am

    Thank you CrocoDillion & Pauline_D
    for both your great help :)

    # March 4, 2013 at 10:11 am


    Ahem! :)

    # March 4, 2013 at 2:26 pm

    This reply has been reported for inappropriate content.

    LOL! :D

    My mother-in-law calls me Dillion -_-

Viewing 14 posts - 1 through 14 (of 14 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