IE8 & Padding 2

[1DMF]

Is it me or is IE8 doing the same thing as IE6 and adds the padding to the element dimension?

It's doing my head in!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[BillyRayPreachersSon]

Don't all browsers do this in standards-compliant mode?

E.g. if you have an element of 120x100px, with 10px of left and right padding, and 40px of top and bottom padding, the resulting dimensions would always be 140x180px...




Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[1DMF]

OIC I thought this was a bug in IE6. I must be getting confused with the way it added the margin to the element width.

If I set an element to be 100px width and have a 10px left & right padding I expect the usable content to be 80px, seings as I have fixed the width to the element!

I expect padding to be taken away from the element not added, that then makes the element bigger than I defined.

If I built a room 10ft x 10ft and then padded the walls 1ft thick, I wouldn't end up with a room 12ft x 12ft, it would still take up an area 10ft x 10ft and inside would be 8ft x 8ft wouldn't it?

But what I expect to happen and what should happen, is never normally what actually happens.

Thanks for clearing that up.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[ChrisHunt]

If I set an element to be 100px width and have a 10px left & right padding I expect the usable content to be 80px

Your expectqation is understandable, sensible even, but not how the standard box model works. The above scenario would result in a "usable" width of 100px, with 10px padding either side.

One reason it works like that is this: Suppose the element you're sizing is an image. It's 100px wide, so that's what you put in the width property. Any padding or margins you might want have to be added to that width, not subtracted from it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[1DMF]

Yup I can see what you mean when using it against an image.

Padding can be used in conjunction with border to give images a nice finish and yes it increases the size of the overall image size (well the element container, not the image itself).

Cheers Chris.



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!