IE7 ignoring specific CSS selector when styling jquery ui tabs


Unfortunately I am unable to display the page I am working on but basically here is the deal. I took over a project from someone else, and I am trying to modify some of the page while trying to figure out the code they used.

I have a page which needs the specific tabs to be styled a certain way.

The two CSS statements(correct me if I used the wrong phrase) are:

.ui-widget-header { /*border: 1px solid #e78f08;*/ border-bottom:1px solid #ddd; /*background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x;*/ /*color: #ffffff;*/ font-weight: bold; }

.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }

I added the following code which works in all browser except IE7 , it seems to work in IE8 though…

#upload-form .ui-widget-header{
    border-bottom:1px solid #a4aeb8 !important;

#upload-form .ui-tabs .ui-tabs-nav {
    padding:0 !important;

In IE 7, the first tab displays properly and uses my style… However when I click on other tabs it ignores my styles and uses the ones I posted first. According to firebug and what I see on the screen.

I am using two css files. The first set of css is in jquery.css and the second is in styles.css.

I am importing the css with:

<link href="styles/jquery.css" rel="styleSheet" type="text/css" media="screen" />
<link href="styles/styles.css" rel="styleSheet"  type="text/css" media="screen" />

I tried switching the order of the sheets, since all my google searches brings me to a cascading issue with IE like the following bug ( but still no luck…

Any idea how I can make IE read the correct CSS so my page can display correctly?

Thank you in advance!

Any chance of us being able to look at an example? Try to reduce the HTML to a bareminimum case. Chances are you can figure it out from there, but if you can’t then I at least need the HTML/CSS to reproduce this on my end.

I’d do a quick validation of HTML/CSS just to get that off possible reasons