473,700 Members | 2,610 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

simpler example of the padding bug

Here is a simpler (no drop shadows) example of the padding bug I see:

http://phil.ipal.org/usenet/ciwas/20...buttons-1.html

So far I find nothing in the CSS2 document that says I should get this
kind of inconsistent result.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 8 '06 #1
36 3033
ph************* *@ipal.net wrote:
Here is a simpler (no drop shadows) example of the padding bug I see:

http://phil.ipal.org/usenet/ciwas/20...buttons-1.html

So far I find nothing in the CSS2 document that says I should get this
kind of inconsistent result.


It's only a bug if you've done it correctly and it *still* doesn't work.

From the above mentioned web page:

"Each table cell is wrapped in a 1px solid red border. Each table cell
also has 2px of its own padding just to get the red border a little
distant from the button so it is easier to see. Notice how the table
cell padding is NOT symmetrical (another bug?)."

Removing height:100%; and width:100%; from .menu_button solves this
problem. It's not a bug.
Where you have .pad_top, .pad_right, .pad_bottom, .pad_left
you might wish to alter *to* the following code:

..pad_top {
margin-top: 20px;
padding-top: 20px;
}
..pad_right {
margin-right: 20px;
padding-right:20px;
}
..pad_bottom {
margin-bottom: 20px;
padding-bottom: 20px;
}
..pad_left {
margin-left: 20px;
padding-left: 20px;
}

If I've missed any of the questions posed on the page I'd be happy to
address them if you mention what they are.
--
Brian O'Connor (ironcorona)
May 8 '06 #2
ironcorona wrote:
ph************* *@ipal.net wrote:
Here is a simpler (no drop shadows) example of the padding bug I see:

http://phil.ipal.org/usenet/ciwas/20...buttons-1.html

So far I find nothing in the CSS2 document that says I should get this
kind of inconsistent result.


It's only a bug if you've done it correctly and it *still* doesn't work.

From the above mentioned web page:

"Each table cell is wrapped in a 1px solid red border. Each table cell
also has 2px of its own padding just to get the red border a little
distant from the button so it is easier to see. Notice how the table
cell padding is NOT symmetrical (another bug?)."

Removing height:100%; and width:100%; from .menu_button solves this
problem. It's not a bug.
Where you have .pad_top, .pad_right, .pad_bottom, .pad_left
you might wish to alter *to* the following code:

.pad_top {
margin-top: 20px;
padding-top: 20px;
}
.pad_right {
margin-right: 20px;
padding-right:20px;
}
.pad_bottom {
margin-bottom: 20px;
padding-bottom: 20px;
}
.pad_left {
margin-left: 20px;
padding-left: 20px;
}

If I've missed any of the questions posed on the page I'd be happy to
address them if you mention what they are.


ps. You might want to view the page in IE, where the display:table; and
all the associated properties are not supported.
--
Brian O'Connor (ironcorona)
May 8 '06 #3
On Tue, 09 May 2006 02:28:26 +0800 ironcorona <ir*********@gm ail.com> wrote:
| ironcorona wrote:
|> ph************* *@ipal.net wrote:
|>> Here is a simpler (no drop shadows) example of the padding bug I see:
|>>
|>> http://phil.ipal.org/usenet/ciwas/20...buttons-1.html
|>>
|>> So far I find nothing in the CSS2 document that says I should get this
|>> kind of inconsistent result.
|>
|> It's only a bug if you've done it correctly and it *still* doesn't work.
|>
|> From the above mentioned web page:
|>
|> "Each table cell is wrapped in a 1px solid red border. Each table cell
|> also has 2px of its own padding just to get the red border a little
|> distant from the button so it is easier to see. Notice how the table
|> cell padding is NOT symmetrical (another bug?)."
|>
|> Removing height:100%; and width:100%; from .menu_button solves this
|> problem. It's not a bug.

