开发者

CSS image right align - extra line in Firefox 6.02

I have a right aligned image, which works fine in IE9 and Chrome 14. In Firefox 6.02 I do get an extra line. Application is using jQuery UI. How could I avoid this? Is my CSS somehow wrong, or is Firefox 6 known to be different - as far as I remember it was the same as in Chrome with FF5.

CSS image right align - extra line in Firefox 6.02

CSS image right align - extra line in Firefox 6.02

<tr class="ui-widget-content sideB开发者_StackOverflow社区arTopAlign">
  <td>Data file:</td>
  <td colspan="3"><div id="inputDatafileInfo">not read</div>
     <button class="ui-button sideBarRightAlign">
     <span class="ui-icon ui-icon-link" title="Show data file"></span></button>
  </td>
</tr>

with:

/* align some elements explicitly right */
.sideBarRightAlign { float: right; margin-right: 1px; }

/* align some elements explicitly right */
.sideBarTopAlign { vertical-align: top; }

The styles from jQuery UI

button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }
.ui-button { cursor: pointer; display: inline-block;
    margin-right: 0.1em; overflow: visible; padding: 0;
    position: relative; text-align: center; text-decoration: none !important;}

Another finding, it seems to be related to the colspan, if I move it in the last of 4 columns it displays as intended.


There was a no-wrap applied to a parent div section. I do not understand why this resulted in the extra line break - and only in FF - but it was the root cause.


simple

give the time span a width and display:inline-block

also for the 743 label

the problem is that the span it too long and doesnt give the img to be floated right and top

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