I was able to fix it a little by adding "padding-bottom:5px;" in CSS and it looks better in IE but it still doesn't look right and in Firefox, my changes in CSS didn't make any difference. Please take a look at the attached images. Thanks.

#tabs-wrapper ul.tabs {
  width:99%;
  height:35px;
  overflow:auto;
}

ul.primary {
  border-bottom:1px solid #cccccc;
  border-top:1px solid #cccccc;
  border-collapse:collapse;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:5px 0px;
  padding:4px 0px;
  white-space:nowrap;
  font-size:0.9em;
}

#tabs-wrapper ul.primary li {
  margin-right:2px;
  background-color:transparent;
  background-image:url(img/edit-tab-left-grey.png);
  background-repeat:no-repeat;
  background-position:left;
  padding:2px 0px;
}

#tabs-wrapper ul.primary li.active {
  background-color:transparent;
  background-image:url(img/edit-tab-left-black.png);
  background-repeat:no-repeat;
  background-position:left;
}

#tabs-wrapper ul.primary li a {
  margin:0;
  color:#333333;
  background-color:transparent;
  border:none;
  background-image:url(img/edit-tab-right-grey.png);
  background-repeat:no-repeat;
  background-position:right;
  padding:2px 10px;
  padding-bottom:5px;
}

#tabs-wrapper ul.primary li a:hover {
  margin:0;
  color:#333333;
  background-color:transparent;
  border:none;
  background-image:url(img/edit-tab-right-grey.png);
  background-repeat:no-repeat;
  background-position:right;
  padding-bottom:5px;
}

#tabs-wrapper ul.primary li.active a {
  background-color:transparent;
  color:#ffffff;
  border:none;
  background-image:url(img/edit-tab-right-black.png);
  background-repeat:no-repeat;
  background-position:right;
  padding-bottom:5px;
}
CommentFileSizeAuthor
tabs_IE.jpg1.73 KBfehin
tabs_firefox.jpg1.8 KBfehin
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

derjochenmeyer’s picture

Status: Active » Closed (won't fix)
plan9’s picture

@fehin:

Did you ever find a solution to this? I have the same issue.