Then what do you suggest to get the box inside the table cell to expand
to fully fill the table cell? The use of height:100% and width:100% was
what was recommended in an another example elsewhere.

Still, it makes no sense that padding added to the left side should grow
the right side, and especially to do so _beyond_ the bounds of the containing
element (the table cell). This is not what the CSS2 document describes.
Could you describe the definitions and/or mechanisms of why this kind of
padding effect should happen and only should with width/height at 100%?
I'm trying to make sense of this (it doesn't make any on its own).

It does seem to be a general problem with HTML layout to get stuff to
expand and fill out the container it is in. And sometimes, even the
reverse is true. Try getting a standalone box to just enclose a piece
of text without expanding to the whole display width. That has been
dealt with in the paste with HTML tables, transparent GIFs, and other
things some people don't like. To get away from those hacks, there does
need to be a right way to do all the things people want to do.
|> Where you have .pad_top, .pad_right, .pad_bottom, .pad_left
|> you might wish to alter *to* the following code:
|>
|> .pad_top {
|> margin-top: 20px;
|> padding-top: 20px;
|> }
|> .pad_right {
|> margin-right: 20px;
|> padding-right:20px;
|> }
|> .pad_bottom {
|> margin-bottom: 20px;
|> padding-bottom: 20px;
|> }
|> .pad_left {
|> margin-left: 20px;
|> padding-left: 20px;
|> }
|>
|> If I've missed any of the questions posed on the page I'd be happy to
|> address them if you mention what they are.
|
| ps. You might want to view the page in IE, where the display:table; and
| all the associated properties are not supported.

No IE running here. Sorry. They don't make a portable version of it.
Since Firefox is portable to Windows, I can at least recommend it to
Windows users.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 8 '06 #4
On Tue, 09 May 2006 02:27:03 +0800 ironcorona <ir*********@gm ail.com> wrote:

| Removing height:100%; and width:100%; from .menu_button solves this
| problem. It's not a bug.

Actually it seems height:100%; is not a factor in this at all. Given that
the effect happens horizontally ... but NOT vertically ... it is quite
believable that height:100%; would not affect it, but width:100%; would.

But this still isn't very consistent because vertical and horizontal
are behaving differently (vertical does not have the "bug").

It is not the way the box model is described in the CSS2 document, and
it also exceeds the containing element.

| Where you have .pad_top, .pad_right, .pad_bottom, .pad_left
| you might wish to alter *to* the following code:
|
| .pad_top {
| margin-top: 20px;
| padding-top: 20px;
| }
| .pad_right {
| margin-right: 20px;
| padding-right:20px;
| }
| .pad_bottom {
| margin-bottom: 20px;
| padding-bottom: 20px;
| }
| .pad_left {
| margin-left: 20px;
| padding-left: 20px;
| }

What's the purpose of that? I tried it and it only made things worse.

My objective is to have a container box inside of a table cell that fills
the table cell regardless of the size of what is inside of that box. If
the contents of the box need a larger box, then it should expand the table
cell to accomodate, along with expanding everything else in the appropriate
direction of the table so all cells/boxes in the same row have the same
height and all cells/boxes in the same column have the same width.

If there's a way to also make all table columns the same width, and all
table rows the same height, that would be a plus for certain projects.
Note, absolute sizing isn't what I'm asking for. I want it to all be the
minimum size needed for the largest object to fit, whatever that might
happen to be.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 8 '06 #5
ph************* *@ipal.net wrote:
| Where you have .pad_top, .pad_right, .pad_bottom, .pad_left
| you might wish to alter *to* the following code:
|
| .pad_top {
| margin-top: 20px;
| padding-top: 20px;
| }
| .pad_right {
| margin-right: 20px;
| padding-right:20px;
| }
| .pad_bottom {
| margin-bottom: 20px;
| padding-bottom: 20px;
| }
| .pad_left {
| margin-left: 20px;
| padding-left: 20px;
| }

