Note: I'm aware of this question: How to disable elements selection and resizing in contenteditable div? . This question is slightly different.
I'm current using Kendo UI Editor. When I'm using IE 11. There's an resizable border of the content like this:
Here's the sample image
How to hide the border? I tried putting border: none; on my css. I even search about this issue but it keeps redirecting me into other Editor.
Here's the sample code: (try to use IE 11 to see the issue)
https://dojo.telerik.com/AJOXeGAb
this is my IE version
Maybe this works:
border: 0px;
Related
I am working on a form for a company that still uses tables and they want me to add CSS to their template without changing any HTML/JS. There is a nested input(CheckBox) that should be selected when a user clicks the image. This is working fine in Chrome, Firefox, and Edge but in IE when the image is clicked it will not check the box. Below is a screen cap of the DOM and an actual choice in the browser.
I changed the background color of the font tag to distinguish it from the image and added a border around the td. I noticed 2 strange things.
When the font tag is clicked it will check the box.
When the box is checked, I am able to click the image and have the checkbox
de-selected. Once it is, I can not re-select it by clicking the image.
Any idea of what is causing this and what can be done? I am using IE 11.
It appears that IE has a bug which causes this problem. I found some helpful information from this site:
https://snook.ca/archives/javascript/using_images_as
The CSS fix was:
label img{
pointer-events: none;
}
label{
display: inline-block;
}
The Problem
I have a div that has contenteditable set to true. In Chrome, when the edge of the div is reached while typing, it shifts the entire word to the next line as expected. I present Exhibit A:
IE, as usual, doesn't behave as expected. When the edge of the div is reached while typing it breaks the word. I present Exhibit B:
The HTML
A simple div, with the contenteditable set to true:
<div id='bioEntryContainer' contenteditable='true' class='form-control'></div>
The CSS
The form-control is from Twitter's Bootstrap CSS. The custom styles are:
#bioEntryContainer { min-height:74px; overflow:auto; }
Attempts to Fix
I've tried the following with CSS, with no luck:
overflow:hidden;
overflow-x:hidden;
white-space:nowrap;
white-space:pre;
display:inline-block;
I've tried the route suggested in this question, but it didn't work. Any other suggestions?
Update
I created a fiddle to demo the problem, but I can't recreate it there. I've included the Bootstrap CSS to get it as close to the actual environment as possible.
The div is added in the Bootstrap Modal with JS. I'm not sure how that could change things, but hopefully that provides more background information.
Which IE versions have you tried so far?
I've tried it in IE 9-11 and no such problem persists.
Try setting
word-wrap:break-word;
in your css style.
I am designing a website which has css menus.
Some of the menus have submenus. Any menu item with a submenu shows a simple image of ">", to indicate that there are submenus.
Here is a JFiddle. (Please excuse the 60 lines of CSS. I am working from generated code and I stripped out as much extraneous code as I could.)
This is not working in IE8 and I have no idea why. In IE8, the > image simply doesn't appear.
Can anyone help me make it so this code will work in IE8?
Using a background image isn't an ideal solution, because the page is already using a background image for another purpose.
Thank you!
.has_children:after
{
content:url('http://s21.postimg.org/banv5jdib/submenu_arrow.png');
position: absolute;
right: 5px;
top: 2px;
}
In order to make :before, :after and content work in IE8 you need to have <!DOCTYPE html> on the top of the page.
If still it fails, than you will have to use CSS3 pie with Selectivizr
For Support Details Or Here
And as you told that you cannot use background-image than using img tag seems fair and only way to achieve this.
I am creating a website and there's a strange white space at the bottom of the page (only at IE). safari is fine. i am using ie8.
I want the white background ended after that black navigation links.
http://www.applezone.com.hk/newrx/
I can't figure out which part of the css causing that white space.
Thanks.
try adding those:
.navlink{
display: inline-block;
margin-left: 51px;
}
i don't have IE8 to test on but i do use "IE tester" program which showed me the problem.
If you use Firebug (Firefox add-on) you can select that white space and it will show you where it is in the DOM, i.e. what the HTML is that is actually generating it - which element it's part of.
You can also switch on and off the individual styles on the fly.
The equivalent in IE is to hit F12 and get the 'Developer Tools' console. Find -> Select Element by Click.
Try display:block and/or margin:0 and/or padding:0 for the element in question. One of them is going to be the culprit.
i have a page which displays a border around the divs #call and #courses
i m using the css:
border: 3px solid #afd4a9;
this is not properly in ie
see it here
thanks
There's nothing wrong with your CSS.
When I disable JavaScript in Internet Explorer, the border is there (but not rounded).
Looking more closely, I see you're using jquery.corner.js for rounding the corners.
I'm not sure why that isn't working for you (I can't see what you're doing wrong), but I recommend switching to CSS3PIE instead for the rounded corners.
In short, you simply download the PIE.htc file, and add a single rule to your CSS for each element:
#myElement {
...
behavior: url(PIE.htc);
}
corners.js removes the borders in ie - see the inline styles for the relavent divs. To have borders in IE, you need to have an outer div wrapping the inner div and use corners on both divs to get a border like effect. Check out the demo page about half way down, under adjornments: Jquery corners demo page
The way corners works in ff and IE is totally different - it simply uses the built in mozilla css styles which keeps the border styling. In IE corners does div insertion.
The problem is that you have a bit of javascript adding a style attribute to your DIVs:
style="border-bottom: medium none; position: relative; border-left: medium none; zoom: 1; border-top: medium none; border-right: medium none;"
You'll have to selectively remove that code for IE, or fix how it works.
Note, you ought to install the Developer Tools for IE (or if you have IE 8, just press F12 to see if they come up). The tool will let you see the HTML code after javascript has run, and it is invaluable in troubleshooting these types of problems.
Your CSS is being overwritten by inline styles, it appears, by this function. $('#courses').corner(); in your index.js file, which is rounding its corners like it's supposed to.