Hi,

Below is an HTML file that shows a simple little popup menu (with the
popups visible.) In Safari 1.3.2 they look the same but in FIrefox
1.5.0.1 the red box for "beta" is only as wide as the word beta. I
think it should extend to the right across all the orange.

The second version of the menu is the same but some JavaScript
"repairs" the problem.

Am I making a CSS mistake or is it Firefox?

Thanks,
Peter



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <title>Bug?</title>
               <style type="text/css">
                       .JMenuItem {background: red;}
                       .JMenu {background: blue;}
                       .JPopupMenu {background: orange;}
                       .JMenuBar {background: lightgreen;}

                       .JMenuBar > .JMenu {display: inline;}
                       .JMenuItem {position: relative;}
                       .JPopupMenu {position: absolute;}
                       .JPopupMenu {top: 100%; left:0;}
               </style>
</head>

<body>
       <ul class="JMenuBar">
               <li class="JMenu JMenuItem">
                       firstItemFirstItemFirstItemFirstItemFirstItem
                       <ul class="JPopupMenu">
                               <li class="JMenuItem">alphaalphaalpha</li>
                               <li class="JMenuItem">beta</li>
                       </ul>
   </li>
               <li class="JMenu JMenuItem">
                       nextItem
                       <ul class="JPopupMenu">
                               <li class="JMenuItem">alphaalphaalpha</li>
                               <li class="JMenuItem">beta</li>
                       </ul>
               </li>
       </ul>

       <div style="height: 50px;"></div>

       <ul class="JMenuBar">
               <li class="JMenu JMenuItem">
                       firstItemFirstItemFirstItemFirstItemFirstItem
                       <ul class="JPopupMenu" id="id1">
                               <li class="JMenuItem">alphaalphaalpha</li>
                               <li class="JMenuItem">beta</li>
                       </ul>
   </li>
               <li class="JMenu JMenuItem">
                       nextItem
                       <ul class="JPopupMenu">
                               <li class="JMenuItem">alphaalphaalpha</li>
                               <li class="JMenuItem">beta</li>
                       </ul>
               </li>
       </ul>

</body>
</html>

<script>
document.getElementById('id1').style.width =

window.getComputedStyle(document.getElementById('id1'),null).width;
</script>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to