Closed Bug 268921 Opened 20 years ago Closed 20 years ago

CSS Padding causes div content area to render outside limits

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Platform:
x86
Windows 2000
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: gus, Assigned: bugs)

Details

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

When using PADDING in CSS and defining a width for the content area, the
resulting area is actually the width + the padding. 

Reproducible: Always
Steps to Reproduce:
Use the code in the additional information section to create a web page. It
appears to display correctly in IE.

In FF1.0 (and the pervious RC) the actual content area (the tan portion) is
larger than the 200 pixels specified. They grey portion shows what the actual
rendered size should be.

(this is my first bug reported, if I've done it wrong, let me know so I can do
better on the next one.) 

Actual Results:  
You can see that in both cases, the CSS rendered area and table rendered area
both exceed the 200 pixel limit (represented by the grey area).

Expected Results:  
The tan area and grey area should be the same size. Padding should affect the
inside of the content area and not be in addition to the content area.
"The Padding properties define the space between the element border and the
element content."

The results appear to be correct in IE6

<html>
<head>
<title>CSS 4</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<style>
.leftNavContainer {
	width: 200px;}


.leftNavButtons a {
	color: #000000;
	border: 1px solid;
	background-color: #dbcfb7;
	padding: 2px;
	padding-left: 3px;
	FONT-WEIGHT: plain;
	FONT-SIZE: 10pt;
	COLOR: black;
	FONT-FAMILY: Tahoma, Arial, Helvetica;
	TEXT-DECORATION: none;
	border-color: #ebe1cc #B5A483 #B5A483 #ebe1cc;
	display: block;
	margin: 0px;
	width: 100%;
	text-align: left;}

.leftNavButtons a:hover {
	border: 1px solid;
	padding-left: 4px;
	padding-top: 3px;
	padding-bottom: 1px;
	padding-right: 1px;
	background-color: ebe1cc;
	border-color: #B5A483 #ebe1cc #ebe1cc #B5A483;
	color: #000000;
	text-decoration: none;}


div.menuBar {
	BACKGROUND-COLOR: #018FD9;
  xbackground-image: url(/template/recomposize/tabdarkpretty.gif);
	padding-left: 4px;
	padding-top: 2px;
	padding-bottom: 4px;
	padding-right: 3px;
	border: 0px solid;
	margin: 0px;
	width: 100%;
	FONT-WEIGHT: bold;
	FONT-SIZE: 12pt;
	COLOR: white;
	FONT-FAMILY: Tahoma, Arial, Helvetica;
	TEXT-DECORATION: none;
	text-align: left; /* for ie when centering */
}



</style>

<body bgcolor="#FFFFFF" text="#000000">

This is first
	<div class="menuBar">Members Only</div> 
	<br>
<div class="leftNavContainer">
	<div class="menuBar">Members Only</div> 
	<div class="leftNavButtons">
		<a href="url1">bubba1</a>
		<a href="url2">bubba2</a>
		<a href="url1">bubba1</a>
		<a href="url2">bubba2</a>
		<a href="url1">bubba1 is a very long link and a very long link is bubba1</a>
		<a href="url2">bubba2</a>
		<a href="url1">bubba1</a>
		<a href="url2">bubba2</a>
	</div>
</div>

<table width="200" bgcolor="#CCCCCC" cellpadding="0" cellspacing="0" border="0">
  <tr><td>&nbsp;</td></tr>
	
	
	
	
	</table>
<br>
<table width="200" bgcolor="#CCCCCC" cellpadding="0" cellspacing="0" border="0">
  <tr><td>
	<xdiv class="menuBar">Members Only</xdiv> 
	<div class="leftNavButtons">
		<a href="url1">bubba1</a>
		<a href="url2">bubba2</a>
		<a href="url1">bubba1</a>
		<a href="url2">bubba2</a>
		<a href="url1">bubba1 is </a>
		<a href="url2">bubba2</a>
		<a href="url1">bubba1</a>
		<a href="url2">bubba2</a>
	</div>
	</td></tr>
	</table>
This is last


</body>
</html>
(In reply to comment #0)
> Expected Results:  
> The tan area and grey area should be the same size. Padding should affect the
> inside of the content area and not be in addition to the content area.
> "The Padding properties define the space between the element border and the
> element content."

You're misunderstanding the spec.  Padding is in fact in addition to the
content.  It is its own space BETWEEN the border and the content.  It's NOT part
of the content space.
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → INVALID
--> Websites :: www.mozilla.com so timeless can close out Firefox :: Product Site.
Component: Product Site → www.mozilla.com
Product: Firefox → Websites
-> Firefox::General (939393)
Component: www.mozilla.com → General
Product: Websites → Firefox
You need to log in before you can comment on or make changes to this bug.