479882 - Nav tab borderlines are a few pixels off

Status: VERIFIED FIXED

(Websites Graveyard :: spreadfirefox.com, defect)

Description

[Mary]

Attachment: Screwy tabs

Check out the screen shot.  It's not just the active tab, but all.

Thanks,

Mary

Comment 1

[Alex Buchanan [:abuchanan]]

Neil, can you fix this?

Comment 2

[Alex Buchanan [:abuchanan]]

Neil, sorry your patch from bug 479671 didn't fix this.

I've pasted your fix from the patch below.  My problem with it is that it makes the header text normal instead of bold, which differs from the design mockups.  Can you fix this without changing that, because I think the nav tab text look much better bold :)

Thanks dude!  Hope all that made sense.

 .header .nav li a { 
-        padding: 17px 0 16px 16px;
+        padding: 17px 0 16px 19px;
         line-height: 36px; 
         font-family: verdana, arial, sans-serif;
-        font-weight: bold;
-        font-size: 90%;
+        font-weight: normal;
+        font-size: 85%;
         text-transform: uppercase;
         color:  #fff;
         background: url(../img/tab-l.png) no-repeat 0 center;
@@ -124,7 +124,7 @@
 }
 
 .header .nav li span {
-        background: url(../img/tab-r.png) no-repeat left 45%;
+        background: url(../img/tab-r.png) no-repeat left 7px;
         padding: 17px 16px;
 }

Comment 3

[Neil Lee [:neilio]]

I spoke with Aaron and we decided to switch the font to Arial bold as Verdana bold is a bit too heavy. I'll make the changes today.

Comment 4

[Mary]

Hey there:  Is this resolved with the latest batch you submitted, Neil?

Comment 5

[Neil Lee [:neilio]]

Attachment: I really hope this fixes the issue

I'm fairly certain this fixes the issue - I tested this fix with Safari 3/4, FF3, and Shiretoko and the tabs look the same in all of those browsers. IE gets its own rules for this so this patch shouldn't affect that browser.

Comment 7

[Alex Buchanan [:abuchanan]]

Comment on attachment 366570 [details] [diff] [review]
I really hope this fixes the issue

I still see the slight offsets, but this patch improves the appearance overall, so I'm r+'ing it.

Comment 8

[Alex Buchanan [:abuchanan]]

r23254

Comment 9

[krupa raj[:krupa]]

Attachment: safari view of the tab "home"

The tabs definitely look better in Firefox.But the tab "home" still looks indented in Safari 3.2.2.
So reopening this bug

Comment 10

[Neil Lee [:neilio]]

Attachment: Screenshot from Safari 3.2.1 of tabs

wfm here on stage.

Comment 11

[Neil Lee [:neilio]]

Should be fixed now? I can't reproduce on any browsers.

Comment 12

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

(In reply to comment #11)
> Should be fixed now? I can't reproduce on any browsers.

I can reproduce using both 3.2.2 and 3.2.1 (Windows and Mac, respectively); spun-off bug 484338 for that because this looks great in other browsers I've tried.

Verified FIXED.