I'm using vertical slider tab plugin inside SpryTabbedAsset plugin..SpryTabbed plugin is working nice... But in VerticalSlider plugin, on page load the contents are overlapping of all four tabs.. As I click all four tabs it is giving specific content of tab.. And afterwards it is working properly...I'm attaching screenshot of overlapping and screenshot of working after clicking all four tabs..
In following screenshot above three tabs are of SpryTabbed plugin and Following Pink colored four tabs are of VerticalSlider plugin..Following is CSS for VerticalSlider plugin:\[code\]@charset "utf-8";/* Container */.verticalslider {border: 1px solid #666666; overflow: hidden; width: 825px; margin: 0 auto; margin-top: 25px; height: 504px; }/* Tabs */.verticalslider_tabs {float: left;width: 250px;}.verticalslider_tabs, .verticalslider_tabs li{margin: 0px; padding: 0px;}.verticalslider_tabs li{list-style-type: none;}.verticalslider_tabs a:link, .verticalslider_tabs a:visited{display: block; width: 109px; height: 85px; padding: 35px 10px 6px 10px; background-color: #eeeeee;font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; font-weight: bold;color: #333333; border-right: 1px solid #666666; border-top: 1px solid #666666; text-decoration: none;}.verticalslider_tabs li:first-child a:link, .verticalslider_tabs li:first-child a:visited{border-top: none; height: 85px;}.verticalslider_tabs .activeTab a:link, .verticalslider_tabs .activeTab a:visited{background: #ffffff; border-right: 1px solid #ffffff;}.verticalslider_tabs .activeTab a:hover, .verticalslider_tabs .activeTab a:active{background: #ffffff; border-right: 1px solid #ffffff;}.verticalslider .arrow {width: 27px; height: 60px; position: absolute; z-index: 1000; margin-left: 250px; margin-top: -55px; }/* Contents */.verticalslider_contents{float: left;width: 500px;display: inline; margin: 0px; padding: 0px;}.verticalslider_contents li{margin-left: -120px; padding: 0px;width: 695px; padding: 0px;display: none;position: absolute;list-style-type: none; }.verticalslider_contents li h2{font-family: Georgia, "Times New Roman", Times, serif, font-size: 15px; color: #333333;margin: 5px 20px; padding: 0px;}.verticalslider_contents li p{ margin: 5px 20px; padding: 0px;color: #333333;font-family: Tahoma, Geneva, sans-serif; font-size: 13px; }.verticalslider_contents .activeContent{display: inline;}/* Play Pause*/.verticalslider .playPause a{display:block;width: 60px;height: 60px;position:absolute;z-index:50;}.verticalslider .pause a:hover,.verticalslider .pause a:active,.verticalslider .play a:hover,.verticalslider .play a:active{background-position:0px -60px;border-bottom: none;}/* Float Right Styles .verticalslider_tabs {float: right;}.verticalslider .arrow {margin-left: -27px; background: url(../images/arrow-right.png); }.verticalslider_tabs a:link, .verticalslider_tabs a:visited{border-left: 1px solid #666666; border-right: none;}.verticalslider_tabs .activeTab a:link, .verticalslider_tabs .activeTab a:visited{border-left: 1px solid #ffffff;}.verticalslider_tabs .activeTab a:hover, .verticalslider_tabs .activeTab a:active{border-left: 1px solid #ffffff;}*/\[/code\]Please help me out from this issue..I tried it much but I am not getting what is issue..Thanks in advance...