Question

I am trying to use datetimepicker from: http://trentrichardson.com/

functionality is working it seems, but it looks awful – see the pic. can anyone help me find out why it is so?

browser is firefox.

header has…

<link rel="stylesheet" type="text/css" href="/css/mainmenu.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/smoothness/jquery-ui-1.8.21.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="/css/dttimepicker.css" />

    <script src="/jscript/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="/jscript/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
    <script src="/jscript/jquery-ui-timepicker-addon.js" type="text/javascript"></script>

and it looks like this:

and in noticed, when i remove the CSS of my mainmenu it displays properly!!! here is my mainmenu css file:

<div class="bvmainmenu">
    <ul>
        <li><a href="/" id="Home">Home</a></li>
        <li><a id="Reports">Reports</a>
            <ul>
                <li><a href="...">....</a></li>
                <li><a href="...">....</a></li>
                <li><a href="...">....</a></li>
            </ul>
        </li>
        <li><a id="Managment">Managment</a>
            <ul>
                <li><a href=".....">.....</a></li>
                <li><a>....</a></li>
            </ul>
        </li>
        <li><a id="Admin">Admin</a>
            <ul>
                <li><a href="...">....</a></li>
                <li><a href="....">....</a></li>
                <li><a href="...">...</a></li>
                <li><a href="...">...</a></li>
                <li><a href="...">...</a></li>
                <li><a href="/">item3</a></li>
            </ul>
        </li>
    </ul>
</div>

menu has its own class and here is its css:

.bvmainmenu{                                            /*main bvmainmenu properties*/
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font-family:verdana,geneva,arial,helvetica,sans-serif;
    font-size:14px;
    font-weight:bold;
    color:8e8e8e;
    }
.bvmainmenu ul{                                     /*main bvmainmenu items bar*/
    background:url(/images/bvmainmenu-bg.gif) top left repeat-x;
    height:43px;
    list-style:none;
    margin:0;
    padding:0;
    }
    .bvmainmenu li{
        float:left;                             /*main bvmainmenu item positioning*/
        padding:0px 8px 0px 8px;
        }
    .bvmainmenu li a,span{                                  /*main bvmainmenu items text properties etc*/
        color:#666666;
        display:block;
        font-weight:bold;
        line-height:43px;
        padding:0px 25px;
        text-align:center;
        text-decoration:none;
        }
        .bvmainmenu li a:hover{
            color:#000000;
            text-decoration:none;
        }
    .bvmainmenu li ul{
        background:#e0e0e0;
        border-left:2px solid #000000;
        border-right:2px solid #000000;
        border-bottom:2px solid #000000;
        display:none;
        height:auto;
        filter:alpha(opacity=95);
        opacity:0.95;
        position:absolute;
        width:auto;                             /*225px;  this will make all drop downs of same width*/
        z-index:200;
        }
    .bvmainmenu li:hover ul{                        /*shows drop down bvmainmenu box on hover*/
        display:block;
        }
    .bvmainmenu li ul li {                              /*drop down bvmainmenu box*/
        display:block;
        float:none;
        padding:0px;
        width:auto;                             /*225px;  this will make all drop downs of same width*/
        }
    .bvmainmenu li ul li a{
        display:block;
        font-size:12px;
        font-style:normal;
        padding:0px 5px 0px 5px;            /*top rt bt lf   def:0,10,0,15*/
        text-align:left;
        line-height:1.5;                        /*added for visual effect, you can use value normal*/
        }
        .bvmainmenu li ul li a:hover{                   /*drop down bvmainmenu items*/
            background:#949494;
            color:#000000;
            opacity:1.0;
            filter:alpha(opacity=100);
            }
    .bvmainmenu p{
        clear:left;
        }

can anyone tell what is messed up here? why is this widget looking so funny? Also font is too big! in the showroom (UI website) it looks so shiny!!

thx.
Rajeev

Answer 1

.bvmainmenu li a,span

that span is not encapsulated ion the menu class

(revision)

if you want to encapsulate the span it cam be either:

.bvmainmenu li a,.bvmainmenu span

or

.bvmainmenu li a span

depending of what you want to achieve, the last will match only all span’s that are inside .bvmainmenu li a, without affecting “a”, the previous wil affect anchors (li a) as well as all spans that are inside .bvmainmenu