638911 - clear.com buttons aren't aligned correctly

Status: RESOLVED INVALID

(Web Compatibility :: Site Reports, defect)

Description

[Robert Sayre]

In Firefox 3.6, the button doesn't get gradient styling and looks right. In, Firefox 4, gradient styling that webkit gets is applied, but the button's alignment is off.

Comment 1

[Robert Sayre]

this could well be a site bug, but I'm filing anyway.

Comment 2

[Robert Sayre]

Attachment: screenshot. see the "play now" button in the lower right corner.

Comment 3

[Boris Zbarsky [:bzbarsky]]

The DOM is different in Fx4 and Fx3.6.   In Fx3.6, it looks like this:

  <a style="some-styles">Text</a>

In Fx4, it looks like this:

  <a style="some-styles"><span style="some-styles">Text</span></a>

If I use the latter DOM with 3.6, it shows the same misalignment.  So do Chrome, Opera, Safari.  It's he expected rendering given the styles on the <span>.  In particular, the <a> is 20px high, and so is the <span> but the <span> is given top padding, so sticks out the bottom.

On the site itself, Opera gets the Fx4 DOM (and shows the same misalignment) while Chrome/Safari get the Fx3.6 DOM.

Looks like this is the culprit (in public/js/cmn/global.js):

  function buttonRounder(){
    if(!$.support.borderRadius){
      $("a.button, span.button, button").each(function() {
        if(!$(this).find("span").length) {
          $(this).wrapInner("<span />")
        }
      })
    }
  }

combined with:

  jQuery.support.borderRadius=false;
  jQuery.each(["BorderRadius", "MozBorderRadius", "WebkitBorderRadius",
               "OBorderRadius", "KhtmlBorderRadius"],
              function() {{if(document.body.style[this]!==undefined)
                             {jQuery.support.borderRadius=true} } 

kinda stuff.

In Fx4 we dropped the prefixing on border-radius, so style.MozBorderRadius is not present.  But neither is style.BorderRadius, of course.  style.borderRadius is there, as expected.

This site just needs s/"BorderRadius"/"borderRadius"/.

Comment 4

[Robert Sayre]

I don't think we should worry about this site much. I browsed around clear.com's source for a while, and it looks like this site is actively maintained by someone who's very interested in web tech.

Comment 5

[Boris Zbarsky [:bzbarsky]]

I sent them a feedback not, in any case.

Comment 6

[Karl Dubost💡 :karlcow]

The Web site has changed.