I am currently struggling with the css layouts for a jquery-ui tabs. I am using two css, the first css I initially put together to get my desired look for my tabs(look at image 2). The second css named jquery-ui-1.8rc2.custom.css was added for alert dialog boxes that I am using on my web page. Now if I use them both css the tabs will be out disproportion (look image 2).
How can I avoid/bypass/sovle this css issue i am currently undertaking?
The tab CSS outlook i want:
The tab CSS outlook distortioned by jquery-ui-1.8rc2.custom.css:
Alert box in my site that uses jquery-ui-1.8rc2.custom.css:
EDIT:
This is my tabs.css
<style>
#page-wrap { width: 615px; background:#FFF; margin: 10px auto; margin: 0; padding: 0; }
.ui-tabs { zoom: 1;}
.ui-tabs .ui-tabs-nav { list-style: none; position: relative; overflow:hidden;
z-index: 1000; background: #EBEBEB; margin: 0; padding: 0;}
.ui-tabs .ui-tabs-nav li { position: relative; float: left;
border-bottom-width: 0 !important; margin: 0 0px -1px 0; background: #EBEBEB;}
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: 5px 10px ; outline: medium none; font-weight: bold; font-size:11px; line-height:
30px;}
.ui-tabs .ui-tabs-nav
li.ui-tabs-selected { border-bottom-width: 0; background: #F9AE5C; border-top:1px solid #D4D4D4; border-left:1px solid #D4D4D4; border-right:1px solid #D4D4D4; border-bottom:1px solid #FFF; }
.ui-tabs .ui-tabs-nav
li.ui-tabs-selected a, .ui-tabs
.ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav
li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a,
.ui-tabs.ui-tabs-collapsible
.ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; color: #222222; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { padding: 20px; display: block; border-width: 0; background: none;
position: relative; min-height: 100px; border: 1px solid #D4D4D4; }
.ui-tabs .ui-tabs-hide { display: none !important; margin: 0; padding: 0;}
.pngIcon{ padding:0px 5px 0px 5px; vertical-align:bottom;}
a.mover { background: #900; padding: 6px 12px; position: absolute;
color: white; font-weight: bold; text-decoration: none; }
.next-tab { bottom: 0; right: 0; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; border-top-left-radius: 10px; }
.prev-tab { bottom: 0; left: 0; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; border-top-right-radius: 10px; }
</style>
As for the jquery-ui-1.8rc2.custom.css here is the LINK
I’m betting that if the .custom.css is overwriting your .css rules, you’re calling the .custom.css stylesheet second in your head section. Call the custom.css first and yours second. The later call to your .css file should overwrite any rules that are duplicated between the stylesheets. Research ‘specificity’ in relation to multiple stylesheets.