What's the purpose of that? I tried it and it only made things worse.
Just take out the width:100% and the height:100% AND change the .pad
parts in the way I've shown. Then have a look at it.

If there's a way to also make all table columns the same width, and all
table rows the same height, that would be a plus for certain projects.
Note, absolute sizing isn't what I'm asking for. I want it to all be the
minimum size needed for the largest object to fit, whatever that might
happen to be.


If you do what I've said then it will expand to fit whatever content.
Actually, to make things easier here's the whole code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Title? We don't need no steekin title!</title>

<style type="text/css">
body {
background-color: #ffffff;
color: #000000;
}
..hmenu {
display: table;
border-collapse: separate;
border-spacing: 14px;
border: 1px solid #0000ff;
}
..hmenu_row {
display: table-row;
border: 1px solid #00ff00;
}
..hmenu_cell {
display: table-cell;
border: 1px solid #ff0000;
padding: 2px 2px 2px 2px;
}
..shift {
position: relative;
top: 9px;
}
..menu_button {

margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px solid #88aacc;
background-color: #eff7ff;
color: #001122;
}
..pad_top {
margin-top: 20px;
padding-top: 20px;
}
..pad_right {
margin-right: 20px;
padding-right:20px;
}
..pad_bottom {
margin-bottom: 20px;
padding-bottom: 20px;
}
..pad_left {
margin-left: 20px;
padding-left: 20px;
}
..menu_button:h over {
border: 1px solid #ccaa88;
background-color: #fff7ef;
color: #221100;
}
..menu_button:a ctive {
border: 1px solid #88cc88;
background-color: #efffef;
color: #004400;
}
..menu_button a {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: #001122;
text-decoration: none;
}
..menu_button a:link {
color: #001122;
}
..menu_button a:visited {
color: #aabbcc;
}
..menu_button a:hover {
color: #221100;
}
..menu_button a:active {
color: #004400;
}

</style>

</head>

<body>

<p>
These buttons are made with hyperlinked text inside a box, which is
inside a table cell of a one row table.
The table uses HTML DIV elements and CSS table-* property values.
The whole table is wrapped in a 1px solid blue border, with 14px of
border spacing.
Each table row is wrapped in a 1px solid green border (which does
<em>NOT</em> show up).
Each table cell is wrapped in a 1px solid red border.
Each table cell also has 2px of its own padding just to get the red
border a little distant from the button so it is easier to see.
Notice how the table cell padding is <em>NOT</em> symmetrical (another
bug?).
Each button box is background colored light blue with a 1px solid blue
border.
The button box color will change with hover to light orange with a 1px
solid orange border.
The button box color will change with click to light green with a 1px
solid green border.
The "Sit" button is intentionally shifted down by 9px to show how the
padding overlap is taking place.
The shift is done by adding a class to the HTML DIV element for the
button box.
The various padding tests are applied by adding a class to the HTML DIV
element for the button box that adds 20px of padding for the specified side.

</p>

<p>
The stylesheet is embedded in the HTML, so it can be viewed when the
HTML source ie viewed.
</p>

<p>
<b>No padding</b> - except for that 2px inside the table cell which does
not expand the blue button box.
<div class="hmenu">< div class="hmenu_ro w">
<div class="hmenu_ce ll"><div class="menu_but ton"><a
href="#lorem">L orem</a></div></div>
<div class="hmenu_ce ll"><div class="menu_but ton"><a
href="#ipsum">I psum</a></div></div>
<div class="hmenu_ce ll"><div class="menu_but ton"><a
href="#dolor">D olor</a></div></div>

<div class="hmenu_ce ll"><div class="menu_but ton shift"><a
href="#sit">Sit </a></div></div>
<div class="hmenu_ce ll"><div class="menu_but ton"><a
href="#amet">Am et</a></div></div>
</div></div>
</p>

