CSS rules not being followed in Sharepoint

HTML & CSS
1

I work for a company with a Sharepoint 2007 site, and would like to change the search box from one to the right of the other to one on top of the other (see pics). I was able to get this to work in firefox by adding display:block to the style of the TD’s of the search boxes. However, this fails in every other browser. In Chrome, it defaults to display:table-cell, and in IE, it is still showing display:block in the dev console, but it is still showing up inline on the actual page. Can anyone help me with this? For anyone unfamiliar with Sharepoint, the html structure looks like this:


<table>
     <tbody>
          <tr>
               <TD class="ms-sbscopes ms-sbcell">dropdown box</td>
               <TD class="ms-sbcell">search box</td>
               <TD class="ms-sbgo ms-sbcell">go button</td>
          </tr>
     </tbody>
</table>

CSS code that works only in Firefox:


td.ms-sbcell {
	border-width:0px;
	background: #990000;
	padding-left: 5px;
	display:block !important;
}

Also, this MUST be done with css, I can’t go arround and change the master page for some 500 sites. Is there something I am doing wrong? How can I fix this issue? Please view the images to get a better idea of what I am talking about. Thanks in advance!

What I want: (Firefox)

What I currently have: (Every other browser)