473,372 Members | 961 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,372 software developers and data experts.

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


Nov 27 '07 #1
11 2341
In article <fi**********@aioe.org>, maya <ma********@yahoo.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
Nov 27 '07 #2
dorayme wrote:
In article <fi**********@aioe.org>, maya <ma********@yahoo.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.
sorry, can't share url, this is at work, development server, not live
yet.. don't have time now to re-create (maybe tonight @ home..) doctype
being used is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

choice of doctype is not mine, that can't change...

so what's the difference, then, between padding and margin??? I mean
how then are you supposed to add padding space so content of an element
is not against the edge of element??? :(

thank you..
Nov 27 '07 #3
dorayme wrote:
In article <fi**********@aioe.org>, maya <ma********@yahoo.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 <tdthat'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...

Nov 27 '07 #4
In article <fi**********@aioe.org>, maya <ma********@yahoo.com>
wrote:
so if I have a <tdthat'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
Nov 27 '07 #5
dorayme wrote:
In article <fi**********@aioe.org>, maya <ma********@yahoo.com>
wrote:
>so if I have a <tdthat'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....

Nov 27 '07 #6
maya wrote on 27 nov 2007 in comp.infosystems.www.authoring.stylesheets:
dorayme wrote:
>In article <fi**********@aioe.org>, maya <ma********@yahoo.com>
wrote:
>>so if I have a <tdthat'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)
Nov 27 '07 #7
In article <fi**********@aioe.org>, maya <ma********@yahoo.com>
wrote:
dorayme wrote:
In article <fi**********@aioe.org>, maya <ma********@yahoo.com>
wrote:
so if I have a <tdthat'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
Nov 27 '07 #8
On 2007-11-27, dorayme <do************@optusnet.com.auwrote:
[...]
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).
Nov 28 '07 #9
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
On 2007-11-27, dorayme <do************@optusnet.com.auwrote:
[...]
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).
I was thinking too much about table cells, you are right. It was
misleading.

Heights are tricky customers in practice and there are some
delicious counter-intuitive things that are nice to look at and
get clear on:

http://tinyurl.com/272lfm

(this is not intended as any dispute with you or anyone, just a
reminder to myself to make up an easy to remember story to think
of these things as a hobby maybe over the Xmas break... <gJust
btw, MacIE and no doubt WinIE 6 are a bit more intuitively what
you would expect on above url. I have not looked at Win, but
MacIE is a tiny clue to me.)

--
dorayme
Nov 28 '07 #10
On 2007-11-28, dorayme <do************@optusnet.com.auwrote:
In article <sl*********************@bowser.marioworld>,
[...]
Heights are tricky customers in practice and there are some
delicious counter-intuitive things that are nice to look at and
get clear on:

http://tinyurl.com/272lfm

(this is not intended as any dispute with you or anyone, just a
reminder to myself to make up an easy to remember story to think
of these things as a hobby maybe over the Xmas break... <gJust
btw, MacIE and no doubt WinIE 6 are a bit more intuitively what
you would expect on above url. I have not looked at Win, but
MacIE is a tiny clue to me.)
The thing about heights is that they are completely different from
widths.

Normal-flow auto width depends only on the container and is greedy.
Normal-flow auto height depends on the contents and is conservative.
This is a big difference.

Setting height explicitly is always going to be risky for any element
that has contents, because they might not fit. Setting width explicitly
is less risky because (in most cases) the contents will flow into the
space available and just take up a bit more height as a result.

Width is something a containing element dictates to its descendents
anyway (so it's mostly OK to set it explicitly), but height is the other
way round. The descendents determine how high the container needs to
be, and it's best advised to listen to them.
Nov 28 '07 #11
On 2007-11-28, dorayme <do************@optusnet.com.auwrote:
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
[...]
>The thing about heights is that they are completely different from
widths.

Normal-flow auto width depends only on the container and is greedy.
Normal-flow auto height depends on the contents and is conservative.
This is a big difference.

Yes. I take it that you mean that in, e.g., a <div>, the
container itself is not auto width shrink to fit content but is
auto height shrink to fit according to content.
Yes, although technically the term "shrink-to-fit" (which they do use in
the specification) only applies to widths-- it means min(max(preferred
minimum width, available width), preferred width). There's nothing quite
like that for height. Contents have a height and that's it. There's no
such thing as "preferred minimum height" and available height plays no
part in the height calculation (unless the box is positioned).
Nov 29 '07 #12

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: delerious | last post by:
Could someone please take a look at this page: http://home.comcast.net/~delerious1/index11.html The set of links on the left should not have any whitespace between them, and the set of links...
2
by: Knoxy | last post by:
Hello, I've noticed one or two people post on this before but nobody seems to have replied so raising the issue again... is this a known IE6 CSS bug? I have placed the following in my...
7
by: Gustaf Liljegren | last post by:
I continued on the example shown earlier today: http://gusgus.cn/test/index.html Now I get some unwanted space in Firefox (the red space just below the first image) which doesn't appear in...
4
by: Wilhelm Kutting | last post by:
hi, when i use the padding-left attribut, i like to overwrite a default value like that ..padding30 {margin-left: 30px;} ..padding0 {margin-left: 0px;} <div class="padding30"> Padding 30...
2
by: Remi Villatel | last post by:
Hi there, I have following CSS definitions: div.limits { margin: 0 20px 0 20px; } div.halfleft { float: left; left: 0; width: 50%;
36
by: phil-news-nospam | last post by:
Here is a simpler (no drop shadows) example of the padding bug I see: http://phil.ipal.org/usenet/ciwas/2006-05-08/buttons-1.html So far I find nothing in the CSS2 document that says I should...
10
by: Alan Silver | last post by:
Hello, In my (seemingly) endless quest to understand CSS, I have yet another problem. Please look at http://www.kidsinaction.org.uk/ph/x.html in Opera, where you will see it how I expected. If...
5
by: Tom | last post by:
I am having a problem where an extra gap (whitespace, padding) appears in a table cell where I don't want it. The data fed in the table is via dynamic HTML, so the amount in the middle cell may...
5
by: Mike | last post by:
I am having a problem with padding. I have three boxes and I want them all to be the same width. In IE it looks like the outside of the DIV stays put and the padding is placed on the inside, so the...
3
by: xoinki | last post by:
hi all, I have a DIV element for which a table is appended.. CSS for this div element is.. .optiondiv { display:block; padding: 0px 30px; padding-left: 30px; padding-right:...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.