Re: Image not filling a table table (html4 strict)

In article <slrnga52q5.4g6.spamspam@xxxxxxxxxxxxxxxxx>,
Ben C <spamspam@xxxxxxxxx> wrote:

On 2008-08-13, dorayme <doraymeRidThis@xxxxxxxxxxxxxxx> wrote:

I played about with an internal cell div wrapper before, but now, I
have looked at your double whammy approach.

But enlightenment has turned darker as I watch it under different
browsers and different conditions. A can of worms!

Here is URL with one interpretation of your suggestion to double up
the divs. Now this makes things work in Safari and Opera but all hell
breaks loose in FF so I call it:

<http://dorayme.890m.com/alt/killy2_except_in_FF.html>

In Firefox 3 I get a 1px gap at the top and bottom of the image (but not
in Opera). Konqueror also has the gap. The image is the right width.


I get in FF2:
<http://dorayme.890m.com/alt/justPics/killy2_except_in_ff.png>

....

As for the other problem (which I don't know if you're seeing, but you
probably are) it's related to border-collapse: collapse.

If you add background: #ddd to the relatively positioned div and
background: pink to the table and then try with and without
border-collapse: collapse, you can see that when Firefox collapses a
border the border box of the table ends up outside the div. Making the
border on the td much bigger makes the problem clearer. Konqueror
(3.5.9) does the same.

Opera does what one might have expected-- the table doesn't overflow the
div it is in even with border-collapse: collapse. But actually I think
Opera is wrong and Firefox 3 and Konqueror are right: see CSS 2.1
17.6.2.

Without border-collapse: collapse they all behave the same-- the table
always leaves room for 2px around any cell borders. This is correct and
is because 2px is the border-spacing from the default style***.

Of course if the outer div's top and bottom edges are in a different
position relative to the cell contents, our absolutely positioned img
container moves and that is the problem.

So the solution is OK provided you don't want collapsed borders.


What I am seeing in Safari 3 (latest Mac) and Opera, I am getting when
I remove border-collapse is image protruding top and bottom of its cell
and fixable by bumping up top:2px; and bottom:2px; to 4px each. I can't
say about FF 3.

Note that there is one other fishy thing we are relying on here which is
auto "left" for the absolutely positioned div around the img. It's
supposed to get positioned where it would have been if it had normal
flow, but browsers are free to guess at it.

Since we are fixing the td that holds the image to a width of 137px, we
might fix this problem in FF by adding an explicit width to the div that
immediately wraps the image. And this should not affect the other
browsers too much:

<http://dorayme.890m.com/alt/killy2_not_too_bad.html>

Yes that looks fine-- but I never had the width problem in the first
place. Must have been fixed in Firefox 3. It's 3.0 I'm using.

Now *this* looks close to what might be wanted in Safari and Opera.

But still the border-collapse problem. If the table has border-collapse:
collapse removed then it looks the same in all three.

Without border-collapse, adjustments of top and bottom from 1px to 4px
are needed at my end in Opera, Safari and FF2 to make them look more or
less kosher and the same.

I forget if I have said that if we carry on like this we should open a
business service to the pixel perfect brigade.... <g>

--
dorayme
.

Loading