Why isnt padding-right working???

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

john_aspinall@yahoo.co.uk - 30 Sep 2006 00:16 GMT

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;
}

Reply to this Message

Bill Norton - 30 Sep 2006 03:10 GMT

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;}

Reply to this Message

Beauregard T. Shagnasty - 30 Sep 2006 03:16 GMT

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

Signature

-bts
-Motorcycles defy gravity; cars just suck.

Reply to this Message

Bill Norton - 30 Sep 2006 18:09 GMT

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

Reply to this Message

Beauregard T. Shagnasty - 30 Sep 2006 18:27 GMT

>> 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:

Signature

-bts
-Motorcycles defy gravity; cars just suck.

Reply to this Message

Bill Norton - 30 Sep 2006 19:04 GMT

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

Reply to this Message

Spartanicus - 30 Sep 2006 20:46 GMT

>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

Signature

Spartanicus

Reply to this Message

Alan J. Flavell - 30 Sep 2006 21:00 GMT

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

Reply to this Message

Beauregard T. Shagnasty - 30 Sep 2006 21:38 GMT

>> 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
[quoted text clipped - 7 lines]
> 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...

Signature

-bts
-Motorcycles defy gravity; cars just suck.

Reply to this Message

Harlan Messinger - 30 Sep 2006 06:46 GMT

> 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
[quoted text clipped - 15 lines]
> 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.

Reply to this Message

john_aspinall@yahoo.co.uk - 30 Sep 2006 17:54 GMT

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.

> > 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
[quoted text clipped - 28 lines]
> isn't part of the width, it's in addition to the width. Change the width
> to 730px and see what happens.

Reply to this Message

Harlan Messinger - 30 Sep 2006 18:05 GMT

[top-posting corrected]

>>> 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
[quoted text clipped - 31 lines]
> 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

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / September 2006

Why isnt padding-right working???