fmz 14

I have implemented jQuery UI Tabs here: http://www.rouviere.com/photo/retouching

The styling is controlled via the default jquery-ui-1.8.11.custom.css for this page. However, IE8 interprets the font-size differently which truncates the last tab down into the content area. If I modify the jquery...css stylesheet it will ruin it for all the other browsers.

I tried including an exception in the IE8 stylesheet but it didn't override the jQuery one so then I tried to include it in the exception link on the page as follows:

<!--[if IE 8]><link href="../_css/rou_ie8.css" rel="stylesheet" type="text/css" />
<style type="text/css">.ui-tabs ui-tabs-nav li a { padding: .5em .8em .5em .8em; }</style>
<![endif]-->

That didn't work either. Is there a suitable work around to this dilemma? I just want the tabs to be properly spaced and aligned on all browsers.

Thanks.

1 answer

danwellman 5600
1
point
This was chosen as the best answer

Did you fix this? It's fine in my IE8.

Additionally, there is a potential problem in the code snippet you've added above, the ui-tabs-nav class selector is missing its dot prefix.

Answered over 5 years ago by danwellman
  • Hi Dan, it looks the same to me here with the last tab pushed down and to the left. I added the missing dot prefix but it doesn't make a difference. Any other ideas? fmz over 5 years ago
  • specificity will win...if all else fails !important should do it danwellman over 5 years ago