Jquery Mobile CSS Android Styling Boarders Not Showing On Button


Tags: jquery,css,jquery-ui,button

Problem :

Hopefully this will be an easy one. Using the following styling to generate a Android Menu Style button ( ie with a thicker coloured bar on the botton when active or highlighted. )

How ever none of the CSS styling seems to make a change to it. I have the right class assigned to the button. Is the boarder example I am using below supported and if so is my syntax right ? If so any thoughts on potential issues ?

I am currently on the latest release of Jquery Mobile.

Thanks Terran

.ui-btn-active-androidmenu {
    border: 1px 1px 5px 1px solid #155678 /*{global-active-border}*/;
    z-index: 6;
    background: #387bbe /*{global-active-background-color}*/;
    font-weight: bold;
    color: transparent /*{global-active-color}*/;
    cursor: pointer;
    text-shadow: 0 /*{global-active-shadow-x}*/ -1px /*{global-active-shadow-y}*/ 1px /*{global-active-shadow-radius}*/ #145072 /*{global-active-shadow-color}*/;
    text-decoration: none;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #85bae4 /*{global-active-background-start}*/), to( #5393c5 /*{global-active-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient( #85bae4 /*{global-active-background-start}*/, #5393c5 /*{global-active-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient( #85bae4 /*{global-active-background-start}*/, #5393c5 /*{global-active-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient( #85bae4 /*{global-active-background-start}*/, #5393c5 /*{global-active-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient( #85bae4 /*{global-active-background-start}*/, #5393c5 /*{global-active-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient( #85bae4 /*{global-active-background-start}*/, #5393c5 /*{global-active-background-end}*/);
     font-family:"RobotoRegular";
}


Solution :

Syntax Error on border:

The border won't take individual width. Please declare this way:

border: 1px solid #155678;
border-width: 1px 1px 5px 1px;

    CSS Howto..

    CSS: How do I 'raise' the last photo in this page?

    How to php echo content into
    classes dynamicaly [closed]

    Want to override Bootstrap, but how to avoid the use of !important?

    CSS - How to remove unwanted margin between elements?

    How to show/hide hidden HTML table rows using JavaScript (no jQuery)

    How to scale div using css animation in javascript

    On Edge Browser, how to change input placeholder text color using CSS?

    How does one style element within a label say?

    How to specify correct output folder for CSS using SASS & LiveReload?

    How to adjust height based on content css

    How to preform whitelist-based CSS filtering in PHP

    how to align div's horizontally in CSS

    How to get a list of css attributes of an element with jquery

    How to keep a floating div centered on window resize (jQuery/CSS)

    How to apply a CSS class to another element when an object is hovered?

    How to remove and override CSS attribute from parent class?

    how to add several td and tr in css

    how to remove the css given and get only the data from database using php

    How to continue CSS list on new page?

    What is the correct css for the list of results to show correctly in this situation? [closed]

    how can tell element to get specified styles?

    CSS: How to make background color around text not flush to the text?

    How to change ol bullets for clickable images

    background image shows up on right-click show image, but not on webpage

    How to organize user's shares to easily add comments to that particular post?

    How come the exact same version of Google Chrome shows different layout?

    How to embed css to HTML in laravel?

    How do I get the element after my horizontal css navigation bar to appear below it?

    How to implement this menu using css pseudo-class selector?

    How to center nav using CSS/HTML? [closed]