621116 - Incorrect Layout of the date and time for the web store

Status: NEW

(Core :: Layout: Block and Inline, defect)

Description

[Rumos Mok]

User-Agent:       Mozilla/5.0 (Windows NT 6.1; rv:2.0b9pre) Gecko/20101222 Firefox/4.0b9pre
Build Identifier: Mozilla/5.0 (Windows NT 6.1; rv:2.0b9pre) Gecko/20101222 Firefox/4.0b9pre

Sorry if i should not file a bug, but i cannot find any way to report this broken website in my firefox 4.0 beta 9 2010-12-22 build.

The link is to a web admin interface of an open-source web store.

There is a date and time shown in the middle of page, under the navigation menu.

The problem is that it does not align correctly (it should stick to the left side of the browser window), the CSS seems correct, though.

and i have personally tested the same site on IE8, Google Chrome Dev v10.0.612.3, Opera 11 Build 1156, FireFox 3.6.13. They all display the page correctly. But for FireFox 4.0 beta, it cannot render the page correctly.

I wonder if it's a bug of the underlying CSS parser.

Reproducible: Always

Steps to Reproduce:
1.Login using username : [e-mail] & password : admin
2.It will redirect you to the default page, go to http://admin-demo.nopcommerce.com/administration/shippingsettingshome.aspx again
3.Have a look at the date and time
Actual Results:  
You should find that the date and time is not aligned correctly (left)

Expected Results:  
The date and time should stick to the left side

Comment 1

[Srinivas]

Can you please provide the screenshot of the page and the version details of the version in which it worked properly

Comment 2

[Rumos Mok]

Attachment: Chrome Dev v10.0.612.3

Page shows correctly

Comment 3

[Rumos Mok]

Attachment: IE8

Page shows correctly

Comment 4

[Rumos Mok]

Attachment: FireFox 4.0 Beta 9 Nightly Build 20101222

Focus on the date / time, it is misplaced, right?

Comment 5

[(mostly gone) XtC4UaLL [:xtc4uall]]

Hmmm, this is WFM using Mozilla/5.0 (Windows NT 5.1; rv:2.0b9pre) Gecko/20101223 Firefox/4.0b9pre ID:20101223030401.
Does disabling Hardware Acceleration help?

Comment 6

[Rumos Mok]

Just tried disabling HW acceleration
it works, display is normal.
but i don't want to disable HW acceleration

Are you able to reproduce the bug?

Comment 7

[Tyler Downer [He/Him]]

Yes, I can see this with HW turned on, with it off, it is aligned properly.
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
Graphics
      
      
      
        
Adapter Description: ATI Mobility Radeon HD 4650
Vendor ID: 1002
Device ID: 9480
Adapter RAM: 1024
Adapter Drivers: aticfx64 aticfx64 aticfx32 aticfx32 atiumd64 atidxx64 atiumdag atidxx32 atiumdva atiumd6a atitmm64
Driver Version: 8.850.0.0
Driver Date: 4-19-2011
Direct2D Enabled: true
DirectWrite Enabled: true (6.1.7601.17563, font cache 28.24 MB)
WebGL Renderer: Google Inc. -- ANGLE -- OpenGL ES 2.0 (ANGLE 0.0.0.611)
GPU Accelerated Windows: 1/1 Direct3D 10      
      
I'll see if I can get a testcase thrown together

Comment 8

[Boris Zbarsky [:bzbarsky]]

The date is floated left.

The menu above it is made up of items floated left.

The <div class="header-menu"> has these styles:

  line-height: 29px;
  height: 31px;
  
So as long as any of those floats end up taller than 31px for any reason, the date will end up to the right of all the menu items (which is what the screenshot shows).  I would not be suprised if this is happening with DirectWrite's font metrics for some reason...

Comment 9

[Bas Hickendorff]

Attachment: Testcase

This is the furthest I can reduce the testcase while still showing the difference in Firefox nightly and Chrome.

I hope it helps.

Comment 10

[Boris Zbarsky [:bzbarsky]]

Bas, thanks!

I see the bug with that testcase.  For some reason the first line of the <li> is ending up 38.5px tall... what I can't figure out is why. 

David, any ideas?  The drame dump for that line looks like this:

                        line 0x96fcd0: count=2 state=inline,clean,prevmarginclean,not impacted,not wrapped,before:nobr,after:nobr[0x500] {0,0,25368,2310} vis-overflow={-768,0,26196,2310} scr-overflow={-768,0,26136,2310} <
                          Inline(img)(0)@0x8f6d90 next=0x96fc88 {0,450,420,960} [content=0x21d48570] [sc=0x8f6b28]<
                            Inline(_moz_generated_content_before)(-1)@0x96fc10 {0,720,0,0} [state=0000000000000040] [content=0x21d49500] [sc=0x8f6c30] pst=:before<>
                          >
                          Text(1)@0x96fc88 [run=0x21d49830][0,37,T]  {420,900,24948,960} [state=00000000c0600010] [content=0x21d48630] [vis-overflow=-60,0,25068,960] [scr-overflow=0,0,24948,960] sc=0x8f6d38 pst=:-moz-non-element<
                            " XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
                          >
                        >

Comment 11

[Bas Hickendorff]

The original site is not working any more (I mean the one in the url field). They put up another version, but that doesn't show the bug anymore. I seem not to be able to modify the url field of this bug...

However, I just tested in nightly, the attached testcase still shows the problem.