<p>
<b>Padding on top and bottom</b> - this works as expected. If I specify
Npx of padding, I expect to get Npx of padding.
<div class="hmenu">< div class="hmenu_ro w">
<div class="hmenu_ce ll"><div class="menu_but ton pad_top pad_bottom"><a
href="#lorem">L orem</a></div></div>
<div class="hmenu_ce ll"><div class="menu_but ton pad_top pad_bottom"><a
href="#ipsum">I psum</a></div></div>
<div class="hmenu_ce ll"><div class="menu_but ton pad_top pad_bottom"><a
href="#dolor">D olor</a></div></div>

<div class="hmenu_ce ll"><div class="menu_but ton pad_top pad_bottom
shift"><a href="#sit">Sit </a></div></div>
<div class="hmenu_ce ll"><div class="menu_but ton pad_top pad_bottom"><a
href="#amet">Am et</a></div></div>
</div></div>
</p>

<p>
<b>Padding on left only</b> - notice how the padding is additionally
added to the right, but that the containing table cell does not expand
for it.
<div class="hmenu">< div class="hmenu_ro w">
<div class="hmenu_ce ll"><div class="menu_but ton pad_left"><a
href="#lorem">L orem</a></div></div>
<div class="hmenu_ce ll"><div class="menu_but ton pad_left"><a
href="#ipsum">I psum</a></div></div>
<div class="hmenu_ce ll"><div class="menu_but ton pad_left"><a
href="#dolor">D olor</a></div></div>

<div class="hmenu_ce ll"><div class="menu_but ton pad_left shift"><a
href="#sit">Sit </a></div></div>
<div class="hmenu_ce ll"><div class="menu_but ton pad_left"><a
href="#amet">Am et</a></div></div>
</div></div>
</p>

<p>
<b>Padding on right only</b> - notice how the padding is twice as much
as specified, and the containing table cell is expanded only for a
single amount.
<div class="hmenu">< div class="hmenu_ro w">
<div class="hmenu_ce ll"><div class="menu_but ton pad_right"><a
href="#lorem">L orem</a></div></div>
<div class="hmenu_ce ll"><div class="menu_but ton pad_right"><a
href="#ipsum">I psum</a></div></div>
<div class="hmenu_ce ll"><div class="menu_but ton pad_right"><a
href="#dolor">D olor</a></div></div>

<div class="hmenu_ce ll"><div class="menu_but ton pad_right shift"><a
href="#sit">Sit </a></div></div>
<div class="hmenu_ce ll"><div class="menu_but ton pad_right"><a
href="#amet">Am et</a></div></div>
</div></div>
</p>

<p>
<b>Padding on left and right</b> - notice how there is a total of twice
as much padding as actually specified but the containing table cell is
expanded for a single amount.
<div class="hmenu">< div class="hmenu_ro w">
<div class="hmenu_ce ll"><div class="menu_but ton pad_right pad_left"><a
href="#lorem">L orem</a></div></div>
<div class="hmenu_ce ll"><div class="menu_but ton pad_right pad_left"><a
href="#ipsum">I psum</a></div></div>
<div class="hmenu_ce ll"><div class="menu_but ton pad_right pad_left"><a
href="#dolor">D olor</a></div></div>

<div class="hmenu_ce ll"><div class="menu_but ton pad_right pad_left
shift"><a href="#sit">Sit </a></div></div>
<div class="hmenu_ce ll"><div class="menu_but ton pad_right pad_left"><a
href="#amet">Am et</a></div></div>
</div></div>
</p>

<p>
<b>Padding on all four sides</b> - all I wanted was a symmetrical
upsizing of the text button box.
<div class="hmenu">< div class="hmenu_ro w">
<div class="hmenu_ce ll"><div class="menu_but ton pad_top pad_right
pad_bottom pad_left"><a href="#lorem">L orem</a></div></div>
<div class="hmenu_ce ll"><div class="menu_but ton pad_top pad_right
pad_bottom pad_left"><a href="#ipsum">I psum</a></div></div>
<div class="hmenu_ce ll"><div class="menu_but ton pad_top pad_right
pad_bottom pad_left"><a href="#dolor">D olor</a></div></div>

