Grow your CSS skills. Land your dream job.

Trouble creating Vertical unordered list equal width items

  • # June 18, 2013 at 3:43 pm

    I’m attempting to create a vertical CSS unordered list menu, where the items all have the same width. I’m modifying someone else’s code to do this, because I couldn’t find what I was looking for online. But so far I have not been successful.

    I can’t get the items to expand to the same width. I also noticed there’s extra space to the left side – like padding or margin – that I can’t seem to account for. Possibly in the mobileMenu div, but there isn’t one there.

    [Here’s my Codepen.](http://codepen.io/downcasteyes/pen/mwaCD “Here’s my codepen”)

    Can someone take a look and give me some pointers? I’m sure its something obvious, and I’ve just been staring at it too long to realize it. =(

    # June 18, 2013 at 3:51 pm

    #Menu ul {

    padding:0; < ====
    }

    #Menu ul li a {

    display:block; < =====
    }

    Try adding these in.

    # June 18, 2013 at 4:17 pm

    Omg, that was it! I had fiddled with those too. But not with them together.

    I changed the margin to 2px; and that tightened up the spacing between the items. I updated the Codepen, if you want to take a look.

    Thanks!

    # June 18, 2013 at 4:55 pm

    I figured out where that margin was coming from. It’s actually the indent for where list style types would be. It’s not showing up on my Codepen, but it is showing up on my ASP page. Even though the list-style-type is set to “none”, and the list style is not showing up, the space is still there.

    Any ideas why that might be?

    # June 18, 2013 at 5:05 pm

    lists and list items usually have some sort of default margin or padding.

    It’s not a requirement but it’s common to do something like this

    ul, li {
    margin:0;
    padding:0;
    }

    as part of your css reset.

    You can always change them later in your CSS if necessary.

    As for your live page, I’d have to see it in action before diagnosing exactly what the issue is.

    # June 18, 2013 at 5:05 pm

    I think it was related to my IE browser’s compatibility view mode. My doctype is < !DOCTYPE html>, but our site is old and I constantly have to hit the Doc mode button to fix page views. Refreshed and restarted my browser a few times and it seems to be okay now. Stupid IE. =)

    # June 18, 2013 at 5:07 pm

    All the work I’m doing is on a test site and not in production, hence the Codepen. =) Sorry!

    # June 18, 2013 at 5:10 pm

    You also have this

    margin: 30px; /* height distance between tabs */

    as a property of your li items.

    Although that comment is true it also means 30px on either side as well as top
    and bottom.

    If you want to change any of them you can do it like this:

    margin: Tpx Rpx Bpx Lpx.

    Obviously you would have t substitute real numbers instead of those letters but the order is

    **T**op **R**ight **B**ottom **L**eft

    # June 18, 2013 at 5:14 pm

    Yeah, I changed that 2px about an hour ago. =)

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

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