191431 - [wrap]'FLOAT: left' CSS style breaks table width in new builds

Status: RESOLVED WORKSFORME

(Core :: Layout: Floats, defect, P3)

Description

[Jerome Lacoste]

In the attached test case, containing a simple table with one cell, the new
builds  do not take into account the table width. Removing the FLOAT: left CSS
attribute solves the problem.

Neither IE 6 SP1, mozilla 1.2.1, nor Phoenix 0.5 exhibit the problem and display
a table taking 90% of the window space.

Comment 1

[Jerome Lacoste]

Attachment: test case shows a wongly displayed table

Comment 2

[Jerome Lacoste]

Attachment: screenshot of aforementionned problem

Comment 3

[Jerome Lacoste]

Attachment: same test case shown in Mozilla 1.2.1

This is supposed to be the correct behavior. At least the one that was produced
before.

Comment 4

[Boris Zbarsky [:bzbarsky]]

Hmmm... In CSS2, floats are required to have a width (and yours does not).

In CSS3, that requirement is being removed, but replaced with the requirement
that an auto-width float shrink-wrap its children (whatever their preferred
width is).  The table's preferred width is "MAX(90% of width of float, width of
table's kids".  So the float is solving the equation:

x = MAX(0.9*x, "width of table's kids")

and the only solution, clearly, is "width of table's kids".

I suspect that when dbaron made shrink-wrapping work correctly we stopped doing
whatever evil hack we had in place to look like IE.

Comment 5

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

->floats

Comment 6

[Koen]

Attachment: Valid CSS rendered wrong by Mozilla > 1.4

A screenshot from a falsely rendered CSS-file in Mozilla. The CSS-file is
Valid-css2 and HTML-code is valid HTML-4.01 code.

Comment 7

[Boris Zbarsky [:bzbarsky]]

Koen, please provide the following information:

1)  The exact build you were testing.
2)  The testcase you were using (attach it to this bug).

The image you posted isn't helpful without the testcase you tested on.

Note that the original testcase in this bug is NOT showing the problem in my
1.7a trunk build (2203-12-28-17 windows build).

Comment 8

[Boris Zbarsky [:bzbarsky]]

Mail from Koen:

I'm sorry if all wasn't clear, I'm really not used to use 'Bugzilla' but wanted
to help with a problem that I considered a bug.

Indeed, this exact bug isn't showing in the latest nightly build I just
downloaded (1.7a).

On the other hand, if you look at the picture (or just visit this site
http://linux.cudeso.be/projects.php) you can see that near the W3C-images, the
text is all 'cluttered-up'. Moreover (this is not showeable on the picture), the
mouseover effects on the left-side (changing color when moveing over the links)
is not working.

This also happened when I was using Firebird 0.7 but not with either Opera,
Konquerer or Internet Explorer. I've made sure that both the CSS-files and
HTML-files are W3C-compliant, just to rule out these mistakes.

I did the latest test on fairly standard Windows 2000 Pro (SP3) with, as far as
I now, no other 'customizations'.
I also experienced the same problem (but I can't test it right now) on a Red Hat
Linux 9 install (with all latest RPM's installed).

How do I go best from here? Do I submit a new bug for the 'cluttered-up text'
and 'not hovering' or do I attach it to this bug? 

Comment 9

[Boris Zbarsky [:bzbarsky]]

Koen, there are no floats there that I can see... so yes, a separate bug would
be needed for the cluttered-up text -- that's not this bug.

The hover not working is because you have the non-hover class set on the <a>
elements, so that overrides the styles you set on the <td>.

Comment 10

[Koen]

Uhm, regarding the hover code, 

I removed everything except the 'onmouseover'-stuff from <td> and the problem 
remains. In the setup below I guess that at least the mouseover for <td> should 
work (and it doesn't on Windows 2000 Pro/Mozilla 1.7b) or am I just falsely 
interpreting the html-standards?

**html-code**
<tr>
  <td class='MenuLeftItem' onmouseover='this.className="MenuLeftItemHover";'  
onmouseout='this.className="MenuLeftItem";' align='left'>User comments</td>
</tr>

css-styles:

td.MenuLeftItem
{
        padding-left: 10px;
        padding-right: 2px;
        padding-top: 2px;
        padding-bottom: 2px;
}

td.MenuLeftItemHover
{
        background-color: #C4DC65;
        padding-left: 10px;
        padding-right: 2px;
        padding-top: 2px;
        padding-bottom: 2px;
}

Comment 11

[Boris Zbarsky [:bzbarsky]]

Koen, could you please file a separate bug on that?  cc me on it.  That problem
still has nothing to do with _this_ bug... (which still worksforme).

Comment 12

[Peter 'vt100' Schwindt]

wfm (bugday)