timothy.s.lau timothy.s.lau - 6 months ago 16
CSS Question

Writing a statistics formula with a CSS popup

I'm trying to combine the formula I have formatted just right with the CSS popup I have set up just right, below. By combined, I mean I want the popup to show up on the formula just as on the text, but retaining the formula's formatting. I'm using CSS styling for compatibility with Google sites.

Any help would be greatly appreciated.

<!DOCTYPE html>
<html>
<head>
<title>document title</title>
<style type="text/css">
a.info
{
position:relative;
z-index:24; background-color:#ddd;
color:#000;
text-decoration:none
}

a.info:hover {z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span
{
display:block;
position:absolute;
top:2em; left:2em; width:10em;
border:2px solid #0cf;
background-color:#555; color:#fff;
}
</style>
</head>
<body>
<a href="http://www.bylau.com" style="text-decoration:none;">
<font face="times new roman, serif" size="5">
SS<sub>T</sub>&nbsp;=&nbsp;∑ (<i>x</i><sub><i>i&nbsp;</i></sub>− <i>x̄</i><sub>grand</sub>)<sup>2</sup>
</font>
</a>
<br>
<br>
<a href="www.bylau.com" title="squared">
<span style="text-decoration:overline;">
<span class="texhtml">
<var>
z
</var>
<!--can't get bar over z without finding special character or having underline-->
</span>
</span>
<br>
<br>
</a>
The<a class="info" href="http://www.bylau.com"> SS<sub>T </sub><span>variable explanation</span></a>formula should be here.
</body>

</html>

Answer

Simply use white-space: nowrap; for a.info:hover span

Demo

Note: <font> tag is deprecated, use CSS to give size, color, font-family to your elements

Markup

<!DOCTYPE html>
<html>
    <head>
        <title>document title</title>
        <style type="text/css">
a.info {
    position:relative;
    z-index:24; background-color:#ddd;
    color:#000;
    text-decoration:none
}

a.info:hover {z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span {
    display:block;
    position:absolute;
    top:2em; left:2em; width:10em;
    border:2px solid #0cf;
    background-color:#555; color:#fff;
    white-space: nowrap; <-------- Here
}
</style>
</head>
    <body>
        <a href="http://www.bylau.com" style="text-decoration:none;">
            <font face="times new roman, serif" size="5">
                SS<sub>T</sub>&nbsp;=&nbsp;∑ (<i>x</i><sub><i>i&nbsp;</i></sub>− <i>x̄</i><sub>grand</sub>)<sup>2</sup>
            </font>
        </a>
        <br>
        <br>
        <a href="www.bylau.com" title="squared">
            <span style="text-decoration:overline;">
                <span class="texhtml">
                    <var>
                        z
                    </var>
                    <!--can't get bar over z without finding special character or having underline-->
                </span>
            </span>
        <br>
        <br>    
        </a>
        The<a class="info" href="http://www.bylau.com"> SS<sub>T </sub><span><font face="times new roman, serif" size="5">
                SS<sub>T</sub>&nbsp;=&nbsp;∑ (<i>x</i><sub><i>i&nbsp;</i></sub>− <i>x̄</i><sub>grand</sub>)<sup>2</sup>
            </font></span></a>formula should be here.
    </body>

</html>
Comments