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.
Related
I'm working on a contact form where the select inputs are designed to have white text on a black background. The desired styles are being applied correctly in every instance except when accessed via Safari or Firefox on either an iPhone or iPad.
The relevant CSS Script is as follows:
select{
-webkit-appearance: none;
color: white !important;
}
Is there a particular reason that these browsers may not be processing this style? And how would I circumnavigate it?
*edited as both Firefox and Safari express this same issue
This type of styling is not currently supported by WebKit browsers on Mac OS X. You may find some more ideas here: Pure CSS solution to styling specific options in Webkit based browsers?.
Have you tried styling the option?
select option {
color: white;
}
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'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.
The input browse button should come as with space on IE11 as it comes in IE8.
See the below images so that you can have a clear idea on my issue.
On IE11, it is coming like this, i mean this is wrong.
On IE8, it is coming like this, i mean this is right.
So, i need the same button should come with space in IE 11, Any help?
Every browser uses its own styling for <input type="file"/> and it's usually better to just accept that and use the default as there is no standard-compliant solution for styling the upload button (at the moment).
However, if you insist on adding the space, you can use the non-standard ::-ms-browse selector for targetting the Browse button on the latest IEs.
For example:
::-ms-browse {
margin-left: 5px;
}
(You can use ::-ms-value for styling the input field part.)
Please have a look at this question: How to remove default file input style on IE10?
You can't achive changes in IE10 and greater with conditional comments because they were deleted in 10 and 11.
The new workaround is with media queries in css:
Use:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
input (or whatever your selector is) {
/* your css here */
}
}
For further information regarding css-hacks for IE10 and greater: http://www.impressivewebs.com/ie10-css-hacks/
Its a default browser property so we can't do this
My project needs this scroll bar (image given),
I applied this to my css
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background-color: #FFFFFF;
} /* the new scrollbar will have a flat appearance with the set background color */
::-webkit-scrollbar-thumb {
background-color: rgba(242,91,32,0.9);
} /* this will style the thumb, ignoring the track */
::-webkit-scrollbar-corner {
background-color: #FFFFFF;
}
but when i checked my page only chrome is showing the effect Firefox (27.0.1) and Internet Explorer(10for) are not responding to the changes.What I must add so that it becomes uniform for all of them ?
As mentioned by N.Nihar in a comment, Firefox and Internet Explorer in current versions don't support scrollbar customisation.
If you need to have the scrollbar styled, you may want to use a custom Javscript or perhaps even better a jQuery based scrollbar element. The first one to show up in google search is a Stack Overflow answer, or you can go for the Tiny scrollbar, or one from this list. There are plenty of Javascript and jQuery based scrollbars readily available.
If you do use one of those, though, be sure to test your solution thoroughly, because the behaviour of 'native' scrollbars is not that easy to mimic.
firefox and IE doesn't have capabilities for customizing scrollbar