Placing images without spaces

[george]

I have a simple web site here which demonstrates my problem. I am trying to get multipul images to line up without spaces between them. I built a "holdBox" to contain my images, and listed all the images with no spaces between them. This got rid of unwanted space between images, but not spaces between rows. My guess is that when the images wrap to the next row, a space is somehow introduced. Any ideas?

[jeffman]

Images are inline elements, not block elements. You are stacking them as if they were blocks. But they want to behave as inline (like characters). The only reason they are stacking is that you they are contained by a small div that will not let more than one be in the same horizontal level. So they wrap, just as words would wrap.I think that is causing the space.Try defining them as blocks in your CSS:display: block;

[jeffman]

Oops. Just realized each row is multiple images. You'll need to use floats and clears to make my plan work.

[[dx]]

You could

<table cellspacing="0" cellpadding="0"><tr><td>IMG tag here</td></tr><tr><td>IMG tag here</td></tr><tr><td>IMG tag here</td></tr></table

So this will work.

[allyouhave]

If the images are displayed as inline elements, you could try making the div's line-height: 0px;. Worth a shot, eh?

[jeffman]

Does it need to be structured this way at all? I don't know what you plan to use it for, so I can't really say. My instinct says that everything below the top "row" can be accomplished with a single, repeating background image. Take the composite image that you probably started with, and crop it so it's 1px tall by, I guess, 287px wide. It will be small and you won't need tons of HTML to get the same effect. Just make it the background of #highYella and have it repeat-y . The top "row" could be all one image too, right? That basically reduces your HTML to this:<div id="#highYella"><img src="composite.jpg"></div>And you now have the option of filling the rest of that div with real content. (It looks kind of like the frame for a menu or newswire.)Unless this is a school assignment of some kind . . .

[george]

Does it need to be structured this way at all?

No. And I like your idea of creating and using the 1px high 'row' to fill in the space with. This is being used for a carry out menu. About school assignments, I worked up so much debt paying for classes that were all review and did not help me find work that now I can't even dream about taking more classes without dreading the unservicable debt. Thanks as alwaysGeorge

[thescientist]

You could

<table cellspacing="0" cellpadding="0"><tr><td>IMG tag here</td></tr><tr><td>IMG tag here</td></tr><tr><td>IMG tag here</td></tr></table

So this will work.

ehh....why tables? There's certainly a much more practical (read: semantic) solution.

[jeffman]

<insert mind-numbing debate about table-based layouts>

[Dilated]

<insert mind-numbing debate about table-based layouts>

I was waiting for this as well. :)As well as the point that any design-related images should be strictly CSS. (I'm guessing these are design related, I haven't looked.)

[george]

<insert mind-numbing debate about table-based layouts>

The nifty thing about the six images I use for the top corners, sides, and fill space, is that now I can expand or shrink my box dynamically and retain my grapic corners and sides. That's the plan anyway.

[Ingolme]

My favourite way to remove the space below inline elements is to apply vertical-align: middle; to them. Working with a lot of floats can be complicated.