padding-left : What is up with this? 1

southbeach · Jul 16, 2008

Working on a page with two basic layers

Code:

<div id="banner" ...></div>
<div id="container" ...></div>

I also have CSS for these layers where I define width, background color and images, font, etc.

I defined width for both at 1000px. In the CSS for banner layer I added an image on the left hand size like so

Code:

background: #99CC99 url(../img/phpdevlogo.png) no-repeat center left;

I saved my changes and as I viewed the page, the banner page extended beyond the 1000px. I then change the width to 835px and it now matches my container layer. 165 is what I have set padding-left to; it is also 5px greater than the width of my image.

All this looks good in FF but not in IE. Questions:
Q. Why is this?
Q. How do I remedy this problem?

Thank you all in advance for your assistance!

Vragabond · Jul 16, 2008

I don't fully understand your question. You have a container that is 1000px in width, comprised of 835px width (the actual area where content is) and 165px of padding on one side. The actual container width will also depend on any border that you have, while margin will contribute to the outer width of the element (if you're trying to squeeze 1000px wide element with 5px margin on each side inside a 1000px container, it won't fit).

The only issue I can see with your code is that you have wrongly positioned the background. In shorthand for background positioning you first specify the x axis (left, right, center or respectable value) then the y axis (top, bottom, center or respectable value). Given that, your background would probably position itself to the top center position, since you order it to be horizontally in the center and vertically on the left, which will be an invalid value -- thus reverting to default, which is top.

That is probably not the issue, but you should fix it anyway. Please describe in more detail (and if possible provide links to the page in question) what is it that is failing in IE and how.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

Borvik · Jul 16, 2008

A simple test can show what is happening here.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en" xmlns:ic="[URL unfurl="true"]http://schemas.xmlsoap.org/ws/2005/05/identity">[/URL]
<head>
	<style type="text/css">
		.one{ width: 50px; background: red; }
		.two{ width: 50px; padding-left: 25px; background: green; }
		.three{ width: 75px; background: blue; }
		.four{ width: 50px; margin-left: 25px; background: yellow; }
	</style>
</head>
<body>
<div class="one">&nbsp;</div>
<div class="two">&nbsp;</div>
<div class="three">&nbsp;</div>
<div class="four">&nbsp;</div>
</body>
</html>

Take that code there are four divs - one at 50px, one at 50px with 25px left padding, one at 75px, and one at 50px with a left MARGIN of 25px.

If you view the page you will notice that divs "two" and "three" are the same width (75px). This is because the padding - is ADDED to the interior of the div, resulting in a total width of 75px.

If you use the margin to push it out - you'll notice that the div width is indeed the specified 50px, but it's right edge does match the 75px. Here it is added to the exterior.

And as Vragabond mentioned borders add a further consideration to your width/height calculations.

southbeach · Jul 16, 2008

here is my code

Code:

<body>

<div id="banner" style="position:absolute; left:0px; top:1px; width:835px; height:76px; z-index:1">
Content for my banner layer goes here!
</div>
<div id="menus" float: left; style="position:absolute; left:0px; top:78px; width:1000px; height:30px; z-index:10">
This is where I intend to display my CSS Hor. menu!
</div>
<!--- This is the container where all of the content goes.  Basically, this is the body of the form/page --->
<div id="container" style="position:absolute; left:0px; top:108px; float: left; width:1000px; height:100%; z-index:3">
This is the main container ...
</div>
</body>

The related CSS are

Code:

div#banner {
	font-family: Arial, Helvetica, sans-serif;
	background: #99CC99 url(../img/phpdevlogo.png) no-repeat center left;
  	color: #006666; 
	font-weight: bolder;
	font-size: medium;
	padding-left: 165px;
}
div#container {
	background-color: #DCDCDC;
	
}
div#menus {
	font-family: verdana, serif;
	font-size: 9px;
	color: #FFFFFF;
  	background-color: #336699;

}

All I am using is padding-left, not margin-left. I thought that padding-left applies to inner content not outer content and would not expect it to push the layer to the right as you explain and I am experiencing.

As you can see, I am simply intending to show an image in the background, place it left and make sure that any content starts 165px from left border thus clearing my image.

What say you?

Thanks!

vacunita · Jul 16, 2008

Padding not only affects the content but also affects the overall space an object takes up.

For example, a 500px wide div that has 50px of padding on each side will in fact take up 600px worth of space. Margins and borders also add to the over all measurements.

So in order to do what you want you need to reduce the width of your element.

You want your element to be 1000px wide but have 165px of left padding. you need to subtract the padding from your total space to get it to work properly. Which is why giving it a width of 835px makes it take up 100pox worth of space.

IE6 would wrongly take the padding from the width, keeping the total space occupied by the div to whatever the width was set to.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Borvik · Jul 16, 2008

Ah but I didn't say padding applies to the outer - I said it is ADDED to the interior of the div.

Take what vacunita said it's a better description of what I tried to say.

southbeach · Jul 16, 2008

OK - All of you are reporting exactly what I found. The thing is that I thought it was abnormal, especially since IE looks horrible.

