Vista Running Firefox scrolling with fixed / absolute divs

[fastslinky]

I'm developing a website with a fixed menu bar made up out of divs. The menu bar is held using the 'top, left, and fixed' css properties. It works fine in all browsers, firefox, safari IE (Still working on v6). The one problem I can't figure out is when you view the site using Vista and Firefox, and scrolling causes the menu section to jump up and down.

The main content should scroll underneath the menu, nice and smooth, and it does in all other browsers, including firefox on mac. I've played around with numerous css and html tweaks but still cant sort it out. Vista and Firefox make it look like a loose barn door on speed. Really frustrating, as I don't know of any Vista only Firefox fixes.

Any help would be greatly appreciated!

URL: http://fivestarfocus.com/fsftindex.html

[peter.reisio]

You've done a lot of things fairly oddly, IMO. Perhaps (re)start from something like this?

[fastslinky]

For the sake of coming this far, I would rather stick to what I've done so far and try if possible to fix it. Could you be more specific in what I've done "oddly"? I'm not trained as a web developer, rather a designer, so this is not my first trade. Learning all the time. It may be odd, but it works, in all browsers (Other than than a few quirks in IE6 which I'm working on) and of course Firefox when used with Vista. I mean, what? Could it be that this is a Microsoft problem? Not a Firefox one?

[peter.reisio]

Well for example you've used an IE6 fixed hack for all browsers, not just IE6. I s'pose you could settle for just using a normal position: fixed; setup for all other browsers and the hack only for IE6, and that might circumvent the issue. The empty, invalid table is also odd.

Code: Select all

foo {
   /* this rule read by IE6 */
}
html > body foo {
   /* this rule ignored by IE6, and more specific than (will override) preceding rule */
}

[fastslinky]

The table at the end of the HTML? That works so I can get a scalable, background image, without loosing it's constraints / proportions. Will look into the IE6 thing though...

[fastslinky]

That's really strange, if you look at the source code then it shows the div's inside the table, when using firebug, it looks empty. I'm now suspicious.

[jscher2000]

It's a little jumpy with the mouse scroll wheel on Windows XP Pro as well.

Maybe you are in the midst of editing, but your <table> lacks structure, e.g., rows and columns, which probably explains why it isn't rendering as expected.

[fastslinky]

I designed it using div's primarily, the only reason I had a table in there was to achieve a proportional scaling background image, it has a div inside, with a width and height of 200%, more of a hack, but I couldn't get a decent javascript working. If the div's are causing the jumps, then I guess I have no choice but to redesign the site, or replace div's with tables, although it makes it more challenging with my opacity designs and layering.

EDIT: I see what you guys are talking about, no <td>? Hmmm, you know when you stare at something so long you don't see it's there? or missing? I might try and place the navigation menu inside a table, and see if that stops the jumping, will post an update when done. Thank you for all your comments so far.

[peter.reisio]

I don't think the jumping has as much to do with the table as much as the overflow fixed hack for IE6, but both are odd.