Moving navigation solved / journal / hicksdesign

04/05/06

Moving navigation solved

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.

Technorati Tags Tags: bugs, css, safari, solutions, webkit

Comments | RSS

Larry Myers said 743 days ago:

One way I got around this was by generating my side nav based off of the url. Basically I look at the request url, figure out which page I’m on, and generate my side nav off of that to give the link for the current location the correct css class.

While this requires some code (I’m not sure what hicksdesign is powered by), it’s not terribly difficult.

Granted I’m just as impressed by the css black magic you use here.

Joost de Valk said 743 days ago:

Hmm this feels like a bug to me, i’ll look into it and file on webkit if nescessary… Regards, Joost

Jon Hicks said 743 days ago:

@ Larry – I think you may have misunderstood my CSS. You’re talking about highlighting the current page in the nav link. I do that by just adding an ID to the body, and using that to select the link in the CSS.

@ Joost – Hello! Let me know if you need a test page set up.

Larry Myers said 743 days ago:

Ah, gotcha, that seems like a fairly efficient way to handle it.

Also, I wouldn’t be surprised if the whole experience is a result of a WebKit bug, drunkenbatman over at Drunkenblog is fond of pointing out images and javascript snippets that just cause Safari to wet itself, crash, and go cry in the corner.

I also think the brown in the redesign is finally starting to grow on me.

luxuryluke said 743 days ago:

Interesting. you have the background ON in the normal state of the link. Hmm.
Smart, since otherwise you’d have to load the graphic if the background was ON only on :hover. Nice.

Have you considered the ON and OFF states in the same image as has been done before with a simple background-position: bump?

Of course, if that were to work, you’d have a few lines of css to rewrite.

This thing sure is polishing up nicely, jon. Wow!

David Kavanagh said 743 days ago:

John – After battling with Flicker issues in IE a while back I decided to look at your site in Win IE6… Strangely enough, none of the links from the sidenav were working period. No rollovers, nuttin. Granted, I use IE so infrequently that it might be a funky setting on my version, but…

“You might want to do something about that”

No really… Think of the poor defensless IE users. :)

Joost de Valk said 743 days ago:

Hi John, well, if you could set up a test page: please do! :)

Jon Hicks said 743 days ago:

Luke – I do have the normal and rollover states in the same image, so its only loaded once. I just don’t move the position on hover (which causes the flicker in IE) I hide it and show the one underneath.

David – probably because I added the position: absolute and didn’t check it in IE afterwards. It was working fine before!

Marc said 743 days ago:

Hi
Sorta on topic I noticed how you have two layouts one for wider screens with fixed navigation and a narrower one where the navigation slots in above the play list, it is really cool. I know you need to be a geek to appreciate it but I had to sit down comb through the code to figure it out. A great use of an alternate style sheet too. Just so I’m not too off the subject of the post I had noticed the scrolling away background states but figured you were working on it.

#10

Raphael Schweikert said 743 days ago:

Wow, thanks a lot, this was exactly the bug I have been plagued with in recent days.

#11

Brutal said 743 days ago:

Great stuff!

BTW: could you tell us abit about how you do the Technorati-itegration in Textpattern. (What plugins do you use?)

#12

Michael Bester said 743 days ago:

Slightly off topic Jon, but there is a simple way to eliminate the CSS image flicker in IE6.

If you’re running on an Apache server, you can make Apache force IE (and every other browser) to cache the images on a site. All you need do is add the following to an .htaccess file at the site root:

ExpiresActive On
ExpiresDefault A18000
ExpiresByType image/gif “access plus 4 hours”
ExpiresByType image/jpeg “access plus 4 hours”
ExpiresByType image/png “access plus 4 hours”

You can, of course, change the time frame in which the cache will expire images. In any case, this will do the trick so you can safely use CSS background images on your links.

#13

Jon Hicks said 743 days ago:

@ Brutal – http://www.truist.com/blog/493/trutags-a-tagging-plugin-for-textpattern

@ Michael – I’ve used that method before but without much luck.

#14

thomas Aylott said 743 days ago:

Yeah, I was going to mention that.

For me , this tends to happen whenever I use overflow:hidden in safari.

Just one more of those things we have to worry about now. ;)

#15

Greg Hinch said 743 days ago:

I don’t know if this is a method already, I just learned it from a coworker but I like to do my CSS rollovers as a list with an id on the LI, and then an A link wrapped around a transparent 1px image and a span of alternate text. The background image applied has the on and off state both in it stacked vertically. The CSS is then as follows:

#btnName, #btnName a, #btnName img {

height: __px; width: __px;
} #btnName, #btnName a { background-image: url(...);
} #btnName { background-position: 0 -HEIGHTpx;
} #btnName a:hover { background: none;
} span.alt { display: none; visibility: hidden;
}

Shouldn’t flicker in IE. Works in all browsers I’ve tested back to IE 5.

#16

Tim said 742 days ago:

1. You’re navigation doesn’t seem to work in IE 7 beta either.

2. Firefox’ JavaScript console is giving me crap when trying to post a comment. (This concerns the ‘name’ box; when entering my name, I get the error “document.getElementById(“nnh_name”) has no properties”.)

Hope this helps. ;)

#17

Jon Hicks said 742 days ago:

TBH, I don’t really care about IE 7 at the moment, at least until I can get someway of testing in it!

#18

Mark Lawler said 742 days ago:

lol, Jon you’ve pretty much implemented what I said in a previous post.

Love the new Hickdesign v8, certainly fits the new logo nicely =D Just a suggestion, there still seems to be a little inconsistency with the journal and the other pages on your site. I noticed on the extra page you have used a pseudo-iframe effect to keep everything on the page without scrolling. Perhaps a better idea would be to scroll the whole page (so there isnâ€™t extra scroll bars) but keep the hicksdesign link bar in the same position, so sort of like a frame effect but using css. Similar to the way the last design of Dave Hyattâ€™s surfing safari blog worked. Anyhow, just a suggestion not a criticism! Love the new work =D

No Mark, I donâ€™t want to do that. The Journal pages need to have the body scrolling, as they are such long text pages, but the rest doesnâ€™t need to be. I donâ€™t see it as inconsistency.

I guess I just didn’t express myself properly :-/ Having the link bar stationary while the rest of the page scrolls is a top effect. The new site looks great!

#19

Jon Hicks said 742 days ago:

@ Mark – Doh! Sorry, I completely misunderstood you! Thats great that this is what you were thinking!

#20

Samuel Parsons said 741 days ago:

Can I just say that I love the brown in the new design. I hadn’t been to your site since you first designed the log. It’s delicious.

#21

Nick Bialaszewski said 741 days ago:

Very nice. I like it a lot.

#22

Ben said 737 days ago:

Some of the things WebKit does is really something which can’t be explained, this is just one of them. That said, it’s awesome that you found a way to fix it.. and a way that doesn’t require a mass of code to do it. I think it may just come in handy for the project I’m currently working on for college. ;)

I was actually considering a fixed-positioned navigation for a site I’m making, just a few minutes before I came here actually. Either way, it looks damn cool now.

Nice stuff :D