Tabs are showing full-width in IE6 so the tabs appear stacked vertically instead of side-by-side.

This is IE6 only and does not impact IE7 or other browsers.

Original code from tabs.css:

ul.primary li a {
  display: block;
  height: 24px;
  margin: 0;
  padding: 0 0 0 5px; /* width of tab-left.png */
  border-width: 0;
  font-weight: bold;
  text-decoration: none;
  color: #777;
  background-color: transparent;
  background: url(../images/tab-left.png) no-repeat left -38px;
}

ul.primary li a .tab {
  display: block;
  height: 20px; /* 24px (parent) - 4px (padding) */
  margin: 0;
  padding: 4px 13px 0 6px;
  border-width: 0;
  line-height: 20px;
  background: url(../images/tab-right.png) no-repeat right -38px;
}

Replace the 2 references to display: block; to display: inline-block;

I have checked this on IE6/7/8, FF, Chrome, Opera & Safari and it seems ok.

CommentFileSizeAuthor
#3 zen-910902-03.patch535 bytesmike stewart

Comments

SweeneyTodd’s picture

SweeneyTodd commented

Ooops,

That should read:

Replace the 2 references from display: block; to display: inline-block;

KennyVanLent’s picture

KennyVanLent commented

Excuse me (Wish I could delete this post)
I didn't read good enough to see...

mike stewart’s picture

mike stewart commented
StatusFileSize
new zen-910902-03.patch535 bytes

here's a patch from orig post. thought it might help community to review.

barraponto’s picture

barraponto
he / him
commented
Version: 6.x-2.0 » 6.x-2.x-dev
Issue tags: +needs review on Windows, +ie6, +Internet Explorer 6

tagging, upping to dev version

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Component: IE Problems » layout.css
Category: bug » support
Status: Needs review » Postponed (maintainer needs more info)

I can't reproduce. Tabs look fine when I look at it in IE6.

And this code is already in the ie6.css file:

ul.primary li a,
ul.primary li a .tab,
ul.secondary li a,
ul.secondary li a .tab {
  display: inline-block; /* Otherwise the blocks mistakenly get 100% width in IE6 */
}

Are you experiencing the 31 stylesheet limit in IE? Turn on CSS aggregation and see if the problem persists.

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Status: Postponed (maintainer needs more info) » Closed (cannot reproduce)