Need help with simple css regarding grey background

Hi pros,

I hope someone can help me with this.. should be easy for someone that understands css..

well I have a grey area on my site that i want removed.. this only appears on IE but not chrome or firefox.. please see the below screen shot of what i mean:



Here is a chunk of my css:

#sform2 { width:760px; border:1px solid #CCCCCC; margin:0px auto; clear:both;}

#sform, #primary {
width:760px;
background:url(images/bgsearch.gif) right no-repeat;
margin:2px auto;
padding:5px 0px;
clear:both;
border: 2px solid #d51e1e;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
	
	#sform p { font-size:11px;}

Code (markup):

I think i need to add a code somewhere with the color #ffffff but i cant seem to get it to work.

Please help thanks!!!!!

 

add below at the bottom of style.css and check it by using ctrl+F5

#search_box {background: white !important;}

Code (markup):

 

thanks mnmani, but it doesnt work
i actually fiddled around with it and added it somewhere else, it made the red thing on the right disappear lol

 

#search_box {
border-radius:0.1px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
width:570px;
padding-left:90px;

I found out that its giving 90px padding and in my other php page, its giving the top padding too..

the padding is giving it a grey effect, how can i get this removed?

 

thanks for your help..
i fixed it now =)

 

I do not see it is fixed yet on IE8 ... anyway, let us know the change you have made

 

well you probably saw it too early, because i have another site where i test these out before i go ahead with it..

check again, i totally changed everything now.. has a full background =)
thanks dude