Niroshana Niroshana - 14 days ago 5
HTML Question

Why is one cell lower than the rest?

I am using IE11 and this issue does not exist in FF or Chrome. It only exists in IE10/11 with resolution

1366x768
. Screenshot below shows the issue.

Screenshot

Here's my code on jsFiddle:



<table class="rvTable" role="presentation" style="line-height:1.25;border-collapse: collapse; min-width: 460px; background-color: transparent;">
<colgroup>
<col style="width: 151px;">
<col style="width: 100px;">
<col style="width: 56px;">

</colgroup>
<tbody>

<tr>
<td style="border-width: 1px medium 1px 1px; border-style: solid none solid solid; border-color: rgb(0, 0, 0) currentColor rgb(0, 0, 0) rgb(0, 0, 0); padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);">
<div class="rvParagraph pNormal" style="font-size: 13px;"><span class="rvTxt fNormal"><span class="forcedSpace"> </span><span class="forcedSpace"> </span>Years to</span><span class="xlPopupStep" data-dojo-attach-point="domNode" widgetId="PS5">
<a name="PS5" tabindex="0" title="Definition" class="xlPopupLink" id="PS5" role="link" type="hyperlink" data-dojo-attach-point="_buttonNode, focusNode" text="maturity">maturity</a>
<span data-dojo-attach-point="_dummyTextHolder"></span>
<div class="xlPopupStepPopup" data-dojo-attach-point="containerNode">
LOADING...</div>

</span>
</div>
</td>
<td style="border-width: 1px medium 1px 1px; border-style: solid none solid solid; border-color: rgb(0, 0, 0) currentColor rgb(0, 0, 0) rgb(0, 0, 0); padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);">
<div class="rvParagraph pNormal_24" style="font-size: 13px;"><span class="eqLabel fNormal" id="Y1" style="background-color: rgba(0, 0, 0, 0) !important;" aria-label="30" widgetId="Y1"><span class="eqAccessibleLabel">30</span><span class="eqDocument" role="presentation" aria-hidden="true"><span class="txtNum"><span>3</span><span>0</span></span>
</span>
</span>
</div>
</td>
<td style="border-width: 1px 1px 1px medium; border-style: solid solid solid none; border-color: rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0) currentColor; padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);">
<div class="rvParagraph pNormal" style="font-size: 13px;"></div>
</td>
<td style="border-width: 1px medium 1px 1px; border-style: solid none solid solid; border-color: rgb(0, 0, 0) currentColor rgb(0, 0, 0) rgb(0, 0, 0); padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);">
<div class="rvParagraph pNormal_24" style="font-size: 13px;"><span class="eqLabel fNormal" id="Y2" style="background-color: rgba(0, 0, 0, 0) !important;" aria-label="20" widgetId="Y2"><span class="eqAccessibleLabel">20</span><span class="eqDocument" role="presentation" aria-hidden="true"><span class="txtNum"><span>2</span><span>0</span></span>
</span>
</span>
</div>
</td>
<td style="border-width: 1px 1px 1px medium; border-style: solid solid solid none; border-color: rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0) currentColor; padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);">
<div class="rvParagraph pNormal" style="font-size: 13px;"></div>
</td>
</tr>
<tr>
<td style="border-width: 1px medium 1px 1px; border-style: solid none solid solid; border-color: rgb(0, 0, 0) currentColor rgb(0, 0, 0) rgb(0, 0, 0); padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);">
<div class="rvParagraph pNormal" style="font-size: 13px;"><span class="rvTxt fNormal"><span class="forcedSpace"> </span><span class="forcedSpace"> </span>Price</span>
</div>
</td>
<td style="border-width: 1px medium 1px 1px; border-style: solid none solid solid; border-color: rgb(0, 0, 0) currentColor rgb(0, 0, 0) rgb(0, 0, 0); padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);">
<div class="rvParagraph pNormal_24" style="font-size: 13px;"><span class="rvTxt fNormal"><span class="wbr">​</span><span class="nowrap">?</span></span>
</div>
</td>
<td style="border-width: 1px 1px 1px medium; border-style: solid solid solid none; border-color: rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0) currentColor; padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);">
<div class="rvParagraph pNormal" style="font-size: 13px;"></div>
</td>
<td style="border-width: 1px medium 1px 1px; border-style: solid none solid solid; border-color: rgb(0, 0, 0) currentColor rgb(0, 0, 0) rgb(0, 0, 0); padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);">
<div class="rvParagraph pNormal_24" style="font-size: 13px;">
<div class="nowrap"><span class="rvTxt fNormal"><span class="wbr">​</span><span class="nowrap">$</span></span><span class="eqLabel fNormal" id="BP2" style="background-color: rgba(0, 0, 0, 0) !important;" aria-label="2 comma 249.46" widgetId="BP2"><span class="eqAccessibleLabel">2 comma 249.46</span>
<span
class="eqDocument" role="presentation" aria-hidden="true"><span class="txtNum"><span>2</span></span><span><span>,</span></span><span class="txtNum"><span>2</span><span>4</span><span>9</span><span>.</span><span>4</span><span>6</span></span>
</span>
</span>
</div>
</div>
</td>
<td style="border-width: 1px 1px 1px medium; border-style: solid solid solid none; border-color: rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0) currentColor; padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);">
<div class="rvParagraph pNormal" style="font-size: 13px;"></div>
</td>
</tr>
</tbody>
</table>




Answer

According to my observation this is a browser issue and could solve by changing line-height.The current line-height is 1.25 and issue occurs only for values which can not be divided exactly by 2 . (eg: 1.23,1.25,1.27).

Comments