padding problem..

hi,

I've been noticing lately that padding property is ADDING to dimensions
of element, this is causing me lots of difficulties..

if for example I have this:

<div class="divMore" align="right"><a href="">Read More</a></div>

and in css:

..divMore {background-image:url(images/bg_more.jpg);
background-repeat:no-repeat; height:40px; padding-top:10px;}

it ADDS 10px to HEIGHT of this element, making it not 40px high, but
50px high.. this is not how padding property is supposed to work..
my understanding is padding puts padding between edge of element and
content of element, it's not supposed to ADD to DIMENSION of element..
this is causing me difficulties.. please, what am I missing...

thank you very much..

maya wrote:

hi,

I've been noticing lately that padding property is ADDING to dimensions
of element, this is causing me lots of difficulties..

if for example I have this:

div class="divMore" align="right"><a href="">Read More</a></div

and in css:

.divMore {background-image:url(images/bg_more.jpg);
background-repeat:no-repeat; height:40px; padding-top:10px;}

it ADDS 10px to HEIGHT of this element, making it not 40px high, but
50px high.. this is not how padding property is supposed to work..

Yes it is:

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

You are just use to IE's broken implementation. The width of the border
is also added,

total_width = left_border_width + left_padding_width + element_width +
right_padding_width + right_border_width


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

In article <fihv6t$k77$1 (AT) aioe (DOT) org>, maya <maya778899 (AT) yahoo (DOT) com>
wrote:

hi,

I've been noticing lately that padding property is ADDING to dimensions
of element, this is causing me lots of difficulties..

if for example I have this:

div class="divMore" align="right"><a href="">Read More</a></div

and in css:

.divMore {background-image:url(images/bg_more.jpg);
background-repeat:no-repeat; height:40px; padding-top:10px;}

it ADDS 10px to HEIGHT of this element, making it not 40px high, but
50px high.. this is not how padding property is supposed to work..
my understanding is padding puts padding between edge of element and
content of element, it's not supposed to ADD to DIMENSION of element..
this is causing me difficulties.. please, what am I missing...

thank you very much..

A doctype? A modern browser? And finally, a URL so we can see.

--
dorayme

dorayme wrote:

In article <fihv6t$k77$1 (AT) aioe (DOT) org>, maya <maya778899 (AT) yahoo (DOT) com
wrote:

hi,

I've been noticing lately that padding property is ADDING to dimensions
of element, this is causing me lots of difficulties..

if for example I have this:

div class="divMore" align="right"><a href="">Read More</a></div

and in css:

.divMore {background-image:url(images/bg_more.jpg);
background-repeat:no-repeat; height:40px; padding-top:10px;}

it ADDS 10px to HEIGHT of this element, making it not 40px high, but
50px high.. this is not how padding property is supposed to work..
my understanding is padding puts padding between edge of element and
content of element, it's not supposed to ADD to DIMENSION of element..
this is causing me difficulties.. please, what am I missing...

thank you very much..

A doctype? A modern browser? And finally, a URL so we can see.

so if I have a <td> that's, say, 400px wide, and I put a paragraph in
it, and I want a padding ONLY ON THE RIGHT (so table cellpadding
property is not good here) of, say, 20px, so there's 20px empty space
between right edge of paragr and edge of <td>, how do you do that??????

thank you...

In article <fii1gd$rqk$1 (AT) aioe (DOT) org>, maya <maya778899 (AT) yahoo (DOT) com>
wrote:

so if I have a <td> that's, say, 400px wide, and I put a paragraph in
it, and I want a padding ONLY ON THE RIGHT (so table cellpadding
property is not good here) of, say, 20px, so there's 20px empty space
between right edge of paragr and edge of <td>, how do you do that??????

thank you...

Perhaps something like

http://netweaver.com.au/alt/maya.html

I guess.

--
dorayme

dorayme wrote:

In article <fii1gd$rqk$1 (AT) aioe (DOT) org>, maya <maya778899 (AT) yahoo (DOT) com
wrote:

so if I have a <td> that's, say, 400px wide, and I put a paragraph in
it, and I want a padding ONLY ON THE RIGHT (so table cellpadding
property is not good here) of, say, 20px, so there's 20px empty space
between right edge of paragr and edge of <td>, how do you do that??????

thank you...

Perhaps something like

http://netweaver.com.au/alt/maya.html

