Border around DIVs

Question

I've been building this website without problems in Firefox, and when I start to use chrome for cross browser testing, I've noticed a slight border around my <div> .

This is what it's supposed to look like without border

But notice the slight yellow border around the div when I clicked in one of the empty spaces of the div.

I've had a similar problem with the images before, whereby I added a border:0 and it's solved, however, for this issue, I've tried border:0 , border:none , outline:0 and they all don't seem to work.

This is quite urgent and I appreciate any help from you guys.

Please do not hesitate to ask me any questions that may aid in the solving of this problem.

Thanks in advance

EDIT

Just learnt that this is a chrome's focus indicator, is the conventional border:0 , border:none workable for this type?

Answer 1

Use pseudo selector Element:focus { Outline:none; }

Answer 2

That yellow border is the "focus" indicator. Whereas in IE it's a dotted outline, Chrome adds a yellow border like that.

I have yet to find a reliable way to get rid of it, unfortunately, but double-check you've added the border-removing styles to the right element.

Answer 3

The style of that div should be in a single block if that div is called in css.maindiv let it stands alone

.div{
border:0px;
}