[css] IE8 vs Firefox 3.5

[Nick_Parker]

Can somebody please explain to me how some simple CSS code can display so differently when viewed in IE8 and when viewed in Firefox?

 

I've attached pictures of the particular piece, I use FF and so I've spent time making the tweaks etc to make it work and when I opened it up in IE8 it looked completely different!

 

The CSS code for the "Send" button which is written in the

section:

 

<br />
input[type=submit] {border:1px solid #A8A8A8; background: #FBFBFB; width:100px; height:40px; margin-left:300px; }<br />
input[type=submit]:hover {border:1px solid #A8A8A8; background: #FBFBFB  url('images/text_focus.png') repeat-x;; width:100px; height:40px; margin-left:300px; }*/<br />

 

and the actual button:

 

 

It looks correct in FF but IE8 doesn't seem to apply any formatting?

 

Similarly with the textarea, in FF the box has a grey focus image across the top when clicked, nothing in IE8.

 

<br />
textarea:focus { background: #FBFBFB url('images/text_focus.png') repeat-x; }<br />