[prev in list] [next in list] [prev in thread] [next in thread] 

List:       konq-bugs
Subject:    [Bug 146165] New: Konqueror not applying CSS to MENU elements
From:       Ambrose Li <ambrose.li () gmail ! com>
Date:       2007-05-30 16:21:11
Message-ID: 20070530182109.146165.ambrose.li () gmail ! com
[Download RAW message or body]

------- You are receiving this mail because: -------
You are the assignee for the bug, or are watching the assignee.
         
http://bugs.kde.org/show_bug.cgi?id=146165         
           Summary: Konqueror not applying CSS to MENU elements correctly
           Product: konqueror
           Version: unspecified
          Platform: Debian testing
        OS/Version: Linux
            Status: UNCONFIRMED
          Severity: normal
          Priority: NOR
         Component: general
        AssignedTo: konq-bugs kde org
        ReportedBy: ambrose.li gmail com


Version:           3.5.3 (using KDE KDE 3.5.5)
Installed from:    Debian testing/unstable Packages
OS:                Linux

Given identical HTML and identical CSS, except for the difference that one uses the \
MENU tag and the other uses the UL tag, Konqueror will render the one that uses MENU \
in a very inconsistent way.                                                           \
                
                                                                                      \
 The following HTML snippet illustrates the problem:                                  \
                
                                                                                      \
                
----------- cut here -------------- 8< -----------------------------                  \
 <style type="text/css">                                                              \
                
                                                                                      \
 html, body {                                                                         \
  color: black;                                                                       \
  background-color: white;                                                            \
 }                                                                                    \
                
                                                                                      \
 /* All links */                                                                      \
 #topnav a {                                                                          \
  text-decoration: none;                                                              \
  color: inherit;                                                                     \
  padding-left: 0.5em;                                                                \
  padding-right: 0.5em;
}                                                                                     \
 #topnav a:hover {                                                                    \
  color: white;                                                                       \
  background-color: black;                                                            \
 }                                                                                    \
 #topnav ul {                                                                         \
  list-style: none;                                                                   \
 }                                                                                    \
                
                                                                                      \
 /* Main horizontal menu */                                                           \
 #topnav ul li {                                                                      \
  float: left;                                                                        \
 }                                                                                    \
                
                                                                                      \
 /* Submenus */                                                                       \
 #topnav li > ul {                                                                    \
  display: none;                                                                      \
 }                                                                                    \
 #topnav li:hover > ul {                                                              \
  display: block;                                                                     \
 }                                                                                    \
 #topnav li ul {                                                                      \
  position: absolute;                                                                 \
  float: none;                                                                        \
  padding-left: 0;
   border: 2px solid black;                                                           \
 }                                                                                    \
 #topnav li ul li {                                                                   \
  display: block;                                                                     \
  position: relative;                                                                 \
  float: none;                                                                        \
 }                                                                                    \
 #topnav li ul li a {                                                                 \
  display: block;                                                                     \
 }                                                                                    \
                
                                                                                      \
 </style>                                                                             \
                
                                                                                      \
 <div id=topnav>                                                                      \
 <ul>                                                                                 \
 <li><a href="#">File</a>                                                             \
  <ul>                                                                                \
  <li><a href="#">New</a>                                                             \
  <li><a href="#">Open</a>                                                            \
  <li><a href="#">Close</a>                                                           \
  <li><a href="#">Save</a>                                                            \
  <li><a href="#">Quit</a>                                                            \
  </ul>                                                                               \
 <li><a href="#">Edit</a>                                                             \
  <ul>
    <li><a href="#">Undo</a>                                                          \
  <li><a href="#">Cut</a>                                                             \
  <li><a href="#">Copy</a>                                                            \
  <li><a href="#">Paste</a>                                                           \
  </ul>                                                                               \
 <li><a href="#">View</a>                                                             \
 <li><a href="#">Help</a>                                                             \
 </ul>                                                                                \
 </div>                                                                               \
                
----------- cut here -------------- 8< -----------------------------                  \
                
                                                                                      \
 This will generate a screen that looks like a normal GUI with File,                  \
 Edit, View and Help menus. If the user hovers the cursor over File                   \
 or Edit, a submenu is displayed; i.e., the screen looks like this:                   \
                
                                                                                      \
                
      File Edit View Help                                                             \
                
                                                                                      \
 and, when hovered over File,                                                         \
                
                                                                                      \
                
      File Edit View Help                                                             \
                
      New                                                                             \
                
      Open                                                                            \
                
      Close                                                                           \
                
      Save                                                                            \
  Quit
                                                                                      \
 and, when hovered over Edit,                                                         \
                
                                                                                      \
                
      File Edit View Help                                                             \
                
           Undo                                                                       \
                
           Cut                                                                        \
                
           Copy                                                                       \
                
           Paste                                                                      \
                
                                                                                      \
 This is also the way Mozilla displays the HTML.                                      \
                
                                                                                      \
 If the "ul" tags are replaced with "menu" tags, the screen will                      \
 look completely garbled like this:                                                   \
                
                                                                                      \
                
      File New Open Close Save Quit * Edit                                            \
                
   * View                                                                             \
                
   * Help                                                                             \
                
                                                                                      \
 The visible differences between this and how Konqueror renders the                   \
 "ul" version are:                                                                    \
                
                                                                                      \
                
- The first submenu are interspersed between File and Edit                            \
                
                                                                                      \
                
- Unexpected bullets and alignment for the last 3 items                               \


The inconsistencies seem to be caused by Konqueror being confused                     \
 by nested MENU elements, as can be seen from the following symptoms:                 \
                
                                                                                      \
                
- The text contained inside the LI elements inside the nested MENU                    \
  are displayed as if they were part of the outermost MENU                            \
                
                                                                                      \
                
- The close tag of the nested MENU caused Konqueror to think that                     \
  the outermost MENU has closed                                                       \
                
                                                                                      \
                
- Subsequent LI elements seem to have caused Konqueror to insert                      \
  an implicit UL, thus causing the styling for MENU (specifically                     \
  the list-style and float properties) to be not applied                              \
                
                                                                                      \
                
- The Edit MENU is nested within the implicit UL (if UL is indeed                     \
  the implicitly-inserted tag), and Konqueror is thus not confused                    \
  by the nesting, and displays the submenu as expected                                \
                
                                                                                      \
 The behaviour of MENU should be identical to UL. So nested MENU's                    \
 are definitely allowed.

---
Note for Debian people: MENU is a valid element in 4.01, and the test case is \
rendered correctly by both Firefox and Safari. \
_______________________________________________ Konq-bugs mailing list
Konq-bugs@mail.kde.org
https://mail.kde.org/mailman/listinfo/konq-bugs


[prev in list] [next in list] [prev in thread] [next in thread] 

Configure | About | News | Add a list | Sponsored by KoreLogic