a small css request

May 21, 2012 at 4:48 PM

When I hover the toolbar it expands by a few pixels, which causes the textarea below to "bounce".  Can anyone point me to the relevant element in the css?  I think adding a few pixels to make the default size of the toolbar taller will eliminate the bounce.

May 21, 2012 at 6:35 PM

I figured this out.  

The issue was the ul li:hover style was creating a border, which did not exist in ul li

   div.jHtmlArea .ToolBar ul li {... no border... etc...)

   div.jHtmlArea .ToolBar ul li:hover { border: solid 1px #ccc;... etc...}

The fix was to add a transparent border to the ul li.  This 'reserves' the space and does not adversely impact the design.  

   div.jHtmlArea .ToolBar ul li {border: solid 1px transparent;... etc...)

I tested the solution in Chrome v19, IE v9, FF v11, and Safari v5.1.7 and it behaves the same across all of them.