This code is working great in firefox n chrome but not in Internet Explorer.
Please me some solution.
<style>
div.cursor_green
{
cursor: url(pncl_green.png), auto;
}
</style>
You should convert your image in cur format that work great.
<style>
div.cursor_green
{
cursor: url(pncl_green.cur), auto;
}
</style>
Related
I'm trying to make the scrollbar of a div (not the entire body) always visible, it works everywhere except on Safari & Chrome on iOS.
It looks like ::-webkit-scrollbar doesn't work on iOS.
The CSS that I've tried, that works everywhere but on iOS:
::-webkit-scrollbar {
width: 20px;
background: red;
}
Do you know any workaround to make it work? Do you know why iOS doesn't support that?
Thanks!
Try:
html,
html > * {
-moz-overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
body::-webkit-scrollbar {
width: 20px;
background: red;
}
Hope this works.
I have a very weird bug in my JavaScript library on mobile Safari, that I've tried to reproduce with a simple example:
I have basic css and html:
html,
body {
margin: 0;
padding: 0;
font-family: monospace;
}
body {
min-height: 100vh;
/* mobile viewport bug fix */
min-height: -webkit-fill-available;
}
html {
height: -webkit-fill-available;
}
#term {
background: black;
color: #ccc;
height: 100%;
}
h1 {
margin: 0;
font-weight: normal;
}
html:
...
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="term" contenteditable>
<h1>HELLO Mobile</h1>
...
and when I open the website on mobile Safari and open the virtual keyboard, I can scroll down outside of the content.
Here is the screenshot from BrowserStack when I hover over body, I'm not able to hover over html to highlight it.
Does anybody know how to fix this issue? It looks like a basic page.
Here is the link to the website: https://terminal.jcubic.pl/mobile.html
As you can see from the code I've tried to fix the issue by adding:
-webkit-fill-available
Found in an article: CSS fix for 100vh in mobile WebKit by Chris Coyier. But it doesn't make any change.
Is there a way to get rid of that white space, it seems that even CodePen has this issue. Is it a bug in Mobile Safari, is there a hack to fix it?
EDIT:
I think that this is a long-standing issue and Apple doesn't care how miserable users and developers are. Safari on iOS scrolls beyond element when virtual keyboard is opened
Try this:
JS File:
const appHeight = () => {
const doc = document.documentElement
doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()
CSS File:
:root {
--app-height: 100%;
}
html,
body {
padding: 0;
margin: 0;
overflow: hidden;
width: 100vw;
height: 100vh;
height: var(--app-height);
}
It may help
Have you tried:
body {
margin: 0 auto;
}
Im using google chrome and i want that profile text with the background to disappear when i hover over it. but alas it doesn't... i'm sure im doing something fundamentally wrong. please explain
HTML
<body>
<div id ="pictures">
profile
</div>
CSS
#pictures {
height: 100px;
width: 200px;
display: block;
background-color:#FCC;
}
#pictures:hover {
display: none;
}
You'd be better off using opacity: 0 to avoid any weirdness (as already explained by Danjah).
http://jsfiddle.net/UenGP/2/
#pictures:hover {
opacity: 0;
filter: alpha(opacity=0);
}
If you hover over the #pictures element, it is then removed, therefore you are no longer hovering over it. In Firefox I see a flicker, in Chrome, perhaps the flicker is so fast you don't see it disappear only to reappear again.
Kind of a frustrating question for me.
Here's the link. Try it in IE, Chrome and Firefox. The latter two are fine and the image is aligned to the right and appears as 375x500. But in IE, the image aligns to the right, but appears as 15x500.
http://www.themoneygoround.com/2011/04/intc-intel-shows-up-strong-afterhours.html
When I look at the View Source in IE, the image width and height should be 375x500, but that's not what displays. The image is aligned to the right as expected, but shrunk to 15x500. Thanks for any thoughts...
Here is the CSS
p img {
padding: 0;
max-width: 100%;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
/* End Images */
I see the problem as well with IE 8. The trouble is your max-width property for the <img>. IE will not render a max-width correctly with the XHTML doctype (which you appear to be using). You can either remove the max-width or use a doctype which will trigger standards mode in IE. I recommend the HTML5 doctype as per this article.
First off, I see about 14 javascript errors in IE when I pull that up stating 'null' is null or not an object. Maybe start there?
EDIT: By the way, I was in IE8
Working Solution:
I removed the <p class="alignright"></p> that was wrapping the image in question, and it worked like a charm.
View in my working jsFiddle demo.
I want to use an image for the background of a select/dropdown. The following CSS works fine in Firefox and IE, but does not in Chrome:
#main .drop-down-loc { width:506px; height: 30px; border: none;
background-color: Transparent;
background: url(images/text-field.gif) no-repeat 0 0;
padding:4px; line-height: 21px;}
select
{
-webkit-appearance: none;
}
If you need to you can also add an image that contains the arrow as part of the background.
What Arne said - you can't reliably style select boxes and have them look anything like consistent across browsers.
Uniform: https://github.com/pixelmatrix/uniform is a javascript solution which gives you good graphic control over your form elements - it's still Javascript, but it's about as nice as javascript gets for solving this problem.
Generally, it's considered a bad practice to style standard form controls because the output looks so different on each browser. See: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/ for some rendered examples.
That being said, I've had some luck making the background color an RGBA value:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #d00;
}
select {
background: rgba(255,255,255,0.1) url('http://www.google.com/images/srpr/nav_logo6g.png') repeat-x 0 0;
padding:4px;
line-height: 21px;
border: 1px solid #fff;
}
</style>
</head>
<body>
<select>
<option>Foo</option>
<option>Bar</option>
<option>Something longer</option>
</body>
</html>
Google Chrome still renders a gradient on top of the background image in the color that you pass to rgba(r,g,b,0.1) but choosing a color that compliments your image and making the alpha 0.1 reduces the effect of this.
You can use the CSS styles below for all browsers except Firefox 30:
select {
background: url(dropdown_arw.png) no-repeat right center;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 90px;
text-indent: 0.01px;
text-overflow: "";
}
Updated
Here is a solution for Firefox 30. There is a little trick for custom select elements in firefox :-moz-any() CSS pseudo class.