253483 - yahoo.com - Mail CSS rendering problems with "width" property

Status: VERIFIED FIXED

(Tech Evangelism Graveyard :: English US, defect)

Description

[Michael Kraft [:morac]]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040707 Waterant/0.9.2 (All your Firefox/0.9.2 are belong to Firesomething)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040707 Firefox/0.9.2

Yahoo seems to have changed something recently which causes the "[empty]" links
for the bulk and trash folders to display too far over to right in Firefox
0.9.2.  The page displays correctly in Internet Explorer.

I checked Yahoo's CSS file and saw the following lines:

#folderlist li#bulk, #folderlist li#trash{text-align:right;width:99%;clear:both;}
#folderlist li#bulk, #folderlist li#trash{text-align:right;width:99%;clear:both;}

These relate to the following HTML (I'm changing the less than symbols to <
so hopefully it will display.  I'm also shortening the links since they don't
affect anything.  Just log into Yahoo Mail and view source to see the real source):

<li id="bulk" title="Navigate to the @B@Bulk folder"><a
href="/ym/ShowFolder" class="first" title="Navigate to the Bulk
folder">Bulk&lt;/a><span>[&lt;a href="/ym/ShowFolder" title="Empty all of the
messages from the Bulk folder">Empty&lt;/a>]&lt;/span>&lt;/li>

&lt;li id="trash" title="Navigate to the Trash folder">&lt;a
href="/ym/ShowFolder" class="first" title="Navigate to the Trash
folder">Trash&lt;/a><span>[&lt;a href="/ym/ShowFolder" title="Empty all of the
messages from the Trash folder">Empty&lt;/a>]&lt;/span>&lt;/li>


If the "width:99%;" is removed from the CSS files lines, the page displays
correctly in both Firefox and Internet Explorer.

Reproducible: Always
Steps to Reproduce:
1. Log into Yahoo Mail.
2.
3.

Actual Results:  
The "[empty]" links for the bulk and trash folders to display too far over to right

Expected Results:  
The "[empty]" links for the bulk and trash folders should be over near the left.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Could you save the page in question as "web page, complete", zip up the files,
and attach the whole thing to this bug, please?

Comment 2

[Daniel Ross]

Attachment: The webpage in question, saved as "web page, complete"

Here it is.

Comment 3

[Boris Zbarsky [:bzbarsky]]

Hmm... That's the login page, no?

Comment 4

[Martijn Wargers (dead)]

Attachment: Simplified mailpage

This is a simplified version of the mailpage. I think you can still see the bug
here (bottom list-item to large), but if you want the original, just ask.

Bug 253413 is the same bug.

Comment 5

[Boris Zbarsky [:bzbarsky]]

Is all the stuff there needed (all the nested divs, the table, etc, etc)?

Comment 6

[Martijn Wargers (dead)]

Attachment: Simplified testcase

No, but now you won't recognise it anymore as the yahoo mailpage :)

Comment 7

[Martijn Wargers (dead)]

Attachment: Better testcase

The previous testcase wasn't good, because IE did show it the same as Mozilla.
this could very well be a tech evangelism issue. 
It looks in some ways similar to bug 247038, for example.

Comment 8

[Boris Zbarsky [:bzbarsky]]

So the table is necessary?

Comment 9

[Martijn Wargers (dead)]

Attachment: Testcase without table

No, is not necessary. Sorry about the mess.

Comment 10

[Boris Zbarsky [:bzbarsky]]

Oh, duh.  The lis have padding.

You're right, this is just IE's well-known box model bug...

Over to Tech Evang.

Comment 11

[Bill Mason]

*** Bug 253413 has been marked as a duplicate of this bug. ***

Comment 12

[Boris Zbarsky [:bzbarsky]]

*** Bug 253631 has been marked as a duplicate of this bug. ***

Comment 13

[Carlos Ribeiro]

It seems that Yahoo! has corrected their webpages, and that it's now displaying
properly. Time to close this bug?

Comment 14

[Dan Soper]

Looks fixed to me too.

Comment 15

[Boris Zbarsky [:bzbarsky]]

Resolving so.

Comment 16

[pepp]

The original post on the forum had this as well:

<< Something similar happens with the doted box that is displayed around the
focused elemet on the page when it is over the "Trash" or "Bulk" folder. >>

That problem is not yet fixed. The dotted outline around the Trash and Bulk
links when they receive the focus is half the height that it is around the other
links. I minimized a repro using 1 html file and 2 css files which I'll attach.

Comment 17

[pepp]

Attachment: Reproduces focus problem. Open yhoomailbug.htm, hit tabkey 2 times.

To see the problem, open yhoomailbug.htm in Firefox, hit the tab key once, see
the dotted line focus outline around the Sent link look normal. Hit tab key
second time, see it shrink to half the height of the Bulk link. Expected is
full height of the Bulk link.

Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7) Gecko/20040721
Firefox/0.9.1+

Comment 18

[Stephen Donner [:stephend] Not actively reading bugmail]

Pepp: open a separate bug please.  Bugs should be limited to one specific issue.

Comment 19

[Stephen Donner [:stephend] Not actively reading bugmail]

Verified.