contenteditable DIV has a default border in FF & Chrome - How to hide it?

Chrome - 11.0.696.50

FF - 4.0

IE - 7.0.570.13

The DIV is defined as below and when I'm focusing on it with jQuery.

As soon as I focus on it a border appears around the DIV in both FF & Chrome.

FF shows a dotted border & Chrome shows a solid light orange one.

I tried border: none; but that doesn't make difference. Any ideas ?

DIV : <DIV id="editable-div" contentEditable="true"></DIV>

CSS for it :

#editable-div

{

margin-left: 10px;

margin-top: 10px;

width: 740px;

height: 25px;

b开发者_开发百科order: none;

direction: ltr;

text-align: left;

}

What you're seeing is probably an outline, not technically a border. Try this:

#editable-div:focus {
    outline: none;
}

This is kind of a shot in the dark on my part; hopefully if it doesn't work exactly this way at least it will help you figure out a solution.