Open Firefox if you aren't using it now.

Here is a site I am building: click here
Right there on the homepage, in the right sidebar, there is a tabbed interface under the heading "voice samples". In this, there is a button that says "MORE SAMPLES". Click it.

This will open up a lightbox-like interface, with more tabs on it. There is a button that says "NEXT PATIENT". Click it.

The dialog changes so that a new patient is visible. But look at the lower right corner of the interface. There is a big chunk missing! Ok, no biggie I thought, there is some simple answer, as is normal.

But here is the befuddling part. If you changes tabs, then come back to the page, or resize the browser by even 1 pixel, or minimize the window then reopen it, the chunk is no longer missing... Has anyone ever seen anything like this before? It is only happening in Firefox.

There is some scripting going on in the page, so I guess it could be related. There is a Flash element (an MP3 player), and Javascript changing a lot of classes and styles to make the tabs play nice, but I can't seem to isolate the source of the problem.

I also haven't totally debugged it in Explorer, but the IE problems are totally standard stuff, so I'm not worried about them.

Any ideas?

***UPDATE: solved *** It was a CSS issue. I should have known better. Took me more time to write up this question than to figure it out, lol...

Mind sharing the solution? The page you describe is similar to one I'm working on that has Flash on it and uses a lot of javascript to change styles.

I've had a weird problem in all browsers. I have an empty link with a background image. The background image changes the source on hover. All done simply with css. The first time you hover no image shows at all. All that happens is the original background image disappears. Every time after that it works as you'd expect.

I know your issue was somewhat different, but it sounds similar enough to wonder if your solution can help mine.

Thanks.

It was an overflow issue. There was an inner div that was not expanding to hold the floats. I couldn't set overflow properties on the containing div, because of the way the tabs had negative positioning on the top (they needed to be visible without having scroll bars on the container) , and clearing the floats didn't seem to work. when I made the overflow of the inner div "hidden", it expanded to hold the floats. I'm still not sure why the gap would close when the window resized, that remains a mystery. So I may have treated the symptoms instead of the cause, but at least it is stable.

Thanks. I'm not sure if that will solve my issue, but I'll keep it in mind when I'm working on it just in case.

I appreciate it.

I know what you mean about treating the symptoms. Sometimes the cause itself is puzzling to a point where you're completely lost and treating the symptoms is all you can do.

Originally Posted by vangogh

Mind sharing the solution? The page you describe is similar to one I'm working on that has Flash on it and uses a lot of javascript to change styles.

I've had a weird problem in all browsers. I have an empty link with a background image. The background image changes the source on hover. All done simply with css. The first time you hover no image shows at all. All that happens is the original background image disappears. Every time after that it works as you'd expect.

I know your issue was somewhat different, but it sounds similar enough to wonder if your solution can help mine.

Thanks.

I'm not totally sure from your description what you're trying to do, but if the background image changes on hover and doesn't appear the first time, you might want to try making it a CSS sprite if you haven't already. That tends to fix hover flickers and delays for images.

I think I basically have it set up as a css sprite, but I just did some quick searching and bookmarking to look at when I get a chance. Maybe I'm missing one small detail.

Thanks for the suggestion.