I guess.

yes, but did u measure that <td>?? I did a screenshot and measured in
Photoshop, it's 420px wide....

thank you though, I appreciate your help....

maya wrote on 27 nov 2007 in comp.infosystems.www.authoring.stylesheets:

dorayme wrote:
In article <fii1gd$rqk$1 (AT) aioe (DOT) org>, maya <maya778899 (AT) yahoo (DOT) com
wrote:

so if I have a <td> that's, say, 400px wide, and I put a paragraph in
it, and I want a padding ONLY ON THE RIGHT (so table cellpadding
property is not good here) of, say, 20px, so there's 20px empty space
between right edge of paragr and edge of <td>, how do you do that??????

thank you...

Perhaps something like

http://netweaver.com.au/alt/maya.html

I guess.


yes, but did u measure that <td>?? I did a screenshot and measured in
Photoshop, it's 420px wide....

try:

<http://www.mioplanet.com/products/pixelruler/>

Cheaper and faster than PS.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

In article <fii3il$2qb$1 (AT) aioe (DOT) org>, maya <maya778899 (AT) yahoo (DOT) com>
wrote:

dorayme wrote:
In article <fii1gd$rqk$1 (AT) aioe (DOT) org>, maya <maya778899 (AT) yahoo (DOT) com
wrote:

so if I have a <td> that's, say, 400px wide, and I put a paragraph in
it, and I want a padding ONLY ON THE RIGHT (so table cellpadding
property is not good here) of, say, 20px, so there's 20px empty space
between right edge of paragr and edge of <td>, how do you do that??????

thank you...

Perhaps something like

http://netweaver.com.au/alt/maya.html

I guess.


yes, but did u measure that <td>?? I did a screenshot and measured in
Photoshop, it's 420px wide....

thank you though, I appreciate your help....

Oh you are still worried about that business. Sorry. I have said
things about that in another post, so has Jonathan Little. Did
you get those?

Do you understand what I was saying about it being more than just
according to standards but common sense that padding will
increase height or width naturally and that height and width
specifications cannot be thought to be max height and width. On
this latter, here is another argument: suppose you tell an
element which from its natural content would be say 200px tall,
to be only 20px tall. What do you think should happen, what does
happen? In other words, height instructions are not king. There
are other things that go on to temper and add and probably
subtract.

(btw You don't need Photoshop, download the Firefox browser and
then down load the web developer tools. You will find an
excellent ruler in it that is a easy to use right there on the
webpage).

--
dorayme

On Tue, 27 Nov 2007 21:37:49 +0100, maya <maya778899 (AT) yahoo (DOT) com> wrote:

hi,

I've been noticing lately that padding property is ADDING to dimensions
of element, this is causing me lots of difficulties..

if for example I have this:

div class="divMore" align="right"><a href="">Read More</a></div

and in css:

.divMore {background-image:url(images/bg_more.jpg);
background-repeat:no-repeat; height:40px; padding-top:10px;}

it ADDS 10px to HEIGHT of this element, making it not 40px high, but
50px high.. this is not how padding property is supposed to work..
my understanding is padding puts padding between edge of element and
content of element, it's not supposed to ADD to DIMENSION of element..
this is causing me difficulties.. please, what am I missing...

It is how it's supposed to happen.
I find myself often adding this to a stylesheet to get more or less the
same rendering in MSIE and non-MSIE browsers:

element{
box-sizing: border-box;
-moz_box_sizing: border-box;
}

As we cannot influence MSIE, others seem to have to suffer (and why o why
does FF have a -moz... property for something that is in CSS3 (or is this
just 'legacy' work I'm doing?)).
--
Rik Wasmus

On 2007-11-27, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
[...]

Do you understand what I was saying about it being more than just
according to standards but common sense that padding will
increase height or width naturally and that height and width
specifications cannot be thought to be max height and width. On
this latter, here is another argument: suppose you tell an
element which from its natural content would be say 200px tall,
to be only 20px tall. What do you think should happen, what does
happen?

Unless it's a table cell, row or table, it should be exactly 20px tall
and the content overflows. Usually you can still see it, but only
because the overflow property is set to visible.

In other words, height instructions are not king. There
are other things that go on to temper and add and probably
subtract.

Apart from tables, you should always get exactly the height you ask
for (measured between the top and bottom inside-padding edges).