Setting inside size of a element

[jjb123]

Hi everyone, I am trying to make a div button with text in it that has a background image that is an exact width and height. I want the button to display the whole background image and the text inside the div. The problem is that when I don't set padding not the whole image is display, just the text and the background image clipped to the text's width and height but when I do set padding the padding notices the text and throws off the measurements. Basically I want a css rollover button with a width and height that can't change no matter the text in the div and that displays the whole background image. And ideas? Thanks.

[jlhaslip]

Show us what code you have come up with so far and it will be easier to assist you.

[jjb123]

Ok,Here is the CSS

.tabcontainer {width: 790px;height: 36px;border: solid;border-width: 1px;border-left: 0px;border-right: 0px;margin: 0px;padding: 0px;}.tabcontainer ul {margin: 0;float:left;}.tabcontainer ul li {display: inline;}.tabcontainer ul a.button:link {background-image: url(images/middle.gif);padding: 18px 50px 18px 50px;}.tabcontainer ul a.button:visited {background-image: url(images/middle.gif);padding: 18px 50px 18px 50px;}.tabcontainer ul a.button:hover {background-image: url(images/middlehover.gif);padding: 18px 50px 18px 50px;}.tabcontainer ul a.button:active {background-image: url(images/middle.gif);padding: 18px 50px 18px 50px;}

And here is how it would be displayed

<div class="tabcontainer"><ul><li><a href="index.php">Link1</a></li><li><a href="index.php">link2</a></li></ul></div>

I want that padding in the css to not even notice the text in the div so that it is a fixed size and displays the entire background, but it this is not possible is there another way to do it? I really don't want to make 100 rollover images for the site.Thank you.

[jlhaslip]

http://jlhaslip.trap17.com/samples/menus/

[jjb123]

Thanks, thats perfect