PDA

View Full Version : AJAX Tabs - Glitch with Firefox



jbiwill
05-11-2007, 09:32 AM
1) Script Title: Ajax Tabs Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/

3) Describe problem:

I have implemented this script on my website. It works perfectly in IE :D 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
05-11-2007, 09:33 AM
It would be simple to troubleshoot if you either provide a link to your web page or the source code you used.

jbiwill
05-11-2007, 09:50 AM
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
05-11-2007, 09:24 PM
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
04-21-2008, 04:28 PM
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
04-22-2008, 10:08 AM
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
04-23-2008, 08:01 AM
Yes! That did it! Thanks!

johnwboyd
04-24-2008, 06:06 AM
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