View Single Post
Old 08-11-2012, 10:02 PM   #1
London83
 
Join Date: Aug 2012
Posts: 1
Default Cannot get Spry Tabbed panels to come up as horizontal. any advice

Hi Guys,

When i insert Spry tabbed Panels they appear as vertical. Is there a way i can get them to be horizontal?

Thanks in advance.

Here is the CSS file that gets created, Let me know if you need anymore info:

.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}

.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
}


.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.7em sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
}


.TabbedPanelsTabHover {
background-color: #CCC;
}


.TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: 1px solid #EEE;
}


.TabbedPanelsTab a {
color: black;
text-decoration: none;
}


.TabbedPanelsContentGroup {
clear: both;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #EEE;
}


.TabbedPanelsContent {
overflow: hidden;
padding: 4px;
}


.TabbedPanelsContentVisible {
}




.VTabbedPanels {
overflow: hidden;
zoom: 1;
}


.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
}


.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
}



.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
}


.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
}


@media print {
.TabbedPanels {
overflow: visible !important;
}
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
}
.TabbedPanelsContent {
overflow: visible !important;
display: block !important;
clear:both !important;
}
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:both !important;
}
}
London83 is offline   Reply With Quote