jQuery UI tab with IE7 issue

Question

Hi

I am new to jQuery.

I use

<script src="test/lib/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="test/lib/jquery-ui-1.8.custom.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="ui_tabs/css/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" charset="utf-8"/> 
<script type="text/javascript" src="test/stab_ui.js"></script> 

and stab_ui.js

$(document).ready(function(){
  $('#testtab').tabs();
});

and IE7 is giving issues with UI tabs layout on my web app.

The placement of the UI tabs overlaps the other jQuery plugin I use. I wonder if this to do with zIndex. If so, I need help to know where and what to modify this fix.

With other latest to date browsers Safari and FF, the UI tab displays nicely.

Where in the jQuery script that I have to modify to fix IE browser issues. I am worried that this issue may apply IE6/7/8 too.

If you need to see the problem, please let me know and I could share with you the actual look of the problem.

Thank you for your advice. Your help is greatly appreciated. We mean it.

Sincerely chz

Update

Hi We downloaded to use

<* script src="test/lib/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"> <* script src="test/lib/jquery-ui-1.8.4.min.js" type="text/javascript" charset="utf-8"> <* link rel="stylesheet" href="ui_tabs/css/jquery-ui-1.8.4.custom.css" type="text/css" media="screen" charset="utf-8"/> <* script type="text/javascript" src="test/stab_ui.js">

and unfortunately, the layout of the jquery UI tabs still overlaps our jquery plugin treeview and pagination inside UI tab also fails in rendering. What else could it be ? Any help is appreciated.

PS Please ignore synxtax we have problem posting it here so we put <* as a workaround.

Answer 1

From a quick glance I see you're including some old CSS with new script. jQuery UI releases updated CSS and JavaScript at the same time, they're closely tied together for many things, and upgrading one without the other is bound to cause issues.

I know from upgrading 1.7 to 1.8 recently that the 1.8 stylesheet more than a few fixes specifically for IE7 (zoom, primarily), ones accompanied by script changes.

Your ui_tabs/css/jquery-ui-1.7.2.custom.css should be upgraded to the equivalent 1.8 version, you can find a URL to to this in the top of the CSS file, assuming you haven't modified it afterwards, that link will take you to ThemeRoller with the same color/image configuration so you can get the generated 1.8+ version.