CSS quirks parsing can lead to unexpected results

I was having real trouble with an html menu. Every time I would move the mouse over an item, a large gray area would appear over the screen. This only happened on Internet Explorer 7, not Internet Explorer 8 or any other browser. When I changed the Doctype from XHTML to HTML I reproduced the error on IE8 as well.

Strangely enough, when I first found the source of the problem, a border of 899px , I thought it was a browser javascript incompatibility. How could it be differently? The CSS was mine and the JS was not. Obviously it was their fault. However, after reproducing the problem in IE8, I could use the more advanced developer tools available and I realised that the strange border width was not part of the element style, but the CSS class style itself. It was there, the interpreted style for my menu control class: border: 899px;.

I rechecked the CSS and I found the actual problem: no hash in front of the colors! So the browser found something like D8C89A instead of #D8C89A, did a weird parse on it, got 899, then considered it a size in pixels!

Hopefully, someone will read this and save themselves a lot of grief and time.