<div class="hmenu_ce ll"><div class="menu_but ton pad_top pad_right
pad_bottom pad_left shift"><a href="#sit">Sit </a></div></div>
<div class="hmenu_ce ll"><div class="menu_but ton pad_top pad_right
pad_bottom pad_left"><a href="#amet">Am et</a></div></div>
</div></div>
</p>

</body>

</html>
--
Brian O'Connor (ironcorona)
May 8 '06 #6
ph************* *@ipal.net wrote:
On Tue, 09 May 2006 02:28:26 +0800 ironcorona <ir*********@gm ail.com> wrote:
| ironcorona wrote:
|> ph************* *@ipal.net wrote:
|>> Here is a simpler (no drop shadows) example of the padding bug I see:
|>>
|>> http://phil.ipal.org/usenet/ciwas/20...buttons-1.html
|>>
|>> So far I find nothing in the CSS2 document that says I should get this
|>> kind of inconsistent result.
|>
|> It's only a bug if you've done it correctly and it *still* doesn't work.
|>
|> From the above mentioned web page:
|>
|> "Each table cell is wrapped in a 1px solid red border. Each table cell
|> also has 2px of its own padding just to get the red border a little
|> distant from the button so it is easier to see. Notice how the table
|> cell padding is NOT symmetrical (another bug?)."
|>
|> Removing height:100%; and width:100%; from .menu_button solves this
|> problem. It's not a bug.

Then what do you suggest to get the box inside the table cell to expand
to fully fill the table cell? The use of height:100% and width:100% was
what was recommended in an another example elsewhere.

Still, it makes no sense that padding added to the left side should grow
the right side,
It's because of your code. You had the buttons as 100% of it's parent
element. Then you added 20px padding to the parent element. Now the
button on the inside is 100% (of the content area) of the parent + 20px.
So 100% + 20px = bigger than the parent element. The browser then
*has* to push the content outside.
and especially to do so _beyond_ the bounds of the containing
element (the table cell). This is not what the CSS2 document describes.
Could you describe the definitions and/or mechanisms of why this kind of
padding effect should happen and only should with width/height at 100%?
I'm trying to make sense of this (it doesn't make any on its own).
Read up on how the box model functions.
It does seem to be a general problem with HTML layout to get stuff to
expand and fill out the container it is in. And sometimes, even the
reverse is true. Try getting a standalone box to just enclose a piece
of text without expanding to the whole display width. That has been
dealt with in the paste with HTML tables, transparent GIFs, and other
things some people don't like. To get away from those hacks, there does
need to be a right way to do all the things people want to do.
|> Where you have .pad_top, .pad_right, .pad_bottom, .pad_left
|> you might wish to alter *to* the following code:
|>
|> .pad_top {
|> margin-top: 20px;
|> padding-top: 20px;
|> }
|> .pad_right {
|> margin-right: 20px;
|> padding-right:20px;
|> }
|> .pad_bottom {
|> margin-bottom: 20px;
|> padding-bottom: 20px;
|> }
|> .pad_left {
|> margin-left: 20px;
|> padding-left: 20px;
|> }
|>
|> If I've missed any of the questions posed on the page I'd be happy to
|> address them if you mention what they are.
|
| ps. You might want to view the page in IE, where the display:table; and
| all the associated properties are not supported.

No IE running here. Sorry. They don't make a portable version of it.
Since Firefox is portable to Windows, I can at least recommend it to
Windows users.


