i can't fix the problem. I'm testing website on Android smartphone and when i tap on links it becomes hotpink on a second.
I'm using styles:
::-moz-selection { background: #989898; color: #fff; text-shadow: none; }
::selection { background: #989898; color: #fff; text-shadow: none; }
a,a:hover,a:active,a:visited {-webkit-tap-highlight-color: #989898;}
But it doesn't work. How to fix this?
add this to your css file
a:focus{}
in your reset.css ::-moz-selection{ background: #FF5E99;} changes color code
Related
To get scrollbars to appear in scrollable elements in a webview, such as a div, I used to use the following css styles:
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
All worked fine until the latest update of Android webview, when all of a sudden the scrollbars no longer appeared. This is unacceptable for the web application I'm developing, which needs scrollbars to give the users a visual cue that there is more content if they scroll down. Does anybody know how to get the scrollbars appearing again with the lastest webview?
I think this URL is help full
http://manos.malihu.gr/jquery-custom-content-scroller/
I am having problem with some CSS stuff. Have a look at : http://codepen.io/anon/pen/rxQQpv .
ul {
list-style: none;
}
ul li {
background: #333;
color: #fff;
width: 100px;
float: left;
text-align: center;
}
<ul>
<li>Test1</li>
<li>Test2</li>
</ul>
When I open the same in Android Google chrome, it looks like:
Screenshot from my Android Browser
Notice there is a little space between the 2 li blocks. How do I remove that ? And why is it there ?
Add a border of the same color as the background. It will work:
ul li{
border: 1px solid #333;
}
Or you can add the borders only on left and right if you like it better.
ul li{
border-left: 1px solid #333;
border-right: 1px solid #333;
}
I think you must set the li css rule margin:0 and padding:0 to solve your problem.
Try adding display: block to your li element:
ul li {
display: block;
}
Which Android device / version are you testing on? I wasn't able to reproduce the issue.
The best solution I found is to use another div which spans in the background of both of these divs with the same colour. My webapp had more than 20 consecutive such blocks. Hence adding border to them didnt work well. This solution works the best.
I created simple Qt iu form in Qt Designer. I thought it is kind of WYSIWYG editor for Qt, but I'm starting to think it's more like WYSITUTWYG.
Jokes aside, I am trying to use CSS as much as possible so that we can quickly change design once we have an idea that doesn't look like crap. This is the CSS, which is applied to MainWindow:
* {
margin: 0;
padding: 0;
}
QWidget {
background-color: black;
color: white;
font-family: Arial;
}
*[class="h1"] {
color: yellow;
background-color: rgb(50, 191, 12); /* light green*/
font-size: 15pt;
padding: 6px 8px 6px 8px;
}
QPushButton {
background-color: rgb(50, 191, 12); /* light green*/
color: black;
padding: 2px 5px 2px 5px;
}
*[class="datapointWidget"], DataPoint {
border: 1px solid white;
}
I am using custom dynamic property to use [class="h1"] selector. This one thing actually works really well.
This is the result:
As you can see we have some problems here:
padding has no effect at all
magically, yellow border appeared around headings
buttons did show green background but still also render natively
DataPoint widget has no border
One thing that actually holds well is the weird right margin - the one thing I hoped was just a Designer visual bug, but actually appears in the program.
I am using a simple jQuery/CSS accordion panel for a mobile website (coded as a flexible design with a few media queries thrown in). It's behaving as expected in most of the browsers I've been able to test, but there is a bug within the accordion in the default browser on my Android device (Galaxy Nexus, Android 4.2.2). When I open a panel, all of the contents jump into a weird formatting layout, but if I click on another panel or close the open panel, all of the contents jump into the layout I expected them to have.
The script:
$('.accordion > .heading > a, .accordion > .heading').on('click', function () {
var $next = ($(this).is('a') ? $(this).parent().next() : $(this).next());
$next.slideToggle();
return false;
});
The CSS:
.accordion {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.accordion .slidepanel {
background: #f6f6f6;
display: none;
margin: 0;
padding: 3%;
position: relative;
}
I have tried setting the panels to be open by default and all of the formatting within is as expected. I have racked my brain trying to figure out a fix for Android -- anyone out there got some other ideas?
Simple answer found after hours of this headache:
.accordion .slidepanel {
background: #f6f6f6;
display: none;
overflow: hidden; <<---
margin: 0;
padding: 3%;
position: relative;
}
Something to do with the height and width that the .slideToggle(); needs to calculate while it's doing its magic...
I want to make gradient text only with css3 or html5 working on Android. I tried with css3 but on android there's a little problem. I tried this http://nicewebtype.com/notes/2009/07/24/pure-css-text-gradient-no-pngs/. Here's how it looks like in android http://img121.imageshack.us/img121/5014/androidw.png . Can somebody tell me how to fix it, or another way to do it, no matter with css3 or html5 canvas?
header h1 {
position: relative;
display:inline-block;
margin-top: 0px;
background: rgba(0,0,0,0);
margin: 23px 0 0 77px;
}
header h1 a {
color: #fff;
position: absolute;
background: rgba(0,0,0,0);
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
}
header h1:after {
content: 'Company name';
background: rgba(0,0,0,0);
text-shadow: -1px 1px 2px #232323;
color: #dadada;
}
It could be a browser issue.
Here is a link to a cross-browser css gradient generator.
Try creating any gradient and try it. If it works, then it's a browser issue.
Here is the link: CSS Gradient Generator
Let me know if it sorts the problem for you.