Trouble creating Vertical unordered list equal width items

[owlinargyle]

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. =(

[Paulie_D]

#Menu ul {

padding:0; <====
}

#Menu ul li a {

display:block; <=====
}

Try adding these in.

[owlinargyle]

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!

[owlinargyle]

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?

[Paulie_D]

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.

[owlinargyle]

I think it was related to my IE browser’s compatibility view mode. My doctype is , 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. =)

[owlinargyle]

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

[Paulie_D]

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

[owlinargyle]

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

[Author]

Posts