Our development box is running DNN v7.2.0.

 I'm trying to update some static JavaScript buttons we have; using mouse-over pictures.  I'm trying to update this to use CSS, HTML, etc.  I have something working properly, but I can't adjust the line-heights for the mouse-over text.

Anyone have any suggestions to get this working properly?  Thanks..

CSS:
#topbuttons {width:100%;}
    #buttons {width:150px; height:40px; text-align:center; display:table-cell; vertical-align:middle;}

    #homeButton {}
    #homeButton:hover {}

    #civilButton {}
    #topButtons #civilButton span#a {display:inline; }
    #topButtons #civilButton:hover span#a {display:none; }
    #topButtons #civilButton span#b {display:none; line-height:12px;}
    #topButtons #civilButton:hover span#b {display:inline; font-size:10px; line-height:12px;}

    #communicationsButton {}
    #topButtons #communicationsButton span#a {display:inline;}
    #topButtons #communicationsButton:hover span#a {display:none;}
    #topButtons #communicationsButton span#b {display:none;}
    #topButtons #communicationsButton:hover span#b {display:inline; font-size:10px;}
    
    #correctionsButton {}
    #topButtons #correctionsButton span#a {display:inline;}
    #topButtons #correctionsButton:hover span#a {display:none;}
    #topButtons #correctionsButton span#b {display:none;}
    #topButtons #correctionsButton:hover span#b {display:inline; font-size:10px;}
    
    #lawenforcementButton {}
    #topButtons #lawenforcementButton span#a {display:inline;}
    #topButtons #lawenforcementButton:hover span#a {display:none;}
    #topButtons #lawenforcementButton span#b {display:none;}
    #topButtons #lawenforcementButton:hover span#b {display:inline; font-size:6px;}

HTML Code:
<div id="topButtons">
    <div id="buttons">
        <a href="http://&lt;%=PortalSettings.PortalAlias.HTTPAlias%&gt;">
            <div id="homeButton">Home</div>
        </a>
    </div>
    <div id="buttons">
        <a href="http://&lt;%=PortalSettings.PortalAlias.HTTPAlias%&gt;">
            <div id="civilButton"><span id="a">Civil / Records / PIO</span><span id="b">Auxillary &amp; Volunteering / Sheriff's Land Sale/Forms</span></div>
        </a>
    </div>
    <div id="buttons">
        <a href="http://&lt;%=PortalSettings.PortalAlias.HTTPAlias%&gt;">
            <div id="communicationsButton"><span id="a">Communications</span><span id="b">Dispatch / 800 System / 9-1-1 / Radio Traffic</span></div>
        </a>
    </div>
    <div id="buttons">
        <a href="http://&lt;%=PortalSettings.PortalAlias.HTTPAlias%&gt;">
            <div id="correctionsButton"><span id="a">Corrections</span><span id="b">Jail / Chaplain Program / Medical Services / Kitchen</span></div>
        </a>
    </div>
    <div id="buttons">
        <a href="http://&lt;%=PortalSettings.PortalAlias.HTTPAlias%&gt;">
            <div id="lawenforcementButton"><span id="a">Law Enforcement</span><span id="b">Concealed Weapons / D.A.R.E. / Litering Complaints / Detective / Victim &amp; Court Services / K-9</span></div>
        </a>
    </div>
</div>