Question

I have a fixed element on a page I’m developing. It contains a logo and a couple of navigation links.

On the said site, I need to present snippets of code in various languages. I’m using Alex Gorbatchev’s SyntaxHighlighter to color the syntax. The problem is, the styled code flows over my fixed element.

Here’s what it looks like:

Here’s a very simplified example on JSFiddle

It seems that the main culprit is shCore.css. When I remove it, the overflow disappears. Unfortunately, its removal also causes line numbers to go out of sync with their corresponding lines of code.

I’ve started fiddling with the CSS inside the file, as well as in my own stylesheet. I’ve tried various comnbinations of overflow and float values on both SyntaxHighlighter-generated elements and my own but nothing seems to work.

I know the enclosed style sheets are massive and it’s a tedious piece of work to search them for a bug, but I simply can’t make it more simple. I’ve been working on this silly problem for a couple of hours now so I decided to ask a question here.

Could any kind and bored soul help me out? Has anyone had this kind of problem with SyntaxHighlighter before? If you think it’s not concise enough a question, please don’t vote to delete it as I’ll post the answer myself once I solve the problem. It seems like something easy to encounter by anybody.

I’ll also be glad to receive any comments suggesting which CSS properties can cause such behavior. Maybe my overflow guess is way off.

Or perhaps a change of syntax-coloring library would be a good solution?

Answer 1

A coworker with a couple of years of front-end experience helped me solve this problem. I was stumped to see how simple it was.

What I had to do was to add a z-index property to my fixed element to effectively move it to the foreground.

Here’s a working example on JSFiddle