Q:

Span tag with display:inline rendering as display:block

I have a span tag like this 
<td>
<s:textfield name="trnfr" id="trnfr"/>
<span id="trnfrm" style="width:10px;display:inline;">
  &nbsp;
  <a onClick="showCal('trnfrm')"><img src="./images/cal.gif" border="0"
  alt='<s:text name="Co.Cal" />' /> </a>
</span>
</td>

It should render as 

but it is rendering like this 

when i viewed the source in the browser it is being rendered like this 

Dont know whats going wrong.
Note: I got the correct image by changing display:block to display:inline dynamically in the browser.

A:

You aren't able to easily override in your CSS because the element is being set to display:block inline (within your HTML), likely by the framework you are using (hard to say without further detail).
As such you will either need to prevent this from being set, remove it (i.e. using JS) or override it in your CSS.
To override in your CSS, you will need to use !important, e.g:
#trnfrm{
  display:inline!important;
}

That said, note that the use of !important is not recommended. Ideally you should look to fix the root cause.

When an !important rule is used on a style declaration, this
  declaration overrides any other declaration made in the CSS, wherever
  it is in the declaration list. Although, !important has nothing to do
  with specificity.  Using !important is bad practice because it makes
  debugging hard since you break the natural cascading in your
  stylesheets.

