No text in divs, but text zoom blows them apart?

[HannahG]

I'll preface this with saying that I've found a workaround for my problem, but I'd like to understand why my problem happened in the first place. So any guru out there that knows, I'd appreciate your input!

Anyways, onto the problem...

I have a bunch of header divs that contain only images. Each header div extends the width of the container they're placed in so that they stack on top of one another. In each of these divs, there's either a full width image, or a series of images which equal the exact width of the container.

Here's where the problem comes in: in every browser except IE 6.0, whenever increasing text size using browser controls, the header divs blow apart - some start moving downwards but some don't move at all. As if some had had text in them. Which they don't. I even butted all the tags up to each other so there was this one big block o' code.

Here's a snippet of my CSS:

* {
margin: 0;
padding: 0;
border: 0;
}

#container {
width: 772px;
margin-right: auto;
margin-left: auto;
text-align: left;
}

#headertopnav, #headertopbar, #headerlogo, #headernav {
width: 772px;
color: #000000;
background-color: #a9a4a2;
}

#headertopnav {
height: 50px;
}

#headertopbar {
height: 15px;
}

/* etc. for the rest of the headers */

My workaround is this: I added font-size: 0px; to the first global header rule. Now it doesn't blow apart even at 300% zoom, but it still seems suspicously like a hack for something I don't understand. Kinda like bailing the water out of the boat but not plugging the hole...

Thoughts anyone?

[Span]

As inline elements, images do sit on the baseline - like there is text on the same line the image is.
If you give the images a display:block; your divs should stay the same at any increased font size. They will behave as block elements though; if you want two or more images on one line you'll have to float them.

[HannahG]

Ah, I see! That makes perfect sense. Especially when I think of how images normally act when placed in a paragraph tag. I'm glad I asked now because that little bit of ignorance would surely have come back to haunt me.

So off I go to the drawing board to rework those headers. No sense in not taking the time to do it right!

Thanks alot for helping, I appreciate it greatly! ^_^

[DrDoc]

Instead of giving the images

display: block

you can just do

vertical-align: bottom

[HannahG]

DrDoc, thanks for the suggestion...but I'm not entirely sure that I understand how it should work. I tried setting vertical-align: bottom; on all the header div images, but they don't line up anymore and blow apart when increasing text size. Am I doing it wrong?

Thanks! ^_^