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

On 2008-08-13, dorayme <doraymeRidThis@xxxxxxxxxxxxxxx> wrote:
In article
<doraymeRidThis-EEEE87.09451713082008@xxxxxxxxxxxxxxxxxxxxxxxx>,
dorayme <doraymeRidThis@xxxxxxxxxxxxxxx> wrote:

In article <slrnga2b82.3nh.spamspam@xxxxxxxxxxxxxxxxx>,
Ben C <spamspam@xxxxxxxxx> wrote:



I'm sorry but I have completely mucked up that last post in reply to
you. Please don't read it, I was working on the urls in the middle of it
and the names of the URLs got changed as I went and hell... The main
problem was I renamed killy2_ben.html as killy2_except_in_FF.html. But
never mind...

Lets go again with the essentials:

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.

Different browsers take different approaches to the real dimensions and
aspect - proportion of width to height - of images. Plus there might be
other things going on for how FF is calculating width here. In this URL,
FF overflows the image wide and right outside the cell

I'm not getting that in Firefox 3.

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.

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.
.

Loading