This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 19696 - Bottom part of logo doesn't link (masked by #sitenav .container)
Summary: Bottom part of logo doesn't link (masked by #sitenav .container)
Status: RESOLVED FIXED
Alias: None
Product: webplatform.org
Classification: Unclassified
Component: skin (show other bugs)
Version: unspecified
Hardware: All All
: P2 trivial
Target Milestone: ---
Assignee: Doug Schepers
QA Contact: public-webplatform-bugs list
URL:
Whiteboard:
Keywords:
: 19822 (view as bug list)
Depends on:
Blocks:
 
Reported: 2012-10-25 05:16 UTC by Sam Dutton
Modified: 2012-12-18 12:43 UTC (History)
4 users (show)

See Also:

Attachments

Description Sam Dutton 2012-10-25 05:16:49 UTC 
The bottom part of the webplatform logo doesn't link  because #sitenav .container is overlaid on it.

Adding the following to #p-logo would fix the problem, but this is a bit of a hack:

z-index: 1;
position: relative;

The problem might be better solved by adding margin-left to #sitenav .container and removing the padding-left from ul.links.
Comment 1 Jonathan Garbee 2012-11-01 21:16:17 UTC 
*** Bug 19822 has been marked as a duplicate of this bug. ***
Comment 2 Jonathan Garbee 2012-11-01 21:17:11 UTC 
Bug 19822 suggested another possible fix.  I myself haven't had it work though.
Comment 3 Heath 2012-11-01 21:20:16 UTC 
Change:
#sitenav .links {
    padding-left: 150px;
}

To:
#sitenav .links {
    margin-left: 150px;
}

This will fix it without needing to bother with z-index or positions.
Comment 4 Heath 2012-11-01 21:29:21 UTC 
(In reply to comment #3)
> Change:
> #sitenav .links {
>     padding-left: 150px;
> }
> 
> To:
> #sitenav .links {
>     margin-left: 150px;
> }
> 
> This will fix it without needing to bother with z-index or positions.

Also, we would need to do the following to the mobile media query.

@media screen and (max-width: 520px)
#sitenav .links {
   padding: 0;
}
Comment 5 Heath 2012-11-01 21:30:26 UTC 
(In reply to comment #4)
> (In reply to comment #3)
> > Change:
> > #sitenav .links {
> >     padding-left: 150px;
> > }
> > 
> > To:
> > #sitenav .links {
> >     margin-left: 150px;
> > }
> > 
> > This will fix it without needing to bother with z-index or positions.
> 
> Also, we would need to do the following to the mobile media query.
> 
> @media screen and (max-width: 520px)
> #sitenav .links {
>    padding: 0;
> }

Sorry, misclicked.

Also, we would need to do the following to the mobile media query.

change:
@media screen and (max-width: 520px)
#sitenav .links {
   padding: 0;
}

to:
@media screen and (max-width: 520px)
#sitenav .links {
   padding: 0;
   margin: 0;
}
Comment 6 Lea Verou 2012-12-17 16:57:48 UTC 
(In reply to comment #3)
> Change:
> #sitenav .links {
>     padding-left: 150px;
> }
> 
> To:
> #sitenav .links {
>     margin-left: 150px;
> }
> 
> This will fix it without needing to bother with z-index or positions.

This doesn’t seem to fix it. 

pointer-events: none would fix it really easily, but the fix won't (currently) work in Opera and IE. However, it’s minor enough that it might be ok.
Comment 7 Lea Verou 2012-12-17 17:04:10 UTC 
> pointer-events: none would fix it really easily, but the fix won't
> (currently) work in Opera and IE. However, it’s minor enough that it might
> be ok.

Nah, my comment was nonsense. pointer-events: none; can't be used here. I think the z-index solution is the only one that seems to work, and comes with the minimum hassle.
Comment 8 Lea Verou 2012-12-18 12:43:46 UTC 
Fixed in the test wiki, so will propagate to stable once we deploy.

For the record, the only thing that was needed was z-index: 1 on #p-logo.