SID-01075: Cutoff buttons in header

Status:	Answered	TWiki version:	5.0.1	Perl version:	v5.8.2
Category:	CategoryRendering	Server OS:	AIX 5.3.0.0	Last update:	14 years ago

The Edit and Attach buttons in the top right corner of the header are cutoff. (See attached PDF.) This is on a brand new install. They still seem to work when clicked so this isn't high priority but, from point of trying to sell our users on TWiki, it looks a little unprofessional.

-- ChrisKrum - 2011-01-10

Discussion and Answer

Thanks for reporting. Oh, these browser differences. Especially IE needs constant attention and workaround solutions. Could you please file a bug report and state the IE version you use?

-- PeterThoeny - 2011-01-11

I'm using IE v8 but I don't think this is a browser issue since the buttons look fine when I log into TWiki.org. It appears, after looking at the page source for your site and mine, that my site is using a different icon for the edit button.

When I log into TWiki.org I get:

<img src='/p/pub/TWiki05x00/TWikiDocGraphics/uweb-o.gif' width='16' height='16' border='0' alt='' />

But on my site I get:

<img src='/twiki/pub/TWiki/TWikiDocGraphics/uweb-o14.gif' width='14' height='14' border='0' alt='' />

-- ChrisKrum - 2011-01-11

Do the buttons render properly on our bug database at TWikibug:WebHome ?

-- PeterThoeny - 2011-01-11

Yep. Those buttons look OK.

-- ChrisKrum - 2011-01-12

Then it must be something specific to your installation. Did you do any modifications on the TopMenuSkin templates or skin topics?

As you can see, on twiki.org's http://twiki.org/cgi-bin/view/TWiki05x00/TopMenuSkinTopBar?raw=on we have this HTML for the top action buttons:

<td width="165" valign="bottom"><div id="twTopBarButtons">
   * %TMPL:P{"activatable_edit_or_create"}%
   * %TMPL:P{"activatable_attach"}%
</div></td>

The style for "twTopBarButtons" is defined in twiki/templates/view.topmenu.tmpl:

#twTopBarButtons {
  width: 165px;
  height: 35px;
  background-color: transparent;
  background-image: url(%PUBURLPATH%/%SYSTEMWEB%/TopMenuSkin/action-button-area.gif);
  background-repeat: no-repeat;
}
#twTopBarButtons ul {
  padding: 0px;
  margin: 10px;
  list-style: none;
}
#twTopBarButtons ul li {
  margin: 11px 5px 0 6px;
  float: left;
  font: 15px Tahoma, Arial;
  width: 60px;
  height: 24px;
  text-align: center;
  white-space: nowrap;
  background-image: url(%PUBURLPATH%/%SYSTEMWEB%/TopMenuSkin/button-round-disabled.gif);
  color: #888888;
}
#twTopBarButtons ul li a
{
  display: block;
  margin: 0;
  width: 60px;
  height: 24px;
  text-decoration: none;
  background-image: url(%PUBURLPATH%/%SYSTEMWEB%/TopMenuSkin/button-round-normal.gif);
  color: #333333;
}
#twTopBarButtons ul li a:hover
{
  background-color: transparent;
  background-image: url(%PUBURLPATH%/%SYSTEMWEB%/TopMenuSkin/button-round-hover.gif);
}

All looks kosher to me.

-- PeterThoeny - 2011-01-12

I didn't change any of the twiki files at all. I compared my view.topmenu.tmpl to yours and those sections are the same. I found out that the icon is specified in viewtopicactionbuttons.tmpl so I changed it to the 16x16 version and the new size didn't change the button placement.

-- ChrisKrum - 2011-01-13

Did you install additional plugins? If so, disable them to see if they interfere.

-- PeterThoeny - 2011-01-14

Just to be sure, I created a brand new TWiki installation in an empty directory and the buttons are still cut off. Very strange.

-- ChrisKrum - 2011-01-14

OK. I finally got this one fixed. I don't know why my system is different but I had to change margin:11px 5px 0 6px; to margin: 0px 5px 0 6px; in the #twTopBarButtons ul li style above.

Thanks for the help.

-- ChrisKrum - 2011-01-20

Sorry for re-opening this. I have the same problem with 5.0.2 (backed off to a basic install), and it seems that IE8 (mine is actually running in IE7 compatibility mode, for some corporate reason) has an option called Compatibility View, and it is documented here:

http://support.microsoft.com/kb/956197

So, for some reason, when I look at the develop.twiki.org website, I have this extra option on the URL bar, which lets me switch between these two "views" (one broken, and one not). When I look at my own site, I don't have that option, probably because my cert is not trusted. Regardless, there's the problem, and it still exists.

Everything looks great in firefox, but I don't have much say in corporate policy.

-- AaronLWalker - 2011-05-31

I've fixed this by setting:

Header set X-UA-Compatible "IE=EmulateIE8"

in my apache config.

-- AaronLWalker - 2011-06-01

Some of the comments above seem to suggest this problem does not manifest on twiki.org - in fact, it does. It manifests for me on this very page, for instance, in Internet Explorer 7.

Chris Krum's margin fix will break the buttons on Firefox / Safari. AaronLWalker's apache config setting didn't work for me, but maybe I didn't do it right.

I've got a much cleaner solution - in the css in view.topmenu.tmpl for

#twTopBarButtons ul

change the margin (line 29) from:

margin: 10px;

to:

margin: 0 0 0 10px;

and all should be well.

-- BradleyMellen - 2011-06-15

Thank you Bradley for the proposed fix, looks good! Tracked in TWikibug:Item6751.

-- PeterThoeny - 2011-06-15

This is now fixed in SVN trunk and 5.0 branch, as well as uploaded to the twiki.org repository at TopMenuSkin.

-- PeterThoeny - 2011-06-15

If you answer a question - or someone answered one of your questions - please remember to edit the page and set the status to answered. The status selector is below the edit box.