AJAX Tabs - Glitch with Firefox

[jbiwill]

1) Script Title: Ajax Tabs Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...axtabscontent/

3) Describe problem:

I have implemented this script on my website. It works perfectly in IE but in FireFox, when you click and select a new tab, the page scrolls to the top of the page, putting the tab box out of view, making the user scroll to the area of the page where they an see the tabs again.

Any ideas?

Many thanks,

Will.

[codeexploiter]

It would be simple to troubleshoot if you either provide a link to your web page or the source code you used.

[jbiwill]

Ok - http://www.jbitravelinsurance.com/dd/annual.html

I'm not sure that it is even behaving correctly in IE. Is it normal that the page will refresh to the top when clicking on the tab first time round. After that, switching between tabs seems to be fine as the pages have been cached?

Thanks.

[StarrRider]

It isn't just Firefox & maybe IE. Mozilla 1.7.13 does not jump to the top of the page - but the page does jump up and down. Only after the second tab (Key Facts & Policy Wording) has been selected (as long as it isn't scrolled) does it stay stationary.

[johnwboyd]

Can someone please look at my CSS code and let me know why the default tab bg color is correct in IE, but not in FF?

http://johnwboyd.info/uniwayholdings/

http://johnwboyd.info/uniwayholdings/ajaxtabs.css

[codeexploiter]

The CSS file you've used contains one incorrect part in it - ajaxtabs.css go to line 48 where you can see the following class instruction which is incorrect:

.shadetabs li a.selected{ /*selected main tab style */
.shadetabs li a{
text-decoration: none;
font-weight: 600;
font-size: 12px;
font-family: Arial;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #6699FF;
color: #2d2b2b;
background: url(images/active.gif) top left repeat-x;
}

I think the error is visible without much trouble (highlighted). You need to change that to like the following

.shadetabs li a.selected{ /*selected main tab style */
text-decoration: none;
font-weight: 600;
font-size: 12px;
font-family: Arial;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #6699FF;
color: #2d2b2b;
background: url(images/active.gif) top left repeat-x;
}

Due to this CSS error Firefox doesn't get any CSS values and consider selected class as blank one and uses the styles mentioned for anchor elements. IE somehow skip this error and display correct background image.

Hope this helps.

[johnwboyd]

Yes! That did it! Thanks!

[johnwboyd]

I tried to incorporate sub menu drop down links under some of my links from another tutorial but it went haywire. Can someone please give me some assistance?

http://johnwboyd.info/uniwayholdings/

http://johnwboyd.info/uniwayholdings/ajaxtabs.css
Thanks Edit/Delete Message