262679 - philips.ch - improper use of CSS height causes text overlap

Status: RESOLVED WORKSFORME

(Tech Evangelism Graveyard :: German, defect)

Description

[pet_chiap]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; de-AT; rv:1.7.3) Gecko/20040910
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; de-AT; rv:1.7.3) Gecko/20040910

In the frame ("Unternehmensprofil") one line ist top of the other.
(in IE 6 it is correct)

Reproducible: Always
Steps to Reproduce:
1.
2.
3.



Expected Results:  
display it correctly

Comment 1

[Hermann Schwab]

Attachment: 5 kb screen shot of menu seen with Mozilla

Comment 2

[Hermann Schwab]

Attachment: 5 kb screen shot of menu seen with Opera

Comment 3

[Ben Fowler]

That part of the page is generated by javascript, apparently from
some xml/xsl.

Since I am getting some javascript errors such as:

  Error: Unknown property 'background-position-y'.  Declaration dropped.
  Source File: http://www.crsc.philips.com/crsc/styles/global.css
  Line: 2022

it may be that Philips's code needs some most minor tweaks. Are you able
to have the electronic equivalent of a quiet word with their webmaster?
Philips have probably gone to great lengths to make their content 
accessible in various langauges and it is not good to dissect their
results in public.

Comment 4

[Erik Fabert]

Attachment: Stripped down version

Seems to be the same problem as in bug 215273: a div inside a table cell
specifies a height that is too small for its content. Mozilla treats this as
overflow while IE and Opera expand the table cell.

Comment 5

[Gérard Talbot]

Attachment: Same as previous testcase and with different css rule for div

Comparison between the table cells of the previous testcase with the table
cells without constraint

Comment 6

[Gérard Talbot]

 
> Seems to be the same problem as in bug 215273: a div inside a table cell
> specifies a height that is too small for its content. 

Yes.

> Mozilla treats this as
> overflow while IE and Opera expand the table cell.

<div> have the browser default CSS rule overflow: visible in Mozilla and MSIE.
The problem is that MSIE's implementation of overflow: visible is wrong, going
against CSS2 specs: MSIE will stretch the content box until the content fits
while Mozilla will let the content overflow (out of) the box.

The stripped down version and that philips.ch page have other problems:
gratuitous and wrong recourse to line-height, font-size defined with absolute
unit value making the design unscalable, table used for non-tabular data,
obviously over-constrained table.

The purpose of the line-height of the initial testcase is to artificially
increase the space between line: the padding constraints squeeze content forcing
a line-wrap. So, the text of table cells is rendered on 2 or 3 lines and the
space between those lines will be determined by requested line-height value. 

As far as I'm concerned, this bug is 

INVALID

Comment 7

[Erik Fabert]

Just wanted to add that removing the "height:20px" rule from line 2343(!) of 
global.css with DOM Inspector fixed the layout. Can somebody confirm that 
removing this won't have any adverse effects on other browsers? 
I suggest moving this bug to tech evangelism.

Comment 8

[Bill Mason]

(In reply to comment #6)
>  
> > Seems to be the same problem as in bug 215273: a div inside a table cell
> > specifies a height that is too small for its content. 
> 
> Yes.
> 
> > Mozilla treats this as
> > overflow while IE and Opera expand the table cell.
> 
> <div> have the browser default CSS rule overflow: visible in Mozilla and MSIE.
> The problem is that MSIE's implementation of overflow: visible is wrong, going
> against CSS2 specs: MSIE will stretch the content box until the content fits
> while Mozilla will let the content overflow (out of) the box.
> 
> The stripped down version and that philips.ch page have other problems:
> gratuitous and wrong recourse to line-height, font-size defined with absolute
> unit value making the design unscalable, table used for non-tabular data,
> obviously over-constrained table.
> 
> The purpose of the line-height of the initial testcase is to artificially
> increase the space between line: the padding constraints squeeze content forcing
> a line-wrap. So, the text of table cells is rendered on 2 or 3 lines and the
> space between those lines will be determined by requested line-height value. 
> 
> As far as I'm concerned, this bug is 
> 
> INVALID


That's a Tech Evangelism bug, not an invalid bug.

Comment 9

[Hermann Schwab]

wfm Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.8a5) Gecko/20041110

checked on original URL from URL: and
http://www.philips.co.uk/about/businesses/index.html

testcases are still showing the bug, as it should be on TE bugs.

Bug is now seen in other philips sites, see Bug 264836 	Bad display.

Comment 10

[Ben Fowler]

The rendering on this URL now appears to be correct. There are few messages
in the Javascript console, and only this one

Error: gE("p-stockquotes") has no properties
Source File: http://www.crsc.philips.com/crsc/scripts/lib_global.js
Line: 309

looks at all significant, and that may be minor.

It might be possible to RESOLVE this as FIXed