|
|
Posted by Ben C on 07/27/07 23:01
On 2007-07-27, Jim <blkbam@gmail.com> wrote:
>> No I was asking a real question. What _specifically_ is it that you
>> think Firefox is doing wrong with your page, in other words, what
>> behaviour do you expect, and why? If it turns out there are actually
>> bugs in Firefox with this you can report them. Equally likely in this
>> case though, as I was trying to explain, is that you are looking at
>> legitimately different interpretations of how to compute row and column
>> dimensions when rowspan and colspan are involved, since this is not
>> precisely described in any W3C standard or specification.
>
> I apologize for mistaking your question for malace.
>
> The shadows on the side of the text is made up of 3 images (top
> corner, middle, bottom corner). When the radio button is selected the
> size is increased 400 pixels to accomidate the size. Also there are
> two spacers in the bottom corners which also increase in size the same
> amount to strech the table. What is happening (which is what I want
> to not happen) is that the other cells in the table increase in size
> even though the images are not changed. In the other broswers, the
> other cells stay their original sizes (before selecting a radio
> button) and thus no gaps between the image borders and the cell
> borders.
It sounds like this is a problem with how to distribute a rowspanning
row's height across the rows it spans. At the end of this message I've
put an example. Although the three non-spanning cells are each set to
height: 40px, Firefox makes them all about the same height (about a
third of 400px). Konqueror and Opera make the first two 40px and the
last one whatever's left. I don't have IE.
Which is right? Both. It's not specified and either behaviour is
reasonable. The HTML below asks for the first cell to be 400px high and
to be the same height as three other cells which are each 40px high. But
3 x 40 does not equal 400. So what is the browser supposed to do? Make
as many cells the asked-for height as it can, or make as many cells as
close as it can to the asked-for height?
In your case there may not even have been styled heights, just images
inside the cells that established their content heights, I can't
remember it in that much detail.
Coincidentally dorayme described a very similar problem recently. But in
that case it happened to be the behaviour of Firefox, which evenly
distributed the height of a spanning row between the rows it spanned,
that was desirable.
>> In the case of your page the suggestion is not just general "tables bad
>> CSS good". You have produced unnecessarily complex input that relies on
>> unspecified behaviour. Speaking purely practically, this table design of
>> yours does not work. OK it looks the way you want it to on IE, but do
>> you know why? How did you arrive at this design in the first place?
>>
>> I don't believe you need all these rowspans and colspans and nested
>> tables, your layout is fairly simple and could be realized with a very
>> small amount of CSS that was easy to understand both by humans and by
>> browsers. I think this will be much easier to do that trying to sort out
>> what you've got.
>
> The table was created by exporting images slices to html from
> FireWorks. I'm using FireWorks MX and after some searching I see that
> starting with MX 2004 you can export to CSS layout instead of html. I
> have the disk at home but never installed it since the version I had
> work. I've never been one to upgrade an application for the sake of
> newest and not patches or bug fixes.
Don't bother to upgrade it. Instead read some of the introductions to
CSS recommended in these groups and do it by hand. A tool may claim to
make things easy but the truth is things are only easy when you
understand them.
Here's that example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
td
{
background-color: green;
width: 100px;
}
</style>
</head>
<body>
<table>
<tr>
<td style="height: 400px" rowspan=3></td>
<td style="height: 40px"></td>
</tr>
<tr>
<td style="height: 40px"></td>
</tr>
<tr>
<td style="height: 40px"></td>
</tr>
</table>
</body>
</html>
Navigation:
[Reply to this message]
|