Matt 0

I am trying to implement jQuery tabs into a page with specific css requirements. The tabs and most of the page contents falls within a maincol div that is centered in the page. But the page also has a navigation menu on the left side column of the page. I didn't write this css but I have to work with it.

When the content in the menu column is removed, the tabs display correctly. You can view that (and access the css pages) at this link.

Here is what it looks like when the menu content is included. You will also notice that the menu mouseovers don't display properly now either.

This menu (only a portion is shown in my examples) is included on every page of the site. So I have to be careful about adjusting the css for the menu. It's used elsewhere and displays fine elsewhere. It's really just on this one page where I try to use the tabs. The tabs CSS was generated from jQuery Themeroller

I believe most of the menu elements are as follows:

/* Styles for left-hand column */

#linkcol {
    float: left;
    width: 180px;
    background-color: #929050;
    }
#linkcol img {
padding:0 10px 0 10px;
    }
/* styles for left column menu */
#nav {
    PADDING-BOTTOM: 0px; 
    LIST-STYLE-TYPE: none; 
    MARGIN: 20px 0 40px 10px; 
    PADDING-LEFT: 0px; 
    WIDTH: 13em; 
    PADDING-RIGHT: 0px; 
    FLOAT: left; 
    LIST-STYLE-IMAGE: none; 
    PADDING-TOP: 0px;
    font-size:11px;
}

#nav UL {

    PADDING-BOTTOM: 0px; 
    LIST-STYLE-TYPE: none; 
    MARGIN: 0px; 
    PADDING-LEFT: 0px; 
    WIDTH: 13em; 
    PADDING-RIGHT: 0px; 
    FLOAT: left; 
    LIST-STYLE-IMAGE: none; 
    PADDING-TOP: 0px;
    font-size:100%;
}

#nav LI {

    POSITION: relative; 
    LINE-HEIGHT: 1.5em; 
    WIDTH: 13em; 
    margin-left:0;
    FLOAT: left;
    height:3.3em;
}

#nav LI UL {
    POSITION: absolute; 
    MARGIN-TOP: -3.5em; 
    MARGIN-LEFT: 14em; 
    LEFT: -999em;
    font-size:inherit;
    font-size:100%;
}

#nav LI A {
    BORDER-BOTTOM: #333 1px solid; 
    PADDING-BOTTOM: 0px; 
    BACKGROUND-COLOR: #929050; 
    PADDING-LEFT: 0.5em; 
    WIDTH: 13em; 
    PADDING-RIGHT: 0.5em; 
    DISPLAY: block; 
    COLOR: #efecd4; 
    BORDER-TOP: #333 1px solid; 
    FONT-WEIGHT: bold; 
    TEXT-DECORATION: none; 
    PADDING-TOP: 0px;
    height:3.3em;
}

#nav LI A:hover {
    BACKGROUND-COLOR: #4b3a26; 
    COLOR: #efecd4;
}

#nav LI UL LI A {
    BORDER-BOTTOM: #333 1px solid; 
    BACKGROUND-COLOR: #6e5539; 
    DISPLAY: block; 
    COLOR: #efecd4; 
    BORDER-TOP: #333 1px solid; 
}

#nav LI UL LI A:hover {
    BACKGROUND-COLOR: #4b3a26; 
    COLOR: #efecd4;
}

#nav LI:hover UL {
    LEFT: auto;
}

#nav LI.sfhover UL {
    LEFT: auto;
}

2 answers

Matt 0
0
points
This was chosen as the best answer

Going to answer my own question b/c I got some help elsewhere. Addition of commented lines fixed problem:

#linkcol {
 float: left;
 width: 180px;
 background-color: #929050;
 height: 0px; /*specify height*/
 }

#nav LI:hover UL {
 LEFT: auto;
 z-index: 99; /*make nav overlay page content*/
}
#nav LI.sfhover UL {
 LEFT: auto;
 z-index: 99; /*make nav overlay page content*/
}
Answered about 6 years ago by Matt
Mauro 0
0
points

Just fixed this issue with this on my stylesheet (of course, excecuted after jQuery UI's):

.ui-tabs .ui-tabs-nav {
    overflow: hidden !important;
}
Answered over 5 years ago by Mauro