Remove Resize handles and border from elements with contentEditable

Question

Hi Guys!

The problem I'm having is with the contentEditable attribute in IE. (some things never change).

The problem is that I'm getting resize handles, and a thick border around <li> elements when they're in focus.

Any idea of how to remove them? CSS or Javascript tricks are very welcome!

Answer 1

Make sure the <li>s don't have "layout", since elements with "layout" inside an editable element get resize handles in IE. "Layout" is a hidden property of an element in IE that is set to true when any one of various CSS properties are enabled:

• position: absolute
• float (left or right)
• width or height (any value other than auto)
• zoom (any value other than normal)
• display: inline-block
• various others

Here's a link from a quick googling that explains a bit more about layout: http://www.satzansatz.de/cssd/onhavinglayout.html