Other CSS library overriding EXT JS tabs "look"_问答_开发者

http://www.habitat.noaa.gov/protection/efh/newInv/index.html - to view a live version

How do I make sure that the CSS from EXT JS is used in my tabs and not over-ridden by another library? The “look” of my EXT JS tabs are different within a file that also contains other CSS libraries vs when my file does not reference those other libraries. I can see in Firebug what is happening but I don’t understand how to fix it.

(Since I am new I cannot insert images yet. I have provided links instead)

Without the other CSS libraries my tabs look like this:

http://i1107.photobucket.com/albums/h395/mapguymike/tabs2.jpg

When I add the other libraries:

removed link because I have a live version now that displays the same information.

<link rel="stylesheet" type="text/css" href="../EXT_JS/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../EXT_JS/examples/simple-widgets/qtips.css" />
<link href="../../../css/style.css" rel="stylesheet" type="text/css" media="screen">
<link href="../../../css/contentarea.css" rel="stylesheet" type="text/css" media="screen">

I lose the left side of each tab. Using Firebug I've traced it to a background element in the style.css file that turns on an image that basically blocks that left side out. If I turn it off in FB it comes back white and then I have to turn off background-position to turn off the white. Even then it is still not the same but it is close.

#center a, #wide a, #ultrawide a {
...
background-image: url("/images_template/link.gif");
background-position: 0 0;
...
}

The other thing I don’t understand is that while the left side of the tab is affected when I click on the <a> in Firebug (in the followin开发者_JAVA技巧g line) it is ext-tab-right and not ext-tab-left that highlights on the page. <a onclick=”return false;” href=”#”>New England</a>

How do I stop the other library from overriding the "look" of my tabs?

In ExtJs the background image on the tabs is defined in one of the following selectors, they all target <a>-elements.

.x-tab-strip-top .x-tab-right
.x-tab-strip-top .x-tab-left
.x-tab-strip-top .x-tab-strip-inner

Are you by any chance applying any background styling on any of these selectors or <a>-elements yourself?

Without actually looking at the code it's quite hard to find the conflicting css styles. Any chance that you could post the css file that's being included next to ext-all.css?

Edit: line 410 in style.css is causing the problems. #center a, #wide a, #ultrawide a has a higher specificity as the background style defined by Ext

You can solve it by using classes instead of id's to style all <a>-tags:

replace the id="center" by class="center"
replace the css selector #center a, #wide a, #ultrawide a with .center a, .wide a, .ultrawide a

If you want to know the how and why read up a little on CSS specificity: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Another option is overriding the styles in style.css again. Just add the following rules to a css file you can edit. It's pretty verbose but should work.

#center a.x-tab-strip-top .x-tab-right, #wide a.x-tab-strip-top .x-tab-right, #ultrawide a.x-tab-strip-top .x-tab-right, 
#center a.x-tab-strip-top .x-tab-left, #wide a.x-tab-strip-top .x-tab-left, #ultrawide a.x-tab-strip-top .x-tab-left, 
#center a.x-tab-strip-top .x-tab-strip-inner, #wide a.x-tab-strip-top .x-tab-strip-inner, #ultrawide a.x-tab-strip-top .x-tab-strip-inner {
    background-image: url(../images/default/tabs/tabs-sprite.gif);
}

When a browser is trying to determine which styles to use, it takes into account something called specificity. Check that link before you read on. So what's happening here is that those extra styles which contain ID's are getting a higher specificity than the styles defined in your extjs CSS file (if the selectors are as ChrisR mentions in his answer). You can fix this in two ways:

Change the ExtJS selectors to be MORE specific than the ones in your other style file. You can do this by adding an ID to them (hopefully this is possible).
The other option is to make the styles in your other style file LESS specific. Meaning that you'll probably have to take out the ID references.

If two styles have the same specificity, the one defined last takes precedence (assuming there are no user or user agent stylesheets, which I don't think is the case here). So, you may want to switch the order you load the styles in to be like this:

<link href="../../../css/style.css" rel="stylesheet" type="text/css" media="screen">
<link href="../../../css/contentarea.css" rel="stylesheet" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="../EXT_JS/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../EXT_JS/examples/simple-widgets/qtips.css" />

Just in case you get some same specificity level issues.