View Full Version : Spry Tabbed Panel acting oddly!

Bald Fox
12-09-2010, 04:59 AM
I have a Spry Tabbed Panel with 24 tabs.

The uploaded page looks and works well in IE7, but all tabs have a visual shudder when using the latest Firefox.

It happens only with the right-hand end tabs on the top two lines when they get the 'mouse-over', and although the tab's contents display okay when clicked, the shuddering makes the entire page look very ordinary.

The web site page is located at: http://www.wimmerahearingsociety.com.au/Archives.htm.

Dreamweaver CS3's Browser Compatibility Check shows FOUR Expanding Box Problems, and all say that "Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow. Affects: Internet Explorer 6.0. Likelihood: Likely".

The same Compatibility Check also mentions a Double Float Margin Bug which describes it so: "When a margin is applied to a floated box on the same side as the direction of the float, the margin is doubled. This bug only affects the first float in a row of one or more floats. Affects: Internet Explorer 6.0. Likelihood: Very Likely".

I'm hoping for a bit of help here, because I can't work out what the problem is. If anyone is able to help and needs the Spry tabbedpanels.css file, please let me know.


12-09-2010, 09:42 AM
The only movement I see is that if I hover the tabs they get wider because you use font-weight: bold on the hover state.

Bald Fox
12-09-2010, 10:55 PM
Thanks for your reply.

Have you viewed the page in Firefox, or any other browser other than IE?

It's this problem that is creating the issue.

12-09-2010, 11:00 PM
I viewed it in FF on the Mac, but like I said the tab expand when I hover over it, but this is because the hover state has a bold font-weight. This will make the text wider on hover. I thought that's what you meant.

Bald Fox
12-09-2010, 11:22 PM
Hi Gentleone,

I guess I'll have to remove the font-bold line and get on with other things.

While I was replying to this, I took a look at your URL, and just want to let you know that your entire page is not displayed on my computer.

All of the vertical is viewable, I think (just below your links to Featured Resouce, etc.), but only about 75% of the horizontal is viewable (your text first line: from the new design or the button: Gentle ???) with no horizontal scroll bar allowing me to move to the right.

I've noticed many other web sites with this same thing happening and some other having the left hand side not viewable with no way of seeing what's further to the left. Why does this occur?

12-09-2010, 11:38 PM
Thanks for letting me know. In what browser (version) did you view and what's your OS (version)?
The page is just a 'coming soon' page so there is no navigation on it (yet) to navigate through content that's not there (yet). I did position that content div with percentages (margin-top) and the footer has a bottom fixed position, so if you're resizing your window to a smaller size or if you have a lot of toolbars, the content div will go behind the footer. I guess this is what you mean and I'm aware of that.. will be fixed when I go live :)

Bald Fox
12-09-2010, 11:45 PM
You're right - I'm as blind as a bat and have FF 3.6.12 zoomed in two clicks.

I've just gone back to "normal" and can see everything on your page.

Sorry to bother you - my mistake.


12-09-2010, 11:52 PM
No, you're actually right... my new design has still some accessibility issues, because there are quite a lot of users that uses zoom, because they have not such good eyes.

The reason I made the footer like that is because of the way of navigation i'm planning to use. I'll show you quickly a link of it, but like I said there's still a lot of work to do on usability an accessibility.

*link removed*