Hello,
I have created my own theme for a tabsheet but I am having weird results when first logging into my application. It cuts off the text for a few of the tabs. Once you click on the tabs, it repaints the tabs properly. Perhaps the problem is with my style.css settings. Wondering if anybody would be able to easily point me to what could be causing it.
Before clicking:
After clicking:
My styles.css is defined as follow:
.i-tabsheet,
.i-tabsheet-content,
.i-tabsheet-deco {
outline: none; /* Prevent selection outline which might break layouts or cause scrollbars /
text-align: left / Force default alignment */
}
.i-tabsheet-tabs {
empty-cells: hide;
border-collapse: collapse;
margin:0;
padding:0;
border:0;
height: 24px;
width: 100%;
overflow:hidden;
}
.i-tabsheet-tabs td {
margin:0;
padding:0;
}
.i-tabsheet-spacertd {
width: 100%;
}
.i-tabsheet-spacertd div {
height: 24px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #b6bbbc;
background: transparent;
}
.i-tabsheet-hidetabs .i-tabsheet-tabcontainer {
display: none;
}
.i-tabsheet-tabs .i-caption {
white-space: nowrap;
}
/* for IE (does not inherit) */
.i-tabsheet-tabs .i-caption span {
white-space: nowrap;
}
.i-tabsheet-tabitem {
border: none;
background: transparent url(img/tab-unselected.gif) no-repeat;
margin: 0;
padding: 0;
width: 124px;
height: 24px;
color: #000000;
font-size: 11px;
font-weight: bolder;
cursor: pointer;
}
.i-tabsheet-tabitem .i-caption {
margin-left: 10px;
margin-top: 5px;
width: 124px;
padding: 0;
overflow: visible;
}
.i-tabsheet-tabitem-selected {
border: none;
background: transparent url(img/tab.gif) no-repeat;
margin: 0;
padding: 0;
width: 124px;
height: 24px;
cursor: default;
color: #ee5311;
}
.i-tabsheet-tabitem:hover {
color: #4b5257;
}
.i-tabsheet-tabitem-selected:hover {
color: #ee5311;
}
.i-tabsheet-tabitem-selected .i-caption {
margin-left: 10px;
margin-top: 5px;
width: 124px;
padding: 0;
overflow: visible;
}
.i-tabsheet-content {
border: 1px solid #b6bbbc;
background-color: #fff;
border-bottom: 1px solid #b6bbbc;
border-top: none;
position: relative;
}
.i-tabsheet-hidetabs .i-tabsheet-content {
border-top: 1px solid #b5babb;
}
.i-tabsheet-deco {
border-bottom: 1px solid #b6bbbc;
}
/* Progress indication */
.i-tabsheet-loading .i-tabsheet-tabitem-selected .i-captiontext {
background: transparent;
margin-left: 0;
padding-left: 0;
}
/* IE specific styles */
-
html .i-tabsheet-tabs {
height: 24px;
}
*+html .i-tabsheet-tabs {
height: 24px;
} -
html .i-tabsheet-tabitem-selected {
border: none;
background: transparent url(img/tab.gif) no-repeat;
margin: 0;
padding: 0;
width: 124px;
height: 24px;
cursor: default;
color: #000000;
}
*+html .i-tabsheet-tabitem-selected {
border: none;
background: transparent url(img/tab.gif) no-repeat;
margin: 0;
padding: 0;
width: 124px;
height: 24px;
cursor: default;
color: #000000;
} -
html .i-tabsheet-tabitem-selected .i-caption {
background: transparent;
margin-left: 10px;
margin-top: 5px;
width: 124px;
padding: 0;
overflow: visible;
}
*+html .i-tabsheet-tabitem-selected .i-caption {
background: transparent;
margin-left: 10px;
margin-top: 5px;
width: 124px;
padding: 0;
overflow: visible;
} -
html .i-tabsheet-tabitem .i-caption {
background: transparent;
margin-left: 10px;
margin-top: 5px;
width: 124px;
padding: 0;
overflow: visible;
}
*+html .i-tabsheet-tabitem .i-caption {
background: transparent;
margin-left: 10px;
margin-top: 5px;
width: 124px;
padding: 0;
overflow: visible;
} -
html .i-tabsheet-tabitem:hover {
color: #4b5257;
} -
html .i-tabsheet-tabitem-selected:hover {
color: #ee5311;
}
*+html .i-tabsheet-tabitem:hover {
color: #4b5257;
}
*+html .i-tabsheet-tabitem-selected:hover {
color: #ee5311;
}
-
html .i-tabsheet-content {
border-bottom: 1px solid #b6bbbc;
}
*+html .i-tabsheet-content {
border-bottom: 1px solid #b6bbbc;
} -
html .i-tabsheet-deco {
height: 0;
}
*+html .i-tabsheet-deco {
height: 0;
}
Thanks for your help,
Ajay