Why isnt padding-right working???

[john_aspinall]

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.pn g);
background-repeat: repeat-y;
padding-top: 10px;
padding-left: 15px;
padding-right: 10px;
width: 750px;
font-size: 12px;
line-height: 20px;
}

[Bill Norton]

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.pn g);
....
border: 1px solid red;}

[Beauregard T. Shagnasty]

Bill Norton wrote:

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.pn g);

/* background-image: url(images/body_side_bg.pn g); */

...
border: 1px solid red;}

Adding those ZZZ may cause the whole thing to fail.

--
-bts
-Motorcycles defy gravity; cars just suck.

[Harlan Messinger]

jo***********@y ahoo.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.pn g);
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]

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:

jo***********@y ahoo.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.pn g);
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.

[Harlan Messinger]

jo***********@y ahoo.co.uk wrote:
[top-posting corrected]

Harlan Messinger wrote:

>jo***********@y ahoo.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

#bodyConten t {
font-family:Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/body_side_bg.pn g);
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

[Bill Norton]

"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]

Bill Norton wrote:

"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?

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 */

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.

Surely the validator will choke on it. <g It reports:
Property zzzbackground-image doesn't exist:

--
-bts
-Motorcycles defy gravity; cars just suck.

[Bill Norton]

"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.

[Spartanicus]

"Beauregard T. Shagnasty" <a.*********@ex ample.invalidwr ote:

>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