Why does this happen?

Padding problem...

[spyder_tek]

This is something that's been bugging me for quite a while...

I'm using IE6 as my main test browser and when I increase/decrease the text size under View > Text Size, the padding seems to increase between my DIV containers.

For example:

<style type="text/css">
div#nav {border:1px solid #E6E6E6}
</style>
<div id="header">
<img src="logo.png">
</div>
<div id="nav">
</div>

The padding increases between the "header" container and the "nav" container. When you switch from smallest to largest, it adds about 5px of padding. I added a 1 px border to the "nav" container to illustrate the problem.

Is there a way to fix this?

Thank you...

[bedlam]

Well, without testing, I'd say the source of your problem is the img element and that the solution is to set the following CSS rule:

#header img { vertical-align:bottom; }

Here's why:

• Default padding and margins on div elements is zero, so they should not be the problem unless you've explicitly set them,
  
• img elements are inline-replaced [w3.org] elements, so they behave like other inline elements. Specifically, they do not sit at the bottoms of their parent containers by default, but rather on the baseline of the inline box they're part of. When the font size increases, the overall line-height increases; the increase in the gap you see is the growth of the space between the baseline and the bottom of the inline-box the image is contained in. For more information about the relation between 'baseline' and 'line-height', see this informative thread [webmasterworld.com].
  

-b

[Fotiman]

It could also be that the line-height is what you're seeing.

[bedlam]

It could also be that the line-height is what you're seeing.

Er...that's precisely what I already posted about, and exactly the problem that the fix I suggested corrects...

-b

[Fotiman]

Hahahha... oops. Sorry. I read most of your post, but not all of it. Didn't get to the part where you mentioned line-height. :-)