Tabs

piotrdesign:

The problem is that IE/Win (up to version 7.0b2, anyway) only supports the :hover pseudo-class on the "a" element.

Why don't you try editing style.css so that after this line:

#header ul li:hover a { 
  background-position: 0% -400px; 
}

...you add another that reads:

#header ul a:hover { 
  background-position: 0% -400px; 
}

I haven't tried it myself, but I suspect that you'd see the proper tab rollover behavior when you rolled over the link text (but not the rest of the tab image).

If that doesn't work, or if you want it to work with the *whole* tab, there are other documented work-arounds for this bug. (For instance this one.)

I don't care about it enough to do the work myself, but maybe you do?

can you please confirm if this fixed your issue?

Drupal adds the active class to a tab when it is pressed.

So, you should add to your CSS the following

#header ul li.active,
#header ul li.active a {
  background-position: 0% -400px;
}

I hope this works.

Paddy.

PS: to the best of my knowledge IE _only_ supports :hover on 'a' elements. So normally li:hover should not work.

I have it working on one of my sites - what you need to do is two fold.

Update your page.tpl.php to print the primary_links as follows

<?php if ($primary_links) { print theme_menu_links($primary_links); } ?>

Update your CSS to include

#header ul li.active a { 
  background-position: 0% -400px;
} 
#header ul li.active { 
  background-position: 100% -400px;
}

Mad Max, if you are watching - is it good pratice to call theme_menu_links from within page.tpl.php?

theme_menu_links adds the active class to the li entries rather than to just the hyper link.

Paddy.

I am glad that at least one part of the problem is solved.

IE only supports :hover on hyperlinks. IE does not support :hover on list items.

On hover, the tab is changed by specifying two items in the CSS, #header ul a:hover and #header ul li:hover. So only the #header ul li:hover a will work in IE.

You could change your CSS to be

html > body #header ul a:hover {
background-position: 0% -400px;
}

IE will then ignore this and will not change the partial background.

Paddy.

Wow! works so easily!
thanks a lot...

Just one thing to workaround for me... I have a link pointing to . How to make it active when we're looking at the front page?

Thanks, Mélindia

Ar you using

<?php if ($primary_links) { print theme_menu_links($primary_links); } ?>

in your page.tpl.php to produce the links?

Paddy.

The problem with the new theme('links', ...) function is that it adds the " active" class only to the <a> element and not the

#header ul li.menu-1-6-2-active a,
#header ul li.menu-1-5-2-active a,
#header ul li.menu-1-4-2-active a,
#header ul li.menu-1-3-2-active a,
#header ul li.menu-1-2-2-active a,
#header ul li.menu-1-1-2-active a {
  background-position: 0% -400px;
}
#header ul li.menu-1-6-2-active,
#header ul li.menu-1-5-2-active,
#header ul li.menu-1-4-2-active,
#header ul li.menu-1-3-2-active,
#header ul li.menu-1-2-2-active,
#header ul li.menu-1-1-2-active {
  background-position: 100% -400px;
}

Please read the first line as:

The problem with the new theme('links', ...) function is that it adds the " active" class only to the <a> element and not the
<li> element. It is therefore not possible to 'easily' theme the menu.

I forgot to escape the brackets around the li element.

Paddy.

You are welcome.

I am marking this issue as fixed.

Paddy.