Bug: Edit Attach and Printable links crowd TWiki pages.

On pages using the PatternSkin, the twikiToolBar (Edit, Attach, and Printable at the top-left of all pages) is displayed inline on IE, and Netscape (Mozilla, Firefox), but in Opera they are displayed as blocks. Anything that would otherwise be on the top left of the TWiki page gets pushed slightly over to the right.

Also when viewing old revisions there is no line through on edit and attach.

Test case

Using Opera,

• Navigate to WelcomeGuest or any page where PatternSkin is in use.
• View older versions of a page where PatternSkin is in use.

Environment

-- DavidMonaghan - 12 Sep 2004

Follow up

I was able to counter this error by editing the CSS page /twiki/pub/TWiki/PatternSkin/style.css and changing this;

.twikiToolBar ul li s,
.twikiToolBar ul li strike {
   padding:0 0.55em;
   float:left;
}
.twikiToolBar ul li a:link,
.twikiToolBar ul li a:visited {
   padding:0 0.55em;
   float:left;
   text-decoration:none;
   color:#8490A1; /* .twikiGrayText value */
   font-weight:bold;
}

.twikiToolBar ul li s,
.twikiToolBar ul li strike {
   padding:0 0.55em;
   /*float:left;*/
}
.twikiToolBar ul li a:link,
.twikiToolBar ul li a:visited {
   padding:0 0.55em;
   /*float:left;*/
   text-decoration:none;
   color:#8490A1; /* .twikiGrayText value */
   font-weight:bold;
}

I have the most recent stable versions of Opera, Firefox, and Internet Explorer which I have used to make sure nothing else breaks, and so far I don't see a problem.

If anyone has older versions of any of these browsers, or has another browser which they could test this in I would appreciate it.

The CSS still validates without a problem at W3C.

-- DavidMonaghan - 12 Sep 2004

Checked with Mozilla 1.5, works fine.
I removed only the float directive from the .twikiToolBar ul {} block, left both of your blocks unchanged.
Filed opera's behavior as quirk/bug at opera.com.

To get edit and attach visibly disabled (as in the other browsers) add that decoration to the strike block:

  .twikiToolBar ul li strike {
          padding:0 0.55em;
          float:left;
+         text-decoration:line-through;
  }       

-- UlfJastrow - 14 Sep 2004

Thats strange, where is the text-decoration:line-through property that make Netscape and IE display the line through the text?

By the way, when I took out those two properties I described above the line-through worked fine in Opera, go figure.

Thanks for the feedback, I'm going to dig into this a bit more to find out why there is no line-through in the CSS yet I see lines. If anyone wants to save me the trouble, please do!

-- DavidMonaghan - 15 Sep 2004

I'm using opera 7.54 on windows xp. On the 01sep04 release of twiki. I've got a file with just these two settings in it, and I've saved it as my personal style.css, but it doesn't work. I've got this one line on my user page.

   * Set USERSTYLEURL = http://10.10.10.10/pub/Twiki/FrancisLiu/style.css

-- FrancisLiu - 07 Oct 2004

Looks like a simple typo in TWiki. Should be:

   * Set USERSTYLEURL = http://10.10.10.10/pub/TWiki/FrancisLiu/style.css

However I haven't heard of USERSTYLEURL, I thought you had to set SKIN but I will check to see if both are acceptable. Otherwise if the typo exists only in your example it is possible that you are not being authenticated while viewing a topic. I had this problem and resolved it by installing the SessionPlugin. Let me know what happens in any case.

You can see if you are being authenticated while viewing pages by viewing any page which contains the WIKIUSERNAME variable, for example WelcomeGuest.

-- DavidMonaghan - 08 Oct 2004

I am authenticated. It's just a typo in the example. Hmm, I'm not the WikiAdmin, so installing SessionPlugin isn't good for me.

Is the fix applied to twiki.org? Because it's still broken there for me. Do you know a site where it is set correctly so I can see if perhaps it's an interaction with my personal style sheet (set in Tools->Preferences->Page Style->My style sheet - I can send you this if you're interested), or if it really is SKIN that I should be setting. Hmm, if I set SKIN, then do I need the whole style.css file? or can I just have the changed settings that I want and it will inherit the rest?

-- FrancisLiu - 11 Oct 2004

No the fix has not been applied to TWiki.org yet. Take a look at http://www.johnsonpigs.com/twiki for a test of a working environment.

Your personal style sheet in Opera shouldn't affect the appearance of the site unless you are in user mode.

Check to see if you can edit the PatternSkin topic on your site. In theory you can download the style.css page, make the changes and upload the new file and poof! You should ask permission to do this but that is up to you.

In order to use Set SKIN you would need a separate skin installed with the correct CSS style.css. I think the only way to get it to work in your scenario is either to have the administrator update the CSS code or again if possible you could upload a correct version.

Hope that helps, let me know.

By the way I added an attachment of my style.css on my personal page.

-- DavidMonaghan - 11 Oct 2004

When I look at http://twiki.org/cgi-bin/view/Main/DavidMonaghan, the edit-attach-printable display is fine, but on other twiki pages it is broken. It's not what I expect to see. How come your page has its own overrides for the style? Is it because there is a style.css attached?

-- FrancisLiu - 18 Oct 2004

I put this on my personal page, after uploading the new CSS file that is.

   *  Set TWIKISTYLEURL = http://twiki.org/p/pub/Main/DavidMonaghan/style.css

Did you find out if you can upload new versions of the style.css file?

-- DavidMonaghan - 20 Oct 2004

The aforementioned fix, removing the float:left from the .twikiToolBar, absolutely does work, and may very well be the ideal fix. However, I (a complete css novice -- please take into consideration) was playing around with the HTML itself, and noticed something: if you wrap the list elements ( Edit, Attach, Printable ...) themselves in twikiToolbarElem tags, this also solves the problem (with no impact in FireFox). For example,

• <li><span class="twikiToolbarElem"><a href="http://...">Edit</a></span></li>

I'm not sure why this works: twikiToolbarElem merely sets the margin-left (perhaps this in itself gets rid of the float:left by overriding it). I only mention this, since (1) perhaps this isn't an Opera CSS bug after all (for a change); and (2) i've seen this css behaviour popping up in other sites, which seem to be "borrowing" this "pattern".... -- MichaelNielsen - 15 Feb 2005

Fix record

All Opera related problems seem to be fixed now, although nobody said as much anywhere (that I know of). I just (re)installed the actual https://www.twiki.org/p/pub/Plugins/PatternSkin/PatternSkin.zip (v.1.0.10). Now I got the most recent https://www.twiki.org/p/pub/TWiki/PatternSkin/style.css and https://www.twiki.org/p/pub/TWiki/PatternSkin/layout.css. Still problems. But after getting https://www.twiki.org/p/pub/TWiki/PatternSkin/empty.css and setting USERLAYOUTURL and USERSTYLEURL in TWikiPreferences as done here all problems vanished (except the missing strikeout, see above).

Used Opera 8.01

-- UlfJastrow - 28 Jun 2005