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

Question

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;
border: none;
direction: ltr;
text-align: left;
}

Answer 1

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.