how to put jquery ui menubar items to single row

Question

jquery ui menubar is added to application. Every menu item starts at next row and bullet in IE9 appears in first column:

enter image description here

In firefox bullet appears before every menu item.

How to force all menubar items in same row ?

Page source is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> 
 <link href="../../Content/Css/Site.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="/Scripts/jquery/jquery-1.8.3.js"></script>
<script src="/Scripts/jquery-ui-1.9.2.custom.js" type="text/javascript"></script>
<script type="text/javascript" src="/Scripts/menubar.js"></script>
<script type="text/javascript">
$(function () {
            $("#bar1").menubar({
            autoExpand: true,
                select: function (event, ui) {
                    if (ui.item.context.href == null) {
                        // Enter is pressed
                        location.href = ui.item[0].firstChild.href;
                        return;
                    }
                    location.href = ui.item.context.href;
                }
            });
            $('#bar1').css('display', 'block');
        });
    </script>
</head>
<body>
    <div id="container">
    <ul id="bar1">
    <li><a href="#About">About</a></li>
    <li>
        <a href="#File">File</a>
        <ul>
            <li><a href="#Open...">Open...</a></li>
            <li class="ui-state-disabled"><a href="#">Open recent...</a></li>
            <li><a href="#Save">Save</a></li>
            <li><a href="#Save%20as...">Save as...</a></li>
            <li><a href="#Close">Close</a></li>
            <li><a href="#Quit">Quit</a></li>
        </ul>
    </li>
    <li>
        <a href="#Edit">Edit</a>
        <ul>
            <li><a href="#Copy">Copy</a></li>
            <li><a href="#Cut">Cut</a></li>
            <li class="ui-state-disabled"><a href="#">Paste</a></li>
        </ul>
    </li>
    <li>
        <a href="#View">View</a>
        <ul>
            <li><a href="#Fullscreen">Fullscreen</a></li>
            <li><a href="#Fit%20into%20view">Fit into view</a></li>
            <li>
                <a href="#Encoding">Encoding</a>
                <ul>
                    <li><a href="#Auto-detect">Auto-detect</a></li>
                    <li><a href="#UTF-8">UTF-8</a></li>
                    <li>
                      <a href="#UTF-16">UTF-16</a>
                      <ul>
                         <li><a href="#Option%201">Option 1</a></li>
                         <li><a href="#Option%202">Option 2</a></li>
                         <li><a href="#Option%203">Option 3</a></li>
                         <li><a href="#Option%204">Option 4</a></li>
                      </ul>
                   </li>
                </ul>
            </li>
            <li><a href="#Customize...">Customize...</a></li>
        </ul>
    </li>
        </ul>

maciej-ka · Accepted Answer · 2012-12-10 00:22:58Z

3

Your page is not linked with menubar CSS. You can get it here: http://view.jqueryui.com/menubar/themes/base/jquery.ui.menubar.css

answered Dec 10, 2012 at 0:22

maciej-ka

5753 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vorillaz · Accepted Answer · 2012-12-09 22:52:48Z

0

ul#bar1
{
list-style: none;
padding: 0;
margin: 0;
}

ul#bar1 li
{
float: left;
margin: 0 0.15em;
}

ul#bar1 li a
{
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
text-decoration: none;
text-align: center;
}

answered Dec 9, 2012 at 22:52

vorillaz

6,3062 gold badges32 silver badges46 bronze badges

Collectives™ on Stack Overflow

how to put jquery ui menubar items to single row

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related