You’re reading all articles tagged 'solutions'

Moving navigation solved

04 May 2006

One of the headaches I’ve had with the position: fixed navigation on the journal pages is a bug that has reared its head in WebKit based browsers (Safari, Omniweb, NetNewswire etc).

OK, a little background. To avoid the IE flicker problem, my navigation’s rollover states are set as the background of a list item in a numbered list, and the ‘normal’ state is set as the background of the link. On hover the link background is set to none – revealing the rollover state below. With me so far?

When combined with position:fixed, the nav had a strange effect when scrolling. As you scroll down, the background of the anchor tag scrolls with it, but not the background of the <li> item:

Progressive screenshots showing navigation problem in Safari

This didn’t occur in Firefox or Opera (IE doesn’t support position:fixed of course, so it gets position:absolute instead), just in WebKit browsers. It’s a minor, but irritating problem.

The fix was not, as I thought it might be, applying background-attachment: fixed, but just this:

#nav ol a  { position: absolute; }

I’m posting it here in case anyone else has come across it too. A bug in WebKit? Trouble is, when you’re bending CSS to do thing it wasn’t designed to do (Image replacement and fixed positioning) it may not be.


Instagram Hickstagram

  • 25 Apr 2018

    Haven’t done a sunset in a while, and tonight’s was too good to ignore

  • 23 Apr 2018

    Your birthday pavlova awaits you @hicksleigh!

  • 23 Apr 2018

    A very Happy Birthday to my lovely wife Leigh! We’re keeping the age a secret a though…

  • 18 Apr 2018

    Kind of them to notice!

  • 18 Apr 2018

    A very Happy 20th Anniversary to @hicksleigh! I love you more than ever wifey, and still thank my lucky stars that we met. 😘😍

  • 16 Apr 2018

    If anyone’s interested in buying a nice carbon road bike, I’m selling my Colnago 😉 https://www.ebay.co.uk/itm/Colnago-CLX-3-0-2012-carbon-road-bike-size-54/302705911235

  • 15 Apr 2018

    So pretty!

  • 13 Apr 2018

    Tasty one this

  • 10 Apr 2018

    Replacing worn out MacBook keys. I obviously type ‘a’ a lot

  • 08 Apr 2018

    Grown up Fanta

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom