<span class="epi-cmsButton"><input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Check" name="ctl00$FullRegion$MainRegion$SendButton" value="Add" title="Add page to normal queue for translation or proofreading" onmouseover="EPi.ToolButton.MouseDownHandler(this)" onmouseout="EPi.ToolButton.ResetMouseDownHandler(this)" type="submit"></span>
<span class="epi-cmsButton"><img src="/I2/TS/Images/Express.png" alt=""><input class=" epi-cmsButton-tools epi-cmsButton-Check" name="ctl00$FullRegion$MainRegion$SendExpressButton" id="ctl00_FullRegion_MainRegion_SendExpressButton" value="Add to Express Queue" title="Add page to express queue for translation or proofreading" onmouseover="EPi.ToolButton.MouseDownHandler(this)" onmouseout="EPi.ToolButton.ResetMouseDownHandler(this)" type="button"></span>
Workaround: Clear SkinID fixes the problem.
Suggestion: Setting ImageUrl should prevent side effects from SkinID by removing unwanted css-classes.
Defect #2: Broken vertical alignment when ImageUrl is use
<span class="epi-cmsButton"><input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Check" name="ctl00$FullRegion$MainRegion$SendButton" value="Add" title="Add page to normal queue for translation or proofreading" onmouseover="EPi.ToolButton.MouseDownHandler(this)" onmouseout="EPi.ToolButton.ResetMouseDownHandler(this)" type="submit"></span>
<span class="epi-cmsButton"><img src="/I2/TS/Images/Express.png" alt=""><input name="ctl00$FullRegion$MainRegion$SendExpressButton" id="ctl00_FullRegion_MainRegion_SendExpressButton" value="Add to Express Queue" title="Add page to express queue for translation or proofreading" onmouseout="EPi.ToolButton.ResetMouseDownHandler(this)" type="button"></span>
Sugestion: Set style “vertical-align: bottom;” on img-tag to get alignment to work.
There is a styling problem with EPiServerUI:ToolButton (in editor plugins) when you use ImageUrl property that did not exist in EPi5.
#1: Set both ImageUrl and SkinID will render broken ToolButton.
<EPiServerUI:ToolButton ID="SendExpressButton" runat="server" Text="<%$ Resources: EPiServer, i2.ts.translate.sendexpress %>"
ToolTip="<%$ Resources: EPiServer, i2.ts.translate.sendexpresstooltip%>" SkinID="Check" />
Generated Markup:
<span class="epi-cmsButton"><input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Check" name="ctl00$FullRegion$MainRegion$SendButton" value="Add" title="Add page to normal queue for translation or proofreading" onmouseover="EPi.ToolButton.MouseDownHandler(this)" onmouseout="EPi.ToolButton.ResetMouseDownHandler(this)" type="submit"></span>
<span class="epi-cmsButton"><img src="/I2/TS/Images/Express.png" alt=""><input class=" epi-cmsButton-tools epi-cmsButton-Check" name="ctl00$FullRegion$MainRegion$SendExpressButton" id="ctl00_FullRegion_MainRegion_SendExpressButton" value="Add to Express Queue" title="Add page to express queue for translation or proofreading" onmouseover="EPi.ToolButton.MouseDownHandler(this)" onmouseout="EPi.ToolButton.ResetMouseDownHandler(this)" type="button"></span>
Workaround: Clear SkinID fixes the problem.
Suggestion: Setting ImageUrl should prevent side effects from SkinID by removing unwanted css-classes.
Defect #2: Broken vertical alignment when ImageUrl is use
<EPiServerUI:ToolButton ID="SendExpressButton" runat="server" Text="<%$ Resources: EPiServer, i2.ts.translate.sendexpress %>"
ToolTip="<%$ Resources: EPiServer, i2.ts.translate.sendexpresstooltip%>" />
Generated Markup:
<span class="epi-cmsButton"><input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Check" name="ctl00$FullRegion$MainRegion$SendButton" value="Add" title="Add page to normal queue for translation or proofreading" onmouseover="EPi.ToolButton.MouseDownHandler(this)" onmouseout="EPi.ToolButton.ResetMouseDownHandler(this)" type="submit"></span>
<span class="epi-cmsButton"><img src="/I2/TS/Images/Express.png" alt=""><input name="ctl00$FullRegion$MainRegion$SendExpressButton" id="ctl00_FullRegion_MainRegion_SendExpressButton" value="Add to Express Queue" title="Add page to express queue for translation or proofreading" onmouseout="EPi.ToolButton.ResetMouseDownHandler(this)" type="button"></span>
Sugestion: Set style “vertical-align: bottom;” on img-tag to get alignment to work.