 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / November 2007padding 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.. > hi, > [quoted text clipped - 12 lines] > 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  SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com > hi, > [quoted text clipped - 17 lines] > > thank you very much.. A doctype? A modern browser? And finally, a URL so we can see. Signaturedorayme >> hi, >> [quoted text clipped - 19 lines] > > 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.. >> hi, >> [quoted text clipped - 19 lines] > > 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... > 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. Signaturedorayme >> 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 [quoted text clipped - 8 lines] > > 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: >>> 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 [quoted text clipped - 11 lines] > 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. SignatureEvertjan. The Netherlands. (Please change the x'es to dots in my emailaddress) > >> 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 [quoted text clipped - 13 lines] > > 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). Signaturedorayme [...] > Do you understand what I was saying about it being more than just > according to standards but common sense that padding will [quoted text clipped - 4 lines] > 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). > [...] > > Do you understand what I was saying about it being more than just [quoted text clipped - 16 lines] > 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... <g> Just 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.) Signaturedorayme > In article <slrnfkq87e.mmc.spamspam@bowser.marioworld>, [...] > Heights are tricky customers in practice and there are some > delicious counter-intuitive things that are nice to look at and [quoted text clipped - 8 lines] > 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. > > In article <slrnfkq87e.mmc.spamspam@bowser.marioworld>, > [...] [quoted text clipped - 17 lines] > 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. It is shrink-to-fit its parent container in both width and height, proving that what seems greedy from one point of view is mere moderation from another (I mean it *could* have been, in another possible world, not satisfied to stop at the inside of the inside-padding of the parent...) > Setting height explicitly is always going to be risky for any element > that has contents, because they might not fit. Setting width explicitly [quoted text clipped - 5 lines] > way round. The descendents determine how high the container needs to > be, and it's best advised to listen to them. It is why I try to steer clear of heights in the wild [1]. -------------- [1] Or, to put it less charitably - I try hard to think like my enemies in order to ennoble my soul through searing pain - I can't cut it with the complexities as easily as I would dream. Signaturedorayme [...] >> The thing about heights is that they are completely different from >> widths. [quoted text clipped - 6 lines] > 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). > hi, > [quoted text clipped - 15 lines] > 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?)). SignatureRik Wasmus |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.