Padding pushing background image outside element

HTML & CSS
1

i have a div that is 207 wide… the background image is 207px wide and the content is 197px wide… I put 5px padding, and now the background image is pushed outside the div so that it starts to repeat… it’s not suppose to do this right? can anyone tell me how to put the padding on the inside of the div, so the content is a certain distance from the element edges but so that it doesn’t push the background image outside the bounds of the div, thanks.

2

Hmm, that should work. The background image can’t be pushed outside its container. Something else must be going on. Could you show us your code, or a link?

3

pushed was the wrong word… what I meant was - the padding was making the div bigger or something like that, so that the background image starts to repeat on the bottom and right side.

4

well, there’s absolutely nothing in the div, I removed everything and the problem is still there! here is the css for the div

#floatmenunow {
font-family: Verdana;
font-size: 12px;
position: absolute;
top: 630px;
left: 50%;
right: 50%;
width: 207px;
height: 435px;
padding:5px;
margin:5px 0 -461px 277px;
background:url(images/config-menu.jpg);
}

5

here is sample page, so you can see what I mean - scroll down to see menu on right:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>Menu Test - Company Name</title>
<head>
<style>
#floatmenunow {
font-family: Verdana;
font-size: 12px;
position: absolute;
top: 630px;
left: 50%;
right: 50%;
width: 207px;
height: 435px;
padding:5px;
margin:5px 0 -461px 277px;
background:url(http://img823.imageshack.us/img823/7334/configmenu.jpg);
}
</style>
</head>
<body>

<div id="floatmenunow">
</div>

</body>
</html>
6

You need to subtract the padding from the width and height (as padding adds to the set width of the element). So they should be:

width: 197px;
height: 425px;
7

well, I’ll be a woodpecker in a snowstorm, I didn’t know it worked like that… since the padding goes inward instead of outward.

8

“Learn by doing”, they say. :smiley: It’s an important concept, though. I’m glad I wasn’t around when people were designing for older browsers pre-IE6, as even browser makers got confused about this and did things all wrong—some including padding in the width and some not. :eek:

And I’ve just learned something about woodpeckers in snowstorms! :lol: