Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Problems On Android Browser

Background color in list items

8:06 pm on Sep 26, 2012 (gmt 0)

New User

5+ Year Member

joined:Sept 26, 2012
posts: 1
votes: 0


I am having a terrible time getting the background color of an active list item link to show properly, when viewed from an Android device. The color of the list item should turn green and stretch 100% of the width, when a button is pressed.

It works fine on iOS, but when I view the site from my Android phone, the color will glitch and only show 40% on the right side UNLESS I press another menu item first, and then it works fine.

This is very bizarre and frustrating the heck out of me.

 <!--Start contentBlock-->
<div id="contentBlock">
<!--Start menuWrapper-->
<div id="menuWrapper">
<!--Start navMenu-->
<ul id="mainMenu">
<li id="topItem"><a id="roundedTopLink" href="introduction.php" target="_self">A Quick Introduction</a></li>
<li><a href="learn-more.php" target="_self">Learn More</a></li>
<li><a href="questions.php" target="_self">F.A.Q.</a></li>
<li><a href="benefits.php" target="_self">Benefits</a></li>
<li><a href="examples.php" target="_self">Examples</a></li>
<li><a href="pricing.php" target="_self">Pricing</a></li>
<li><a id="roundedBottomLink" href="contact.php" target="_self">Contact Me</a></li>
<!--End navMenu-->
<!--End menuWrapper-->
<!--End contentBlock-->


div#contentBlock {
margin:0 auto;
width:92%; /*Percentage of maxwidthwrapper*/
-moz-box-shadow:0px 2px 5px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:0px 2px 5px 2px rgba(0, 0, 0, 0.3);
-ms-box-shadow:0px 2px 5px 2px rgba(0, 0, 0, 0.3);
-o-box-shadow:0px 2px 5px 2px rgba(0, 0, 0, 0.3);
box-shadow:0px 2px 5px 2px rgba(0, 0, 0, 0.3);

div#menuWrapper {
margin:0 auto;
width:100%; /* Inside contentBlock*/
ul#mainMenu {
margin:0 auto;
ul#mainMenu li {
list-style-type:none outside none;
border-top:1px #d0cccc solid;
ul#mainMenu li#topItem {
ul#mainMenu li a {
padding:0.7em 1em; /*Top-Bottom and Right-Left*/
text-decoration:none !important;
background: url("../images/arrow-r.png") no-repeat scroll right center transparent;
background-position: 96% 50%; /*Horizontal, Vertical - Used To Position The Arrow Images*/
ul#mainMenu li a:active {
text-shadow:0pt 1px 1px rgb(25, 75, 126);/*Height, vertical, blur, color*/
/*In order to get background image plus a gradient, you must format it like the following:*/
background: #47ce12; /* Old browsers */
background: url("../images/arrow-r.png") no-repeat,-moz-linear-gradient(top, #47ce12 0%, #2eaa00 100%); /* FF3.6+ */
background: url("../images/arrow-r.png") no-repeat,-webkit-gradient(linear, left top, left bottom, color-stop(0%,#47ce12), color-stop(100%,#2eaa00)); /* Chrome,Safari4+ */
background: url("../images/arrow-r.png") no-repeat,-webkit-linear-gradient(top, #47ce12 0%,#2eaa00 100%); /* Chrome10+,Safari5.1+ */
background: url("../images/arrow-r.png") no-repeat,-o-linear-gradient(top, #47ce12 0%,#2eaa00 100%); /* Opera 11.10+ */
background: url("../images/arrow-r.png") no-repeat,-ms-linear-gradient(top, #47ce12 0%,#2eaa00 100%); /* IE10+ */
background: url("../images/arrow-r.png") no-repeat,linear-gradient(to bottom, #47ce12 0%,#2eaa00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#47ce12', endColorstr='#2eaa00',GradientType=0 ); /* IE6-9 */
background-position: 96% 50%; /*Horizontal, Vertical - Used To Position The Arrow Images*/
a#roundedTopLink {
border-top-left-radius:1.25em; /*Matches border-radius of contentBlock*/
border-top-right-radius:1.25em; /*Matches border-radius of contentBlock*/
a#roundedBottomLink {
border-bottom-left-radius:1.25em; /*Matches border-radius of contentBlock*/
border-bottom-right-radius:1.25em; /*Matches border-radius of contentBlock*/

[edited by: alt131 at 11:00 pm (utc) on Sep 26, 2012]
[edit reason] Thread Tidy [/edit]