cross browser border-collapse

Hi

========
Problem:
========

I want images in table rows connect vertically.
All images are 32 px in height.

=====
Code:
=====

<style="text/css" media="screen">
table, tr, td { padding: 0; border-collapse:collapse;}
td img { vertical-align: text-bottom}
</style>

<table>
<tr>
<td><img></td>
<td><img><img></td>
</tr>
<tr>
<td><img></td>
<td><img><img><img></td>
</tr>
</table>

==========
Rendering:
==========

See http://lingo.uib.no/daniel/border_collapse.gif.

Note: IExplorer has no vertical space between the imgs,
Mozilla has 1 px, and
Opera has 2 px.

I want the "IExplorer way" cross browser-wise.
Any help is appreciated.


Thx,
- Daniel

In article <MPG.1afba7ccc4116c779896a9 (AT) nntp (DOT) uib.no>, jung (AT) uib (DOT) no says...

I want images in table rows connect vertically.
IExplorer has no vertical space between the imgs,
Mozilla has 1 px, and
Opera has 2 px.

Supplement:

This is the same if I put it in divs instead of tds (changed css
respectively):

<div> <img> <img> text </div>
<div> <img> <img> <img> text </div>
<div> <img> <img> <img> text </div>

There are vertical gaps. I have now found out why. I stripped too much
in the code excerpt; I forgot to include the links. It was really more
like this:

<div> <img> <a> <img> text </a> </div>
<div> <a> <img> </a> <img> <img> <a> <img> text </a> </div>

and so on. It seems to work only if either the whole line is linked or
nothing is linked at all (including img and text):

<div> <a> <img> </a> <a> <img> </a> <a> text </a> </div>
<div> <a> <img> </a> <a> <img> </a> <a> text </a> </div>

aligns fine in all browsers.

<div> <a> <img> <img> text </a> </div>
<div> <a> <img> <img> text </a> </div>

as well.

A non-linking text or img along with linking ones inserts extra vertical
space in Opera and Mozilla. I have tried a lot now. Even style
definitions like

a { border:0; margin:0; border-collapse:collapse; }

wouldn't do the trick. I want to get rid of the spaces, and I'd rather
not dummy-link all elements in a row, as you might understand.


Any help is highly appreciated.

- Daniel

I want the "IExplorer way" cross browser-wise.
Any help is appreciated.


Thx,
- Daniel

In article <10936619jed7lf1 (AT) corp (DOT) supernews.com>, usenet3
@julietremblay.com.invalid says...

Daniel Jung wrote:
This is the same if I put it in divs instead of tds

Well, stop; which markup is correct? Is it tabular data or not?

As you may have figured, i changed it from table to div since it wasn't
really tabular data. It was in the beginning, but I moved far from that
in the process.

Hmm, I can't figure out how that would change it, unless there's
something you're not telling us. Well, come to think of it, there *is*
something you're not telling us. What is the url?

It's local. Maybe I can upload it, but I wrote everything noteworthy in
the two postings.

Thanks for a quick reply, Brian.

- Daniel

In article <1093607p8rsm6d9 (AT) corp (DOT) supernews.com>, usenet3
@julietremblay.com.invalid says...

Daniel Jung wrote:

I want images in table rows connect vertically.

First, read:
http://devedge.netscape.com/viewsource/2002/img-table/

Nice reading, but doesn't really answer my question. I have to have a
transitional doctype declaration. And I changed it from table to div
btw.

Then, make sure you have border-collapse: collapse; set
http://www.w3.org/TR/CSS21/tables.ht...order-collapse

I put that in the style section which I submitted previously. So that's
taken care of.

All images are 32 px in height.

No matter what their dimension is.

Not really, since an img with 33 px height would cause a 1 px gap for a
32 px height img (optically). To make sure that that is not the error
source, I specified all imgs 32 px height. (redundantly, I know, since
even IE wouldn't have rendered it the way it does, as I said, and made a
screenshot of).

- daniel