Solution for tabs/QuickTabs that works in IE6, IE7, Firefox 3 and Safari 3 identically

Posted by mr.andrey on February 11, 2009 at 8:18pm

Issue Summary

Grettings,

After much struggle, I finally got my tabs to work across IE6, IE7 and Firefox the same way.

A muggle non-web-developer might wonder why I'm jumping up and down right now, but some I'm sure will understand.

The default zen tabs don't work in IE6.

Here's an alternate solution with nice-looking tabs (see attached screenshot):

#1. We're going to use custom tabs, so unless you want to do a lot of re-definition for primary tabs, let's just yank that class out of the tabs, along with the clear-block one:

in template.php, add this:

<?php
function phptemplate_menu_local_tasks() {
  $output = '';
  /*if ($primary = menu_primary_local_tasks()) {
    $output .= '<ul class="tabs primary clear-block">' . $primary . '</ul>';
  }
  if ($secondary = menu_secondary_local_tasks()) {
    $output .= '<ul class="tabs secondary clear-block">' . $secondary . '</ul>';
  }*/

  // Bypass the primary and clear-block classes - since we're using custom tabs, there's lots of unsetting to do;
  // the original tabs don't really work in IE6 anyway
  if ($primary = menu_primary_local_tasks()) {
    $output .= '<ul class="tabs">' . $primary . '</ul>';
  }
  if ($secondary = menu_secondary_local_tasks()) {
    $output .= '<ul class="tabs">' . $secondary . '</ul>';
  }

  return $output;
}
function phptemplate_menu_local_task($link, $active = FALSE) {
  //return '<li '. ($active ? 'class="active" ' : '') .'>'. $link ."</li>\n"; // <- original
  return '<li '. ($active ? 'class="active" ' : '') .'>'. $link ."</li>"; // "\n" at the end causes extra space in IE
}
?>

I left the commented-out originals, just so you can see what we're changing.

#2. Add the following CSS (note, I'm using QuickTabs, for which this also works, but feel free to delete the extra definitions if you're not using that module):

.tabs,
.quicktabs_main.quicktabs-style-nostyle {
  clear:both;
}
ul.tabs,
ul.quicktabs_tabs.quicktabs-style-nostyle {
  background: #fff url('images/tab-bg.gif') repeat-x bottom;
  font:bold 12px/20px Verdana;
  padding: 3px 0px 3px;
  height: 20px;
  margin:0 0 10px 0;
}
.sidebar ul.quicktabs_tabs.quicktabs-style-nostyle {
  padding:0 0 3px 0;
}
ul.tabs li,
ul.quicktabs_tabs.quicktabs-style-nostyle li {
  margin:0;
  padding:0;
  display: block;
  float: left;
  padding: 2px 0 1px !important;
  list-style-type: none;
  background: url('images/tab-left.gif') no-repeat left bottom;
}
.sidebar ul.quicktabs_tabs.quicktabs-style-nostyle li {
  margin:0;
  display: block;
  float: left;
  padding: 2px 0 1px;
  list-style-type: none;
  background: none;
}
ul.tabs li a:link,
ul.tabs li a:visited,
ul.quicktabs_tabs.quicktabs-style-nostyle li a:link {
  color: #666;
  padding: 8px 12px 3px 11px;
  margin:0;
  font:bold 12px/20px Verdana;
  background: url('images/tab-right.gif') no-repeat right bottom;
}
ul.tabs li a:hover,
ul.quicktabs_tabs.quicktabs-style-nostyle li a:hover {
  text-decoration:none;
  color:#333;
}
ul.tabs li.active a:link,
ul.tabs li.active a:visited,
ul.quicktabs_tabs.quicktabs-style-nostyle li.active a {
  color: #000 !important;
  background: url('images/tab-right-active.gif') no-repeat right bottom;
}
ul.tabs li.active,
ul.quicktabs_tabs.quicktabs-style-nostyle li.active {
  background: url('images/tab-left-active.gif') no-repeat left bottom;
}
.sidebar ul.quicktabs_tabs.quicktabs-style-nostyle li.active a {
  color: #027AC6 !important;
  background: url('images/tab-right.gif') no-repeat right bottom;
}
.sidebar ul.quicktabs_tabs.quicktabs-style-nostyle li.active {
  background: url('images/tab-left.gif') no-repeat left bottom;
}
/* IE 6 Debug */
* html ul.tabs,
* html ul.quicktabs_tabs.quicktabs-style-nostyle,
* html .sidebar ul.quicktabs_tabs.quicktabs-style-nostyle {
  padding-bottom: 0px;
}
* html ul.tabs li a:link,
* html ul.tabs li a:visited,
* html ul.quicktabs_tabs.quicktabs-style-nostyle li a:link {
  padding-bottom:4px;
}
/* IE 7 Debug */
html>body ul.tabs li a:link,
html>body ul.tabs li a:visited,
html>body ul.quicktabs_tabs.quicktabs-style-nostyle li a:link {
  *padding-bottom: 4px;
}

#3. And finally, add the images to your theme's images/ folder. Don't forget to adjust the css file paths if you're storing images somewhere else.

Attached is a photoshop template for easy generation of your own good looking tabs.

Enjoy!
Andrey.

P.S. The development of this is sponsored by Personal Growth Courses, thought I'd mention.

Attachment	Size
tab-bg.gif	67 bytes
tab-left-active.gif	301 bytes
tab-right-active.gif	190 bytes
tab-right.gif	321 bytes
tab-left.gif	676 bytes
tabs-screenshot.gif	42.51 KB
tabs-template.psd_.zip	18.72 KB

Comments

#1

Posted by JohnAlbin on February 11, 2009 at 9:43pm

Status:

active

» postponed (maintainer needs more info)

The default zen tabs don't work in IE6.

They work fine in IE6, so I don't know why you had to re-do them. See the attached screen shot showing the tabs and a snippet of IE6's about box.

Attachment	Size
zen-tabs-in-ie6.png	8.44 KB

#2

Posted by mr.andrey on February 12, 2009 at 8:44pm

Interesting... with default settings and no alterations for a simple custom theme, I get this on IE6 (screenshot attached), while it works on IE7 and Firefox.

Anyway, if it works for others, that's great.

All the Best,
Andrey.

Attachment	Size
zen-ie6-notabs.gif	8.42 KB

#4

Posted by nsputnik on April 21, 2009 at 6:54pm

Component:

Code

» IE Problems

How are you defining "work"? Just the appearance and the mechanics? I am having a problem in IE6 where when I cursor over the quicktab links or click on them (depending on the button style) content areas are disappearing, truing the background color of certain divs, so that some text and photos are not longer visible.

#5

Posted by 1ncipient on April 13, 2010 at 10:19am

re: nsputnik:
I'm not getting this problem in IE 6

Thanks for an amazing Tab system Mr. Andrey :)

#6

Posted by sgarciaf on December 3, 2010 at 7:52am

If you have this problem, the reason is somewhere else in your css code.
I had the same before and it was because of a css bad structure on my horizontal menu bar.

#7

Posted by akalata on December 13, 2010 at 9:04pm

Status:

postponed (maintainer needs more info)

» closed (cannot reproduce)

Project:	Zen
Version:	6.x-1.x-dev
Component:	IE Problems
Category:	feature request
Priority:	normal
Assigned:	Unassigned
Status:	closed (cannot reproduce)

Solution for tabs/QuickTabs that works in IE6, IE7, Firefox 3 and Safari 3 identically

Jump to:

Issue Summary

Comments

#1

#2

#3

#4

#5

#6

#7