White Space and Images in CSS Layout?

Images have white space in IE 6

[eproshuto]

While waiting for my new books by Eric Meyer I am having some difficulty with redesigning an existing site in CSS.

I have to meet 508 compliance for Asistive Technology devices and tables from the original design are a big problem I would like to remove.

I am experiencing some difficulty with white space below images placed inside a container.

The new layout has a header 3 columns and a footer.

Inside my new CSS created columns I need to recreate a 3 column 3 row table. This table had a graphic across the top row (index tab looking graphic) which spanned the 3 columns. In the second row the left and right most columns had a 1 pixel wide gif height 100%. This made up the sides of the "Index Card". The middle column contained textual menu selections. the third row had a graphic that spanned three columns making up the bottom of the "index Card". All the graphics in the table made a seamless Index card of sorts, like the one your mom uses for recipes.

When I try to build this I get mixed results from Opera, IE and Netscape. IE shows white space below the images and netscape does not. Any help with pointing me to resources would be appreciated.

[BlobFisk]

Welcome [webmasterworld.com] to WebmasterWorld, eproshuto!

This should remedy the situation:

td img { display: block }

From what I've read on this forum, the more recent browser versions aren't too fond of table layouts with images in them. Also, Netscape tends to add in white space if there is a line break between you <img> tag and your </td> tag - having all of this code on one line can also eliminate the problem.

[Nick_W]

Yes, welcome to WebmasterWorld ;)

Are you using tables for this? Blobfisk is spot on if you are but, I read your post to mean you were not using tables?

More on Mysterious Gaps in Tables [devedge.netscape.com]

Nick

[Longhaired Genius]

If you are a css beginner and have to redesign a tables-based website to meet accessability guidelines, in my opinion, you should not try to duplicate the existing design with css; it's likely to be a frustrating, and perhaps impossible, task.

Take the opportunity to simplify the layout as much as possible with the aim of getting the information to the visitor quickly.

Take some time to play with css on dummy pages and then recast the website to fit what you can do rather than trying to learn everything you might need to make the site look the way you want straight away.

Css is basically simple but it's also so flexible you can get yourself into an overcomplicated mess if you're not careful.

[eproshuto]

Thanks for the reply,

I am not using tables for layout, only data. Herein lies my challenge.

Picture a recipe card that has a header graphic, footer graphic and a right and a left side graphic. I need to be able to create this as an entity that can be duplicated several times for different headings. The element (previous table layout) needs to be able to expand vertically as content is added or removed. The side graphics need to be able to expand or contract with the content and be seamless.

Is this a pipe dream?

If it is not, I am up to the challenge.

Any help would be appreciated.

I am not being given the choice for a different concept. If I have to incorporate tables to achieve the end result I will, but I would much rather do it with CSS.

I am just a glutton for punishment.

Thanks in advance.

[Longhaired Genius]

If all the elements of the table need to be kept together and in the same relationships to each other and if it works already and expands and contracts as you want, then I don't see any harm in leaving it as a table. You can easily fit a table into a css layout as just another box.

[Nick_W]

Agreed. Under the circumstances that's certainly the way I'd go...

Nick