Span tag with display:inline rendering as display:block

Question

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.

Answer 1

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.