Is there such a thing as a "condition" or IF:ELSE statement in CSS?

Thanks,

Borvik · Jul 16, 2008

Only using css expression - but then that isn't standards compliant and only works in ~~Exploder~~ - I mean IE.

Do a search for "css javascript expressions" and you should be able to see how they work - though I don't recommend using them.

vacunita · Jul 16, 2008

Conditional Comments for IE6 only. The rest of the browsers should adhere to the standard way of doing things. Including IE7. BTW.

http://www.quirksmode.org/css/condcom.html

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

southbeach · Jul 16, 2008

I am testing with IE 7.0.5730.11 and given the above code the layers look like this

+-----------------------------+
|IMAGE | Banner Layer
+-----------------------------+
+--------------------------------------------+
| | Menus Layer
+--------------------------------------------+
+--------------------------------------------+
| |
| |
| | Container
| |
| |
+--------------------------------------------+

Any layer in the code shows short of expected size. This is because I reduced the width to offset the padding-left value.

Everything looks nice and clean in FF but not in IE regardless of version.

I guess that my solution will be to use PHP to conditionally set the CSS properties based on browser and its settings.

ChrisHunt · Jul 16, 2008

Sounds like a classic box model problem.

According to the CSS standard, the specified width of an element excludes padding and borders - so an element that's going to appear 1000px wide on the screen, and has 135px of padding, will need to be specified with a CSS width of 865px. As you've observed, FF behaves according to this spec.

If you're not careful, IE follows it's own rules in which the CSS width is the overall width of the element out of which any padding and border should be taken. This might seem more sensible, but it's non-standard behaviour.

The answer is to specify a full DOCTYPE (Google for it) at the top of your HTML document. This will put IE (and other browsers) into "standards mode", where they'll all follow the same box model rules.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

southbeach · Jul 17, 2008

ChrisHunt,

Great piece of information. Adding

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

to my index.php page solved the problem ... My God, I should have asked this question long time ago.

Thank you so very much!

BigRed1212 · Jul 18, 2008

I like Borviks little example so I played with it.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en" xmlns:ic="[URL unfurl="true"]http://schemas.xmlsoap.org/ws/2005/05/identity">[/URL]

<head>

<style type="text/css">
.one{ width: 200px; background: red; }
.two{ width: 500px; background: blue; }
.three{ width: 480px;  padding: 0 10px 0 10px; background: green; }
.four{ width: 300px;  margin: 0 0 0 200px; background: yellow; }
.five{ width: 470px;  border-left: 15px solid teal; border-right: 15px solid teal; background: magenta; }
.six{ width: 450px;  border-left: 15px solid wheat; border-right: 15px solid wheat;  padding: 0 10px 0 10px; background: sandybrown; }
.seven{ width: 300px; margin: 0 100px 0 100px; background: lime; }
.eight { width: 300px;  padding: 0 100px 0 100px; background: silver; }
.nine{ width: 280px;  margin: 0 100px 0 100px; padding: 0 10px 0 10px; background: aqua; }
.ten{ width: 270px;  margin: 0 100px 0 100px; padding  0 100px 0 100px; border-left: 15px solid orange; border-right: 15px solid orange; background: gray; }
.eleven{ width: 250px;  margin: 0 100px 0 100px;  padding: 0 10px 0 10px; border-left: 15px solid coral; border-right: 15px solid coral;background: olive; }

</style>

</head>

<body>
<div class="one"><p>one</p><p>&nbsp;</p></div>
<div class="two"><p>two</p><p>&nbsp;</p></div>
<div class="three"><p>three</p><p>&nbsp;</p></div>
<div class="four"><p>four</p><p>&nbsp;</p></div>
<div class="five"><p>five</p><p>&nbsp;</p></div>
<div class="six"><p>six</p><p>&nbsp;</p></div>
<div class="seven"><p>seven</p><p>&nbsp;</p></div>
<div class="eight"><p>eight</p><p>&nbsp;</p></div>
<div class="nine"><p>nine</p><p>&nbsp;</p></div>
<div class="ten"><p>ten</p><p>&nbsp;</p></div>
<div class="eleven"><p>eleven</p><p>&nbsp;</p></div>
</body>

</html>

southbeach · Jul 18, 2008

Now, to see the difference between the two browsers, open your code in FF and IE. Now, remove

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en" xmlns:ic="[URL unfurl="true"]http://schemas.xmlsoap.org/ws/2005/05/identity">[/URL]

from your code and see what happens in IE.

Also, notice that FF has a margin between DIVs where IE does not.

I agree that Borviks sample was a very good illustration of the behavior in question.

Regards,

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

padding-left : What is up with this? 1

southbeach

Programmer

Vragabond

Programmer

Borvik

Programmer

southbeach

Programmer

vacunita

Programmer

Borvik

Programmer

southbeach

Programmer

Borvik

Programmer

vacunita

Programmer

southbeach

Programmer

ChrisHunt

Programmer

southbeach

Programmer

BigRed1212

Technical User

southbeach

Programmer

Similar threads

Part and Inventory Search

Sponsor