Why isnt padding-right working???

I want to put a simple padding on the right hand side of my text
container to stop the text from overflowing out of the box. Ive added
a padding-right rule and it refusing to recognise it in either IE or
Firefox. Ive done exactly the same with the left padding and thats
worked fine. Whats the crack???

http://www.ainewmedia.co.uk/css_page.htm

#bodyContent {
font-family:Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/body_side_bg.png);
background-repeat: repeat-y;
padding-top: 10px;
padding-left: 15px;
padding-right: 10px;
width: 750px;
font-size: 12px;
line-height: 20px;
}

I think you're being confused by the background image. Comment that out and
add a border around #bodyContent and see what happens:

#bodyContent{
....
ZZZbackground-image: url(images/body_side_bg.png);
....
border: 1px solid red;}

john_aspinall (AT) yahoo (DOT) co.uk wrote:

I want to put a simple padding on the right hand side of my text
container to stop the text from overflowing out of the box. Ive added
a padding-right rule and it refusing to recognise it in either IE or
Firefox. Ive done exactly the same with the left padding and thats
worked fine. Whats the crack???

http://www.ainewmedia.co.uk/css_page.htm

#bodyContent {
font-family:Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/body_side_bg.png);
background-repeat: repeat-y;
padding-top: 10px;
padding-left: 15px;
padding-right: 10px;
width: 750px;
font-size: 12px;
line-height: 20px;
}

Your padding is there. Add

border: thin solid red;

above and you'll see the extent of the DIV that lies inside the border,
*including* the padding.

The width of the bodyContent DIV is 750px, and the text fills that
width, which is evidently also about the width of the rectangle in the
background image. The right padding is to the right of that. Padding
isn't part of the width, it's in addition to the width. Change the width
to 730px and see what happens.

Ahh right, so if your setting 10px right padding to a 750px width
block, the padding lives outside of the block, therefore making its
total widith 760px? I thought padding lived within the content.

Thanks.

Harlan Messinger wrote:

john_aspinall (AT) yahoo (DOT) co.uk wrote:
I want to put a simple padding on the right hand side of my text
container to stop the text from overflowing out of the box. Ive added
a padding-right rule and it refusing to recognise it in either IE or
Firefox. Ive done exactly the same with the left padding and thats
worked fine. Whats the crack???

http://www.ainewmedia.co.uk/css_page.htm

#bodyContent {
font-family:Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/body_side_bg.png);
background-repeat: repeat-y;
padding-top: 10px;
padding-left: 15px;
padding-right: 10px;
width: 750px;
font-size: 12px;
line-height: 20px;
}

Your padding is there. Add

border: thin solid red;

above and you'll see the extent of the DIV that lies inside the border,
*including* the padding.

The width of the bodyContent DIV is 750px, and the text fills that
width, which is evidently also about the width of the rectangle in the
background image. The right padding is to the right of that. Padding
isn't part of the width, it's in addition to the width. Change the width
to 730px and see what happens.

john_aspinall (AT) yahoo (DOT) co.uk wrote:
[top-posting corrected]

Harlan Messinger wrote:
john_aspinall (AT) yahoo (DOT) co.uk wrote:
I want to put a simple padding on the right hand side of my text
container to stop the text from overflowing out of the box. Ive added
a padding-right rule and it refusing to recognise it in either IE or
Firefox. Ive done exactly the same with the left padding and thats
worked fine. Whats the crack???

http://www.ainewmedia.co.uk/css_page.htm

#bodyContent {
font-family:Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/body_side_bg.png);
background-repeat: repeat-y;
padding-top: 10px;
padding-left: 15px;
padding-right: 10px;
width: 750px;
font-size: 12px;
line-height: 20px;
}
Your padding is there. Add

border: thin solid red;

above and you'll see the extent of the DIV that lies inside the border,
*including* the padding.

The width of the bodyContent DIV is 750px, and the text fills that
width, which is evidently also about the width of the rectangle in the
background image. The right padding is to the right of that. Padding
isn't part of the width, it's in addition to the width. Change the width
to 730px and see what happens.

Ahh right, so if your setting 10px right padding to a 750px width
block, the padding lives outside of the block, therefore making its
total widith 760px? I thought padding lived within the content.

Nope: http://www.w3.org/TR/CSS21/box.html#box-dimensions

"Beauregard T. Shagnasty" wrote

Adding those ZZZ may cause the whole thing to fail.

Really? I do that all the time and I've never had a problem in either IE, FF
or even Dreamweaver. When have you run into problems?

"Beauregard T. Shagnasty" wrote

Whether it works or not would be up to the browser. My understanding is
that browsers have the option to ignore, or disregard, some or any or
all parts of CSS if there is an error. Depends on the browser, I
suppose.

Adding ZZZ or anything else to make the element invalid is a great way to
quickly test its effect on the page. Both FF and IE will ignore an invalid
element.

Developers who don't know this trick should give it a try. It is much more
efficient than /*...*/ during development, however I wouldn't leave it in
once I published the page.

"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote:

I was pointing out that your post said to "comment out" then added ZZZ
to the attribute. A legal comment mark in CSS is to surround the desired
part with /* and */

CSS has no "attributes", and the OP did not say it did.

Whether it works or not would be up to the browser. My understanding is
that browsers have the option to ignore, or disregard, some or any or
all parts of CSS if there is an error.

Your understanding is wrong. The behaviour for parsing invalid property
names is normatively defined and must result in ignoring the single
declaration only:
http://www.w3.org/TR/CSS21/syndata.html#parsing-errors

--
Spartanicus

On Sat, 30 Sep 2006, Beauregard T. Shagnasty wrote:

Whether it works or not would be up to the browser. My understanding
is that browsers have the option to ignore, or disregard, some or
any or all parts of CSS if there is an error. Depends on the
browser, I suppose.

Refer to e.g http://www.w3.org/TR/CSS21/syndata.html#parsing-errors
for details. For some kinds of error it is mandatory to ignore the
erroneous part. Of course, MSIE ignores this mandate when it feels
like it, just like it seems to ignore mandatory requirements of
various other IETF and W3C interworking specifications, but the rules
apply to proper web-compatible browsers.

(I referred to css 2.1 because it's the nearest thing we have to a
current specification, despite its status as w3c. Consult one of the
other CSS specifications if you prefer.)