[Plugin: WordPress Post Tabs] 'Fade' Effect Causing Problems in IE

  • Resolved Copernicus

    (@copernicus)


    12 years, 11 months ago

    Great plugin!
    Everything is working wonderfully except in IE8 when the tabs ‘Fade’ effect is enabled on the “Default” tab style.

    On initial page load, the display is as expected; but once one of the tabs is clicked, the content is pushed to the right (aligning with the right edge of the current tab).

    This only seems to happen in Internet Explorer (I’m seeing it in IE8).
    Other browsers are working perfectly. Also, the “Gray” and “Red” themes do not experience this problem — only the “Default” tabs style.

    As far as I can tell, it has something to do with the code that is dynamically added to perform the fade effect transition; but I can’t tell what code specifically is causing the issue.

    Anyone else seeing this or have a fix?

    http://wordpress.org/extend/plugins/wordpress-post-tabs/

Viewing 1 replies (of 1 total)
  • Thread Starter Copernicus

    (@copernicus)

    12 years, 11 months ago

    Found the problem.

    Apparently, IE doesn’t like the 32px height set for “.ui-tabs-nav” in the default tabs stylesheet.

    To fix the issue, I did the following:

    On line 4 of style.css of the “default” tabs style (found in “wp-content/plugins/wordpress-post-tabs/css/styles/default”), I changed

    ul.ui-tabs,ul.ui-tabs-nav{margin:0 !important;height:32px;background:#EFEFEF;font-size:13px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;line-height:24px !important}

    to

    ul.ui-tabs {margin:0 !important;height:32px;background:#EFEFEF url(images/tabs-bg.gif) repeat-x;font-size:13px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;line-height:24px !important}*/

    (changes: I removed “ul.ui-tabs-nav” and added a background image “tabs-bg.gif” that is a 33px high GIF of a solid color (#efefef, in this case).

    On the next line, I added a new style of:
    .ui-tabs-nav { background: url(images/tabs-bg.gif) repeat-x; height: 36px; }

    This sets the height to 36px which accommodates the height of the little arrow & makes IE happy.

    Hope this helps someone!

Viewing 1 replies (of 1 total)
  • The topic ‘[Plugin: WordPress Post Tabs] 'Fade' Effect Causing Problems in IE’ is closed to new replies.