homepage Welcome to WebmasterWorld Guest from 54.161.191.254
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Problems On Android Browser
Background color in list items
chatyak




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

Hello,

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>
</ul>
<!--End navMenu-->
</div>
<!--End menuWrapper-->
</div>
<!--End contentBlock-->


CSS CODE:

div#contentBlock {
margin:0 auto;
padding:0;
border-radius:1.25em;
width:92%; /*Percentage of maxwidthwrapper*/
display:block;
background-color:#eeeded;
-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;
padding:0;
width:100%; /* Inside contentBlock*/
}
ul#mainMenu {
margin:0 auto;
padding:0;
}
ul#mainMenu li {
display:block;
list-style-type:none outside none;
padding:0;
text-align:left;
border-top:1px #d0cccc solid;
}
ul#mainMenu li#topItem {
border-top:none;
}
ul#mainMenu li a {
padding:0.7em 1em; /*Top-Bottom and Right-Left*/
text-decoration:none !important;
display:block;
font-size:1em;
font-family:Helvetica,Arial,sans-serif;
font-weight:bold;
color:#333;
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 {
color:#fff;
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]

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved