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..

    How to detect IE8 separate from newer versions when IE8 compatibility set

    How to see the source code of a particular html tag by onClick() javascript without showing its css?

    How to revert back to a value in css [closed]

    CSS show horizontal scroll bars?

    how to remove content border in Modal Window

    How to write regex to extract specific key format and value from CSS file?

    How to remove spacing around in CSS? [duplicate]

    How do I display menu items in front of images?

    how to add class with animation?

    CSS Animation: how to trigger the reverse animation?

    How to concatenate icons into a single image with ImageMagick?

    how to highlight currently opened page link in css

    How to reorder controls of WYSIWYG editor

    How to create multi-column data entry form using CSS in Asp.Net?

    HTML element positioning - How do I have an element always stay in the visible area without javascript

    Having Two HTML issues with PHP DOM: 1.) DOMDocument::createEntityReference $name values and 2.) how to add multiple CSS classes an element?

    hide form with css3 and show default div.

    How to make marquee when hover in - text scroll and infinite loop, out - back to start position?

    How to convert this CSS animation to use GPU level, instead of updating layer tree

    Can't show updated image

    How to move this structure to the right without using float?

    How do I make my background-color fill entire width of div when applied to a `ul li`?

    How to animate 2 parallel lines in order to form an X on click using CSS and JQuery

    Limit number of lines shown in a textbox, but not limiting the user to write

    How do i make liteAccordion (horizontal accordion plugin for jQuery) work in IE6

    How can I remove borders around images on Blogger? [closed]

    Flex - understanding how to properly reference an image in a library project css file

    How to prevent css loaded with query being applied to whole page?

    How do stop elements from changing (properties) during javascript events?

    CSS: How to position divs 2 by 2