Yes but only about 10% of them. Maybe even less.
--
Brian O'Connor (ironcorona)
May 8 '06 #7
On Tue, 09 May 2006 04:12:58 +0800 ironcorona <ir*********@gm ail.com> wrote:
| ph************* *@ipal.net wrote:
|> On Tue, 09 May 2006 02:28:26 +0800 ironcorona <ir*********@gm ail.com> wrote:
|> | ironcorona wrote:
|> |> ph************* *@ipal.net wrote:
|> |>> Here is a simpler (no drop shadows) example of the padding bug I see:
|> |>>
|> |>> http://phil.ipal.org/usenet/ciwas/20...buttons-1.html
|> |>>
|> |>> So far I find nothing in the CSS2 document that says I should get this
|> |>> kind of inconsistent result.
|> |>
|> |> It's only a bug if you've done it correctly and it *still* doesn't work.
|> |>
|> |> From the above mentioned web page:
|> |>
|> |> "Each table cell is wrapped in a 1px solid red border. Each table cell
|> |> also has 2px of its own padding just to get the red border a little
|> |> distant from the button so it is easier to see. Notice how the table
|> |> cell padding is NOT symmetrical (another bug?)."
|> |>
|> |> Removing height:100%; and width:100%; from .menu_button solves this
|> |> problem. It's not a bug.
|>
|> Then what do you suggest to get the box inside the table cell to expand
|> to fully fill the table cell? The use of height:100% and width:100% was
|> what was recommended in an another example elsewhere.
|>
|> Still, it makes no sense that padding added to the left side should grow
|> the right side,
|
| It's because of your code. You had the buttons as 100% of it's parent
| element. Then you added 20px padding to the parent element. Now the
| button on the inside is 100% (of the content area) of the parent + 20px.
| So 100% + 20px = bigger than the parent element. The browser then
| *has* to push the content outside.

The CSS document describes the width of a block as being the sum of the
width of the contained content, plus the padding, plus the border, plus
the margin.

No, the browser does NOT have to push the content outside. It could,
instead, make the containing element larger. In fact, it did just that.
It did it vertically with no other effects. For horizontal, it also
did it (you can check and see that the enclosing cell actually did get
larger by 20px). But for that 20px of padding given on the left in one
case, or on the right in another case, it expanded the element NOT by
20px, but by 40px. So what you just described is NOT what actually did
happen. Explain why adding 20px of padding on the left causes the box
to get wider by 40px. And explain why what you described did not happen
at all vertically.
|> and especially to do so _beyond_ the bounds of the containing
|> element (the table cell). This is not what the CSS2 document describes.
|> Could you describe the definitions and/or mechanisms of why this kind of
|> padding effect should happen and only should with width/height at 100%?
|> I'm trying to make sense of this (it doesn't make any on its own).
|
| Read up on how the box model functions.

I did before I even posted. I did before I even tried all this, and
also again afterwards just before posting. I didn't see anything that
supports the effect I get. I also didn't see anything that supports
what you described (which is different than the effect I get).

Suppose some browser (or maybe even Firefox) were do to what *I* expect
of it with that code I used. What argument would you use to explain why
the result is not compliant with the standard for CSS? And would you
use this argument only for the horizontal aspect, or would you also use
it for the vertical aspect (that does what I expected, and not what you
described, even now).
|> |> If I've missed any of the questions posed on the page I'd be happy to
|> |> address them if you mention what they are.
|> |
|> | ps. You might want to view the page in IE, where the display:table; and
|> | all the associated properties are not supported.
|>
|> No IE running here. Sorry. They don't make a portable version of it.
|> Since Firefox is portable to Windows, I can at least recommend it to
|> Windows users.
|
| Yes but only about 10% of them. Maybe even less.

