Enlarging background for menu item

HTML & CSS
1

Hello, is there a way to enlarge the background of a particular menu item with CSS?

I have 4 menu items, when you hover over them there is a background image displayed, the 3rd item gets the background image cut off because the text is less characters than all the others. I was wondering if there is a quick and easy way to fix this other than adding   after the text, that just seems a crappy solution.

thanks.

2

Hi,

If the menu items need to fit the background then they should be sized to fit.

It all depends how your menu items are placed though as to how you can add dimensions. If the items are display:inline then you can’t add dimensions and you would need to float them or use inline-block.

There is no way to make an element take note of its background image you just have to size the element to fit if that is important to the effect.

We’d need to see the code/page to give more specific advice.

3

Paul, thanks for the explanation. I believe I’ll adjust the padding-right of the menus for the time being.

thanks a lot.

4

if I get the issue straight is that you want the height of the LIs in the menu list to be congruent and equal to the tallest LI, correct ?

If you dont mind cutting support for legacy IE, this could work:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
	<head>
		<title></title>
		<style type="text/css">
.nav li {display:inline-table;    height:100% ;width:25%; margin:0; word-spacing:0;}
.nav  { display:table ; border: 1px solid red; width:100%; padding:0; margin:0;
word-spacing: -.5em;  }
.nav li a{display:table; height:100%; width:100%;  padding:10px;   background: pink;margin: 0; -moz-box-sizing:padding-box; word-spacing: 0; letter-spacing: 0;}
		</style>
	</head>
	<body>
<ul class="nav">
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item longer sample item</a></li></ul>
	</body>
</html>