Hello,
My Jquery Tags are working perfectly. But the only problem I am now
experiencing is the selected tabs have a 1px white line underneath
them. I have matched the colour of the tab and pane, but the 1px
line underneath makes the tabs look separate from the pane. Has
anyone
encountered this issue and know of a quick fix?
Please bear in mind that I would like to keep the line under the
unselected tab...
Here is my CSS
ui-tabs .ui-tabs-hide {
display: none;
}
#tabs ul li a {
background:#ECEDFC none repeat scroll 0 0; /* first tab is
blue like
the panel */
/* background: none; */
text-indent:0;
font-size:100.01%;
line-height:1.4;
padding:0.5em 1em;
}
#tabs ul li a.tabTwo {
background:#FFCCFF none repeat scroll 0 0; /* second tab is
pink
like the second panel */
}
.ui-widget-header {
background: none;
border: none;
}
/* interaction states */
.ui-state-default, .ui-widget-content .ui-state-default { border: 1px
solid #d3d3d3; background: #e6e6e6 url(images/ui-
bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x; font-weight: normal;
color: #555555; outline: none; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default
a:visited { color: #555555; text-decoration: none; outline: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-
focus, .ui-widget-content .ui-state-focus { border: 1px solid #999999;
background: #dadada url(images/ui-bg_glass_75_dadada_1x400.png) 50%
50% repeat-x; font-weight: normal; color: #212121; outline: none; }
.ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-
decoration: none; outline: none; }
.ui-state-active, .ui-widget-content .ui-state-active { border: 1px
solid #aaaaaa; background: #ffffff url(images/ui-
bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: normal;
color: #212121; outline: none; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active
a:visited { color: #212121; outline: none; text-decoration: none; }
Martin
