cross browser border-collapse

Daniel Jung

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

Jul 20 '05 #1

Daniel Jung

In article <MP************************@nntp.uib.no>, ju**@uib.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

Jul 20 '05 #2

Brian

Daniel Jung wrote:

I want images in table rows connect vertically.
First, read:
http://devedge.netscape.com/viewsource/2002/img-table/

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

Border width should be 0 by default, so no need (iirc) to set border: 0;
for td.
All images are 32 px in height.

No matter what their dimension is.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

Jul 20 '05 #3

Brian

Daniel Jung wrote:

ju**@uib.no says...

I want images in table rows connect vertically.
Supplement:

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? Css is
secondary, since it's optional, so always start with the correct markup.

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.

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?

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

Jul 20 '05 #4

Daniel Jung

In article <10*************@corp.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

Jul 20 '05 #5

Daniel Jung

In article <10*************@corp.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

Jul 20 '05 #6

Brian

Daniel Jung wrote:

Brian says...

As you may have figured, i changed it from table to div since it
wasn't really tabular data.
Well, you should still read the article from devedge whose link I
already gave you. The point of that article -- the baseline and
descender space.

You may consider floating the images left: that will change their
display to block, removing any consideration of descender space. But
floats often create their own problems.

What is the url?

It's local. Maybe I can upload it,

No "maybe" about it; need to see it if you still can't get it to work
after dealing with the baseline issue. ;-)
but I wrote everything noteworthy in the two postings.
Says you. You never know what might be affecting it.
Thanks for a quick reply, Brian.

Of course.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

Jul 20 '05 #7

Brian

Daniel Jung wrote:

us*****@julietremblay.com.invalid says...

Daniel Jung wrote:

I want images in table rows connect vertically.
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.

That's too bad.
And I changed it from table to div btw.

So you told us. But baseline and descendor space have to do with all
inline content, not just inline content in a table. The devedge article
talks about tables because it discusses table layouts "blowing apart."

Have you tried floating the images?

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

Jul 20 '05 #8