[Rainbowportal-devel] [RBJIRA] Closed: (RBP-509) rc4: zen menus misaligned on Opera 7

[<ji...@ra...>]

Message:

   The following issue has been closed.

   Resolver: Jeremy Esland
       Date: mar, 18 gen 2005 6:23 PM

I've been investigating this Opera problem. It seems that this is one of those "spec interpretation" issues rather than a "bug" per se, i.e. Opera would claim this behaviour as correct interpretation of the standard. Certainly, though, Opera's behaviour here differs from all the others. It can be fixed by "simply" assigning a finite width to the <li> elements: but, of course, in this case we don't want a fixed width. There is a further subtlety: if you place padding on the LEFT side of the <li> element, Opera still wraps the LAST element in the list onto the next line. Place the padding on the RIGHT of the element and it behaves itself. It seems that you just can't win sometimes ;-)
 
I disagree with reversing the order of the list as a solution: one of Zen's main aims is to output semantically correct markup. Reversing the list would mean that a screen-reader, for example, would "see" the menu in reverse order. It may seem pedantic, but I am determined to keep Zen semantically correct. A further reason to keep the order correct is that this problem is only relevant if you happen to want to style the list IN THIS WAY (using opposing left/right floats). If you float the menu to the left of the header area (i.e. your floats are left/left, not opposing), then it works fine. Furthermore, I have another Zen design on the drawing board which places the HeaderMenu in the top of the right column as a bulletted list - and I certainly don't want the list reversed for that!
 
So I'm going to leave this "bug" for the moment. If you really want Opera compatibility and you encounter this problem with YOUR design, then your only option is to fix the width of the HeaderMenu list elements. 
 
For the record, here's how to set the first few rules of HeaderMenu.css to be Opera-friendly:
 
.headermenu {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size:0.8em;
    white-space:nowrap; /* stops Opera wrapping the text */
}
.headermenu ul {
    float:right;
    list-style:none;
    padding:0px;
    margin:0px;
    line-height:2;
}
.headermenu li {
    float:left;
    padding:0px 0.3em 0px 0em; /* padding on right, not left */
    margin:0px;
    width:100px; /* fixing the width makes Opera behave */
    text-align:center;
}
 
I have a modification (that I'll be putting into the CVS at the earliest opportunity) which wraps the whole page in a <div> element with class set to the browser type. Then it would be a simple matter to limit the "fixed width" behaviour to Opera only:
 
.headermenu {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size:0.8em;
    white-space:nowrap; /* stops Opera wrapping the text */
}
.headermenu ul {
    float:right;
    list-style:none;
    padding:0px;
    margin:0px;
    line-height:2;
}
.headermenu li {
    float:left;
    padding:0px 0.3em 0px 0em; /* padding on right, not left */
    margin:0px;
    text-align:center;
}
div.Opera .headermenu li {
    width:100px; /* fixing the width makes Opera behave */
}


Jeremy (jes1111)

---------------------------------------------------------------------
View the issue:
  http://support.rainbowportal.net/jira/browse/RBP-509

Here is an overview of the issue:
---------------------------------------------------------------------
        Key: RBP-509
    Summary:  rc4: zen menus misaligned on Opera 7
       Type: Bug

     Status: Closed
   Priority: Minor
 Resolution: FIXED

    Project: Rainbow Portal
 Components: 
             Design
   Fix Fors:
             1.5

   Assignee: Jeremy Esland
   Reporter: Paul Shaffer

    Created: mar, 19 ott 2004 1:05 PM
    Updated: mar, 18 gen 2005 6:23 PM
Environment: w2k3, Opera 7.x

Description:
This bug report gives a possible fix for the layout zen-3col-hmenu and theme zen-starter, a layout that gives you a basic css+div look to the portal.

In Opera 7, the main nav menu is positioned vertically over on the left, totally wrong. To fix the rainbow.zen mainmenu in the theme "zen-starter" for Opera:

1. download Opera 7.54 or higher, earlier versions had css bugs affecting the
zen menus.

2. change mainmenu.css, remove the float: left for ".mainmenu ul"

/* all menu blocks */
.mainmenu ul{
float:left; /* remove or comment this line */
list-style:none;
line-height:2;
padding:0px;
margin:0px;
}

3. the headermenu requires another fix for Opera. Opera doesn't seem to be calculating the width of the container div correctly, so the menu buttons line up vertically if you use float:left. If you use float:right they line up horizontally but they are in reverse order. So I reversed the button order in zenheadermenu.cs: buttons.Reverse(). This fixes it for Opera, and it still seems to work ok in IE6 and Firefox.




---------------------------------------------------------------------
JIRA INFORMATION:
This message is automatically generated by JIRA.

If you think it was sent incorrectly contact one of the administrators:
   http://support.rainbowportal.net/jira/secure/Administrators.jspa

If you want more information on JIRA, or have a bug to report see:
   http://www.atlassian.com/software/jira