538409 - implement design

Status: VERIFIED FIXED

(Websites :: browserchoice.mozilla.com, defect)

Description

[Alex Buchanan [:abuchanan]]

There are a few minor HTML + CSS issues left:

1)  Make "Learn More" buttons bulletproof (i.e. work in IE 6,7,8) currently broken in all browsers

2) Implement gradient background for Reasons section


anything else?

Comment 1

[Alex Buchanan [:abuchanan]]

3) Testimonial bubbles aren't aligned with pipe in background, as called out in design files

4) no favicon

Comment 2

[Neil Lee [:neilio]]

All of these are fixed, except that there's still two things with the Learn More button that I'm not sure how to fix - it expands just fine (up to two lines) but I can't get the button to centre align. Also, it breaks a little in Firefox when it goes to two lines, but I assume that's not a huge issue.

Alex, any ideas?

Comment 3

[Alex Buchanan [:abuchanan]]

(In reply to comment #2)
> All of these are fixed, except that there's still two things with the Learn
> More button that I'm not sure how to fix - it expands just fine (up to two
> lines) but I can't get the button to centre align. Also, it breaks a little in
> Firefox when it goes to two lines, but I assume that's not a huge issue.
> 
> Alex, any ideas?

No idea about the center align.  Maybe the <dl> is getting in the way?  Could try moving it outside that?  CC'ing Ryan for advice

The buttons look fine to me, in Firefox, with two lines of text.  They break at 3 lines, but I'm guessing most translations will be 1 line anyway, so not worried.

Any feelings on ETA to wrap this up?  I'm hoping we can call this dev. complete today and let QA start tomorrow.  What do you think?

Comment 4

[Neil Lee [:neilio]]

Outside of the buttons and the missing content, the page is done and QA'ed on my end, so assuming Ryan has some ideas on how to fix the button alignment, we're golden for today.

Comment 5

[Ryan Doherty (:rdoherty)]

(In reply to comment #4)
> Outside of the buttons and the missing content, the page is done and QA'ed on
> my end, so assuming Ryan has some ideas on how to fix the button alignment,
> we're golden for today.

I did something similar for getpersonas.com a while ago but without a bg image. I might be able to tease it out in a day or two.

Comment 6

[Ryan Doherty (:rdoherty)]

this might help:

a.button {
 display: -moz-inline-box;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

not sure about IE though, especially IE6. Honestly, I wouldn't care too much about getting it exact in IE6, as long as it doesn't look broken.

Comment 7

[Ryan Doherty (:rdoherty)]

Also, the wrong font is used for 'Free Download 3.5.7 for Windows English (US) (17.6MB)' in the download button. Should be Arial.

Comment 8

[Neil Lee [:neilio]]

Button alignment is fixed and committed.

Comment 9

[Alex Buchanan [:abuchanan]]

I checked in the new privacy blurb, and it breaks the Learn More buttons :\

The buttons don't move to allow for long text.  Could be a problem for l10n too.

Comment 10

[Alex Buchanan [:abuchanan]]

(In reply to comment #7)
> Also, the wrong font is used for 'Free Download 3.5.7 for Windows English (US)
> (17.6MB)' in the download button. Should be Arial.

I took the button from this page,
http://www.mozilla.com/en-US/firefox/upgrade.html

which isn't using Arial there.  

Ryan, could you point me to your example?  I'm curious how many different styles we have running.


Anyway, I can change it to Arial if you think it's better.

Comment 11

[Ryan Doherty (:rdoherty)]

Odd, on browserchoice.stage I see:
http://grab.by/1LDp

and on Mozilla.com I see:
http://grab.by/1LDr

I only bring it up b/c Mozilla.com stuff is usually pretty finely tuned regarding branding/fonts/etc.

Comment 12

[Alex Buchanan [:abuchanan]]

(In reply to comment #11)
> Odd, on browserchoice.stage I see:
> http://grab.by/1LDp
> 
> and on Mozilla.com I see:
> http://grab.by/1LDr
> 
> I only bring it up b/c Mozilla.com stuff is usually pretty finely tuned
> regarding branding/fonts/etc.

oh, my bad.  I was looking at "Free Download" only

Comment 13

[Alex Buchanan [:abuchanan]]

I fixed the download button font, mentioned in comment 7.  I think we're done here.

Comment 14

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

Verified FIXED; the design's implemented, and there have been smaller spinoff bugs.