Moved wiki talk: Layout of Special Pages

[imslp]

This discussion was moved from my talk page (http://imslp.org/index.php?title=User_talk:Feldmahler).

Last post by Leonard:

Why did I expect that to happen (MSIE I mean, though good old Konqueror is also rather quirky sometimes - but I can't really blame it in this case, because I believe that this particular issue is not clearly defined by the standards). I just checked in Windows (insomnia has its good sides) and I confirm. For MSIE, you could solve by replacing "width" with "max-width" - stupid MSIE doesn't know what that is, so it ignores it. The Konqueror problem remains. Maybe we should rethink the interface design. I still believe that having the instructions on the same page with the form is a good thing (I love SUSE's YaST for that), but I see that the current aproach is less than perfect. I'll sleep over it (or at least I'll try).

Actually... I removed the change I made to the form, which is why I asked you to try it with a static HTML page... maybe I wasn't clear enough

Anyway, they actually work to an extent; the toolbar *is* shortened to the length specified, but the dropdown box doesn't expand in width, which means that a significant portion of the longer lines are just cut off, with no way to recover that portion (no horizontal scrollbars or anything)...

Alternative ways I can think of are:

1. Just put the stuff at the top of the form, taking 100% width
2. Make it so that the descriptions will show when the mouse passes over the field in question

[Leonard Vertighel]

You were perfectly clear, if anything I was not clear about the fact that I checked with a local copy of that page

Alternative 1 is not so good from a usability point of view (advanced users will have to scroll past all that stuff each time).

Alternative 2 would be nice, but is not so easy from a technical point of view. To do it well, it requires JavaScript (plus a fallback solution for the case that JS is disabled). You could do it in pure CSS, but - surprise, surprise! - a well-known self-proclaimed web browser won't play along because it thinks that the :hover pseudo-class is for anchor elements only (which is nonsense). You could also use tooltips, that is: the "title" attribute which renders as a tooltip in most browsers, but apart from the fact that this is semantically questionable, you also have no control over formatting/layout.

If we have any JS gurus here, please raise your hand now

Alternative 3 could be to just move that long genre select box to the left, i.e. put it in a new table row with colspan="2" attribute for the cell. Not brilliant as far as aesthetics is concerned, but it should have no negative impact on usability. If you change the "align" attribute to "right" for that one cell, the position of the box won't look totally random either (Now one could think of making the select box skip to the left only for narrow windows, but that would require extensive changes to the code, and it may not be easy to make it work in all the things that are allowed to bear the designation "browser" these days.)

[imslp]

Alternative 3 sounds good Tell me exactly how to implement it (i.e. diff-like) and I'll do it.

[Leonard Vertighel]

Code: Select all

***
  <td align="right">Genre</td>
! <td align="left">
  <select name="awGenre">
---
  <td align="right">Genre</td>
! <td>&nbsp;</td></tr><tr><td colspan="2" align="right">
  <select name="awGenre">

[imslp]

Done