Question

I’ve used jQuery tabs and can’t override one thing.

#tabs .ui-tabs-nav {
    height: 2.35em;
    text-align: center;
}
#tabs .ui-tabs-nav li {
    display: inline-block;
    float: none;
    margin: 0em;

}

#tabs .ui-widget-content { 
    border: none;
    background: none; 
    padding-left:13px;
}
#tabs .ui-widget-header { 
    border: none; 
    background: #ffffff;
    font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
    font-size:12px;
}
#tabs .ui-state-default, .ui-widget-content .ui-state-default {
    background:#b9c9fe; 
    border:1px solid #E0E0E0;
}
#tabs .ui-state-active, .ui-widget-content .ui-state-active {
    background:#e8edff none; 
    border:1px solid #ffffff;
}

The problem is that I can’t get rid of the one, external border.

Anyone willing to help?

Thanks in advice.

HTML:

<div id="tabs">
        <ul>
            <li><a href="#tabs-1">1</a></li>
            <li><a href="#tabs-2">2</a></li>
            <li><a href="#tabs-3">3</a></li>
            <li><a href="#tabs-4">4</a></li>
            <li><a href="#tabs-5">5</a></li>
        </ul>
        <div id="tabs-1">
            <p>TODO</p>
        </div>
        <div id="tabs-2">
            <p>TODO</p>
        </div>
        <div id="tabs-3">
            <p>TODO</p>
        </div>
        <div id="tabs-4">
            <p>TODO</p>
        </div>
        <div id="tabs-5">
            <p>TODO</p>
        </div>
    </div>

Added code with HTML code to show how it goes with CSS included.

Answer 1

This selector needs to be changed assuming #tabs is the element you called .tabs() on:

#tabs .ui-widget-content

to

#tabs.ui-widget-content

or

#tabs