With so many more technical questions on this forum, it's actually embarrassing to ask, but....I'm new to CSS and have started to learn how to make menu's. (I've left a link below). In my sample_2 menu, I cannot seem to get the entire button block background to change color when it's scrolled over. It's as though there are about 2 or 3px of space to the left of buttons 2, 3, and 4 that don't change. I'm using the Eric Meyer's reset and have pasted below the menu what I did with CSS. Help is appreciated.
you could add a left margin of -0.25em to the li
or, change from display: inline-block to float: left (and then contain them adding overflow: hidden; to the ul)
It's the whitespace between inline-block elements (think of the elements as words and the whitespace as the space between those words). There are lot's of ways to remove that. Some require modifying markup like adding comments to remove any whitespace between the elements (a comment between each li closing tag and the next li opening tag), some are done in CSS, like margin-right: -0.25em; on the li, or adjusting letter-spacing, word-spacing, font-size, maybe more on the ul element.
EDIT: Of course I'm typing too slow again, but @wolfcry911, right margin works better then left margin ;)
My personal favorite, mostly because it's arguably the simplest, is setting font-size: 0; on the parent, then resetting font-size on the inline-block elements.
Edit: Looks like I'm late to the party, but I'll leave this up as you may find the linked thread helpful.
With so many more technical questions on this forum, it's actually embarrassing to ask, but....I'm new to CSS and have started to learn how to make menu's. (I've left a link below). In my sample_2 menu, I cannot seem to get the entire button block background to change color when it's scrolled over. It's as though there are about 2 or 3px of space to the left of buttons 2, 3, and 4 that don't change. I'm using the Eric Meyer's reset and have pasted below the menu what I did with CSS. Help is appreciated.
http://webpractice.us/Project_Menu/menu.html
Thanks, K
you could add a left margin of -0.25em to the li or, change from display: inline-block to float: left (and then contain them adding overflow: hidden; to the ul)
It's the whitespace between inline-block elements (think of the elements as words and the whitespace as the space between those words). There are lot's of ways to remove that. Some require modifying markup like adding comments to remove any whitespace between the elements (a comment between each li closing tag and the next li opening tag), some are done in CSS, like
margin-right: -0.25em;on the li, or adjusting letter-spacing, word-spacing, font-size, maybe more on the ul element.EDIT: Of course I'm typing too slow again, but @wolfcry911, right margin works better then left margin ;)
This is actually a common gotcha. It's caused by the browser-interpreted whitespace between items set to
display: inline-block;.Here's a great topic that details many of the most common fixes to this: http://css-tricks.com/forums/discussion/23105/inline-block-layouts
My personal favorite, mostly because it's arguably the simplest, is setting
font-size: 0;on the parent, then resettingfont-sizeon the inline-block elements.Edit: Looks like I'm late to the party, but I'll leave this up as you may find the linked thread helpful.
Thanks everyone. Much appreciated.