By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,041 Members | 1,734 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,041 IT Pros & Developers. It's quick & easy.

Why isnt padding-right working???

P: n/a
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;
}

Sep 29 '06 #1
Share this Question
Share on Google+
11 Replies


P: n/a
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;}


Sep 30 '06 #2

P: n/a
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.png);
/* background-image: url(images/body_side_bg.png); */
...
border: 1px solid red;}
Adding those ZZZ may cause the whole thing to fail.

--
-bts
-Motorcycles defy gravity; cars just suck.
Sep 30 '06 #3

P: n/a
jo***********@yahoo.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.
Sep 30 '06 #4

P: n/a
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***********@yahoo.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.
Sep 30 '06 #5

P: n/a
jo***********@yahoo.co.uk wrote:
[top-posting corrected]
Harlan Messinger wrote:
>jo***********@yahoo.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
Sep 30 '06 #6

P: n/a

"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?
Sep 30 '06 #7

P: n/a
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.
Sep 30 '06 #8

P: n/a
"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.
Sep 30 '06 #9

P: n/a
"Beauregard T. Shagnasty" <a.*********@example.invalidwrote:
>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
Sep 30 '06 #10

P: n/a
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.)
Sep 30 '06 #11

P: n/a
Alan J. Flavell wrote:
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.
Ok. I do remember reading somewhere, some time ago, that some browsers
would ignore all bits if one bit was wrong. Then again, it *was* some
time ago...

--
-bts
-Motorcycles defy gravity; cars just suck.
Sep 30 '06 #12

This discussion thread is closed

Replies have been disabled for this discussion.