10% of what? I can recommend FF to 100% of users. Maybe 10% of them
might actually try it. But I won't lose sleep over what someone else
decides to do on their computer. If they complain that the page does
not display properly, I'll explain that they have 2 choices: use FF,
or ask MSFT for a fully CSS2 complaint browser. I won't really care
which they choose.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 8 '06 #8
On Tue, 09 May 2006 04:03:04 +0800 ironcorona <ir*********@gm ail.com> wrote:
| ph************* *@ipal.net wrote:
|
|> | Where you have .pad_top, .pad_right, .pad_bottom, .pad_left
|> | you might wish to alter *to* the following code:
|> |
|> | .pad_top {
|> | margin-top: 20px;
|> | padding-top: 20px;
|> | }
|> | .pad_right {
|> | margin-right: 20px;
|> | padding-right:20px;
|> | }
|> | .pad_bottom {
|> | margin-bottom: 20px;
|> | padding-bottom: 20px;
|> | }
|> | .pad_left {
|> | margin-left: 20px;
|> | padding-left: 20px;
|> | }
|>
|> What's the purpose of that? I tried it and it only made things worse.
|
| Just take out the width:100% and the height:100% AND change the .pad
| parts in the way I've shown. Then have a look at it.

I did. So. I can see it changes the effect on the width expansion.

The margin settings did nothing. I'm not sure if they should, or should
not, but I have found that margin settings don't affect things inside of
table cells, either HTML tables or CSS tables. This is inside of table
cells, and the lack of effect is at least consistent with what I have
seen elsewhere.

But I still want to know why it is something gets 40px wider when I put
only 20px of padding on the left (or on the right). Why would it have
to be doubled?
|> If there's a way to also make all table columns the same width, and all
|> table rows the same height, that would be a plus for certain projects.
|> Note, absolute sizing isn't what I'm asking for. I want it to all be the
|> minimum size needed for the largest object to fit, whatever that might
|> happen to be.
|
| If you do what I've said then it will expand to fit whatever content.
| Actually, to make things easier here's the whole code:

The margin settings had no effect. Maybe that's a bug. But it's not one
that has caused me any troubles.

Since the margins are _outside_ of the border, if they did have an effect,
I would expect that effect to expand at most the margin edge to the inner
size of the container, and leave the border (20px in this case) smaller
than the container, which isn't the effect I want. I want the _border_
of the box to have its outer edge at the inner edge of the table cell (or
whatever is containing it in other cases).

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 9 '06 #9
ph************* *@ipal.net wrote:
On Tue, 09 May 2006 04:12:58 +0800 ironcorona <ir*********@gm ail.com> wrote:
| ph************* *@ipal.net wrote:
|> On Tue, 09 May 2006 02:28:26 +0800 ironcorona <ir*********@gm ail.com> wrote:
|> | ironcorona wrote:
|> |> ph************* *@ipal.net wrote:
|> |>> Here is a simpler (no drop shadows) example of the padding bug I see:
|> |>>
|> |>> http://phil.ipal.org/usenet/ciwas/20...buttons-1.html
|> |>>
|> |>> So far I find nothing in the CSS2 document that says I should get this
|> |>> kind of inconsistent result.
|> |>
|> |> It's only a bug if you've done it correctly and it *still* doesn't work.
|> |>
|> |> From the above mentioned web page:
|> |>
|> |> "Each table cell is wrapped in a 1px solid red border. Each table cell
|> |> also has 2px of its own padding just to get the red border a little
|> |> distant from the button so it is easier to see. Notice how the table
|> |> cell padding is NOT symmetrical (another bug?)."
|> |>
|> |> Removing height:100%; and width:100%; from .menu_button solves this
|> |> problem. It's not a bug.
|>
|> Then what do you suggest to get the box inside the table cell to expand
|> to fully fill the table cell? The use of height:100% and width:100% was
|> what was recommended in an another example elsewhere.
|>
|> Still, it makes no sense that padding added to the left side should grow
|> the right side,
|
| It's because of your code. You had the buttons as 100% of it's parent
| element. Then you added 20px padding to the parent element. Now the
| button on the inside is 100% (of the content area) of the parent + 20px.
| So 100% + 20px = bigger than the parent element. The browser then
| *has* to push the content outside.

