Css / Html% Mystery White Space Issue

I have been working on an updated static version of a website for a client - all tested and works fine - but this was then merged into our developers .net build - the rendered html

Solution 1:

If you do a View Source, you can see the issue is that the compiled version has a blank line between the css-select-moz spans.

Compare this in your static version:

<divclass="margFt"><spanclass='css-select-moz  margFt wshare '><selectid="test"class="tst"name="test"><optionvalue="SelectBoxIt is:"selected>Width:</option><optionvalue="a jQuery Plugin">a jQuery Plugin</option><optionvalue="a Select Box Replacement">a Select Box Replacement</option><optionvalue="a Stateful UI Widget">a Stateful UI Widget</option></select></span><spanclass='css-select-moz  margFt wshare'><selectid="test"class="tst"name="test"><optionvalue="SelectBoxIt is:"selected>Profile:</option><optionvalue="a jQuery Plugin">a jQuery Plugin</option><optionvalue="a Select Box Replacement">a Select Box Replacement</option><optionvalue="a Stateful UI Widget">a Stateful UI Widget</option></select></span></div>

To your generated version:

<divclass="margFt"><spanclass='css-select-moz  margFt wshare '><selectid="tyre-width"data-val="true"data-val-required="The WidthUID field is required."class="tst"name="tyre-width"></select></span><spanclass='css-select-moz  margFt wshare'><selectid="tyre-profile"data-val="true"data-val-required="The ProfileUID field is required."class="tst"name="tyre-profile"></select></span></div>

This is a known problem with whitespace between display:inline-block elements. There are some workarounds shown described in this article and associated comment. I quickly tried the font-size:0 trick and that did fix it, so this must be the issue.

UPDATE

Just playing again, rather than setting .css-display-moz to display:inline:block;, setting it to float:left; renders them much better - they just move slightly to the left but the vertical spacing isn't an issue. This may be something to consider.

Solution 2:

.rhWrap.regForm {
    margin-top: 17px;
    display: initial;
}

it is trying to set display:block; just fix with initial