Home/ Questions/Q 7734279
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T07:12:37+00:00

In the following HTML page, I have a div, which contains two spans (

  • 0

In the following HTML page, I have a div, which contains two spans (span1 and span2), the second of which contains a sub-span, span2a. The span1 contains text, as does the span2a. With this setup, the vertical alignment of the text differs, and I can’t work out why.

To complicate matters, there are style attributes on the span2 and span2a. I have no control over these, as they’re injected at runtime by the jQuery cycle plugin.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title> 
    <style type="text/css">
        body {margin: 0; padding: 0; font-family: arial; color: black;}
        .container { height: 30px; text-align: left; padding: 8px 15px 0 15px; background-color: #fee; border: 1px solid red;}
        .ticker { font-size: 12px; font-weight: bold; padding-top: 4px; float: left;}
        .ticker > span:first-child { background-color: #bfb; }
        .tickerscroll { display: inline-block; background-color: #bbf; }
    </style>
</head>
<body>
    <div class="container">
        <div class="ticker">
            <span class="span1">LABEL: </span>
            <span class="span2 tickerscroll" style="position: relative; width: 480px; height: 15px; overflow-x: hidden; overflow-y: hidden; ">
                <span class="span2a" style="position: absolute; top: 0px; opacity: 1; z-index: 3; left: 0px; ">The value (in a sub-span; note that Label is lower then this text)</span>
            </span>
        </div>
    </div>
    <div class="container">
        <div class="ticker">
            <span class="span1">LABEL: </span>
            <span class="span2 tickerscroll" style="position: relative; width: 480px; height: 15px; ">
                &nbsp;<span class="span2a" style="position: absolute; top: 0px; left: 0px; ">The value (this time, I've added a &amp;nbsp; outside this inner span)</span>
            </span>
        </div>
    </div>
    <div class="container">
        <div class="ticker">
            <span class="span1">LABEL: </span>
            <span class="span2 tickerscroll" style="position: relative; width: 480px; height: 15px; ">
                The value (this time, the inner span span2a is not present at all)
            </span>
        </div>
    </div>
</body>
</html>

As you can see from my code, I’ve added two variants which “fix” the issue:

  1. Add some text (any text, in my case I’ve added a non-breaking space) inside the span2 outside of span2a.
  2. Remove the sub-span altogether, and have the text just inside the second top-level span. However, this isn’t an option for me, as the presence of span2a is required to make the jQuery cycling work.

Is there a way to make the two pieces of text aligned the same without having to artifically throw a &nbsp; into span2? The solution cannot change the style attributes of any of the span elements, but can add CSS classes if necessary.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The vertical align is different because span tags are naturally inline elements, in your case you are modifying that behavior on your span2 class by creating a block-level element with your overflow:hidden property. You can fix it by defining your span1 class also as a block-level element with display:inline-block and simply aligning it to the top with the vertical-align:top property or floating it to the left:

    .span1 {
    display: inline-block;
    *display:inline; /* ie 7 fix */
    vertical-align: top;
}

    Or

    .span1 {
    float:left;
}
    • 0