The CSS document describes the width of a block as being the sum of the
width of the contained content, plus the padding, plus the border, plus
the margin.
No. that's the way that IE renders a block. When you set a width you
set the width of the content area. The margin, border and padding
values are then added on to this. EVEN if you set it to 100%.
No, the browser does NOT have to push the content outside. It could,
instead, make the containing element larger.
It does on my fix.

[...]
Suppose some browser (or maybe even Firefox) were do to what *I* expect
of it with that code I used. What argument would you use to explain why
the result is not compliant with the standard for CSS? And would you
use this argument only for the horizontal aspect, or would you also use
it for the vertical aspect (that does what I expected, and not what you
described, even now).
Get over the horizontal and vertical dimensions. They work slightly
different in practice. You have to assume that because the blue (link)
boxes got pushed outside the red boxes is because you've done something
wrong.

[...]
| Yes but only about 10% of them. Maybe even less.

10% of what? I can recommend FF to 100% of users. Maybe 10% of them
might actually try it. But I won't lose sleep over what someone else
decides to do on their computer. If they complain that the page does
not display properly, I'll explain that they have 2 choices: use FF,
or ask MSFT for a fully CSS2 complaint browser. I won't really care
which they choose.


That's a stupid way to make a web site. You can't make it browser
specific and then expect people to download/install a new browser just
to look at your web page. The fact that IE renders things wrong doesn't
mean you have to ignore IE users you just have to figure out a work
around so that it works in IE.
--
Brian O'Connor (ironcorona)
May 10 '06 #10

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

Similar topics

17
29234
by: delerious | last post by:
I'm trying to add some simple padding to an IMG by using a padding-right style, but it doesn't work in IE. Works fine in Mozilla and Opera, though. Here's a link to a page which displays this IE problem: http://home.comcast.net/~delerious1/index12.html I do know that I can solve the problem in IE by changing padding-right to margin-right, but then the links cannot be clicked when the mouse is over that margin area. So I would...
10
2040
by: Alan Little | last post by:
Is there a way to get NS7 to right-pad? With padding-right, it's completely ignored. With padding, it pads top, bottom and left, but not right. In fact if I push the padding up to a large number, it pushes the content out past the right edge of the item. How can I get it to behave? -- Alan Little Phorm PHP Form Processor http://www.phorm.com/
0
1839
by: Red | last post by:
This is apparently an ie display bug, I can't seem to figure out which ie bug this is. a 3 sided border is created by wrapping the 'inner' box in the 'middle' box and padding the 'middle' box 1px on 3 sides. It looks the same in firefox and ie. Then the same box is wrapped in yet another box with a red border on the bottom. In Firefox the 'middle' box still has padding on only 3 sides, and the red border is showing on the bottom. In...
2
19183
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 stylesheet file: ..formContentTable
7
8830
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 IE6. I've double-checked the CSS for any padding or margings than may cause it, but have found none. How can I remove it? Thanks,
4
4285
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 <div id="padding0">
13
3884
by: Amarendra | last post by:
Folks, This structure padding issue is bothering me now, could not locate a satisfactory answer on clc, so here it goes... I have a structure, given below: typedef struct { int flag; char keys; char padding;
5
1631
by: Thomas Bügel | last post by:
Hi! Out of the book from Dan Cederholms (Bulletproof Webdesign - german ed.) I tested chapter 4 (creativ floating). For no CDR is included I wrote the code from the text in the book (images and according text is taken from tv-spielfilm.de). But it don't work for me in the same way as Dan tells in the book. I tested it with different browsers on Windows 2000. It should show three pictures with a white frame (build though the padding 4px)...
11
2458
by: john_aspinall | last post by:
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;
0
8725
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8644
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9214
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9074
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8970
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
7807
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6560
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5902
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
3
2027
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.