I'm developing this website
www.goldensprocketzmedia.com/BlackTheme
I'm using a custom cursor.
.png file for chrome n firefox
.cur file for IE
The cursor works perfectly fine on chrome and firefox
but on IE the cursor behaved wired when i hover it on a link. It kind of blinks n then gets back to normal. also lags.
the css code isbelow
a, a:hover{cursor: url(../../../../cursors/camera.png), /* Modern - relative to the document */
url(cursors/camera.cur), /* IE - relative to the root */
default; /* Built-in fallback */} /*new line added*/
body{width:100%;padding-top:3em;background-color:transparent;color:#abaaaa;font-family:"Open Sans",Helvetica,Arial,sans-serif;font-weight:400;
cursor: url(../../../../cursors/camera.png), /* Modern - relative to the document */
url(cursors/camera.cur), /* IE - relative to the root */
default; /* Built-in fallback */
}
Could someone help me in solving this problem.
thanks
Try changing default to auto.
Related
Back arrow hyperlink's image is rendering properly in chrome but not in internet explorer 11, however I am able to click on it, even from ie (mouse cursor is changing from arrow to hand, when I move the cursor to its respected position in ie11).
Below is my html code --
Below is my css code --
.backlink {
content: url(back/back.png);
padding-right: 5px;
vertical-align: middle;
}
In chrome back.png is displaying like below --
Please help!!
Using content: on regular elements is not yet fully supported.
content: is intended for use with pseudo element, such as before, and after.
Chrome, has likely started to implement some of the CSS working draft (where it has been suggested that content work on 'regular' elements too.
I am trying to integrate some non editable zones in my TinyMCE 4. And it works fine. But now I want a cursor to become "not-allowed" over the non editable elements. I set it in css and it all works fine for Chrome and Firefox but not for IE9 the cursor don't change!
Is there a workaround for this problem?
Thanks
You can find a simple exemple here http://fiddle.tinymce.com/iSeaab
IE only supports CUR and ANI as formats from CSS to change cursor.
{
cursor: url('/cursors/customMoveCursor.png'), /* Modern browsers */
url('/cursors/customMoveCursor.cur'), /* Internet Explorer */
move; /* Older browsers */
}
Please look here. or a good link here
Have you tried to edit the CSS for TinyMCE like (tinymce/skins/lightgray/skin.min.css)
add what you need. Example:
.mce-grid td.mce-grid-cell div[disabled]
{
cursor:not-allowed
}
I still recommend using .cur file for IE.
Does anyone know of a way to make an 'fa-image' not draggable and not selectable, at the same time?
I have this surface displayed in 'fa-container-surface' and want to disable image selection because of scroll and drag and drop doesn't work if popup appear to save image.
<fa-image-surface fa-image-url="{{tile.image}}"
fa-size="[60, 40]"
class="hexagon-tile-img unselectable">
</fa-image-surface>
I tried to set this css :
.unselectable {
/* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
/* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
-moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
-webkit-user-select: none;
-ms-user-select: none; /* From IE10 only */
user-select: none; /* Not valid CSS yet, as of July 2012 */
-webkit-user-drag: none; /* Prevents dragging of images/divs etc */
user-drag: none;
}
But this doesn't work on chrome 38 webbrowser or Windows Phone 8.1 browser. Image disappear because of next error:
Syntax Error: Token 'unselectable' is an unexpected token at column 18 of the expression [hexagon-tile-img unselectable] starting at [unselectable]
In HTML, I know that we can set "unselectable='on'" or "draggable='false'" on 'img', but if I try to do it on 'fa-image-surface' attributes are not considered.
Does anyone have an idea to do it in famo.us/Angular project?
The only CSS class that's being applied to your hexagon-tile-img- try adding unselectable to the class attribute, just to test that it will work correctly on img elements.
In your stylesheet, you could try using .unselectable > img to basically apply the unelectable rules to the child img elements in your container.
Also, don't expect famo.us to work on IE at the moment as IE hasn't implemented preserve-3d, which is vital to applying 3d transforms to child elements.
My goal is to increase the size of the checkboxes, cross-browser. I have accomplished this goal in Internet Explorer, Firefox, and Chrome by using the browser prefixes (-moz-, -ms-, etc.) with this:
input[type=checkbox]
{
/* Double-sized Checkboxes */
-ms-transform: scale(2.1, 2.1); /* IE */
-moz-transform: scale(2.1, 2.1); /* FF */
-webkit-transform: scale(2.1, 2.1); /* Safari and Chrome */
-o-transform: scale(2.1, 2.1); /* Opera */
}
It is not working in Safari (and Opera, but I'm more focused on Safari). I have version 5.7.1 and I am accessing it from a windows desktop.
However, I was playing around with this jsfiddle and noticed that the scale works on divs:
http://jsfiddle.net/webvitaly/KKVXB/
I stripped out the code to get the minimum that will still get the desired result:
<div class="matrix3d"></div>
<input type="checkbox" name="opt1" id="option1" />
input[type=checkbox] {
-webkit-transform: scale(3,3); /* safari and chrome */
}
.matrix3d {
-webkit-transform: matrix3d(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); /* safari and chrome */
}
Here's the jsfiddle for it: http://jsfiddle.net/3xr7Q/
The checkbox is larger as expected, but as soon as I took out the 'matrix3d' class or alter the 'matrix3d' html or css in any way, the checkbox goes back to its normal size.
Does anyone know why it works with the 'matrix3d' class and how I can accomplish the goal without it, preferably by not editing the HTML? I do not want to just add an extra 'matrix3d' div next to my checkbox because I don't know why it affects the checkbox.
Edit: Also, something I notice is if I refresh the page, it flashes to the big size before going back to the small size. Also, it would nice to figure out it on Windows, but if someone says it works on a Mac or iphone, that might be OK.
Input elements are inline not block level elements, and webkit has historically not supported transforms on inline elements.
One way to fix this is to add a display: inline-block to the input's CSS. I'm not an a Mac right now, so can't check this.
I am trying to rotate the label on my X-Axis on my flot graph in a similar way a user asked here - Rotate Flot Tick Labels
The problem I am facing is that it looks like the CSS selector for the X-Axis doesn't select anything. The selector I am using is:
div.xAxis div.tickLabel
{
transform: rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-moz-transform:rotate(-90deg); /* Firefox */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
-o-transform:rotate(-90deg); /* Opera */
/*rotation-point:50% 50%;*/ /* CSS3 */
/*rotation:270deg;*/ /* CSS3 */
}
I also don't even understand how the graph is even visible. I don't know much about the canvas tag, but it looks like it is completely empty.
I don't understand how the source there is empty. I would think there would be some sort of markup like vector points that represent the graph. Is that just how canvas works? Also, how would you even know what CSS selectors to use at that point if you can't view the source?
You are probably using the canvas plugin, and setting canvas: true in your options. That forces flot to draw the labels on the canvas, rather than putting them where you are expecting (in the divs).