Search code examples
positionhtmltext-align

Text-align behaves differently when a span is blocked+absolutely-positioned

I've done some searching but couldn't find the answer I was looking for. If it's a duplicate, please let me where I should be heading for.

Anyways, I've been having trouble figuring out the inheritance (if any) behavior of spans, and Firefox and Chrome seems to differ once I start making different combinations of styles in the spans.

Specifically, (see below for more details) I have a regular inline, absolutely-positioned, text-centered span container that contains two more span, one inline-blocked, absolutely-positioned (class="arrow") and one blocked span (class="text"). In Chrome, the arrow-class span left-aligns inside container. However, in FF11, the arrow-class span center-aligns inside the container.

So, my questions are:

  1. Why does the arrow-class span behave differently in Chrome and FF11 (FF7 has the Chrome behavior for some reason)?
  2. Which browser is showing the "right" span inheritance properties?
  3. I can make both browser behave the same way by making text-class span be an inline-block, but I don't see why that would help...
  4. Since text-class span is a blocked span, shouldn't it cause the container-class span (and its borders) to be 100% width? Right now, the container class collapses around the text-class span. (This probably goes in a separate thread, but it'll be nice if I can get a quick answer for this).

DisplayProps.html:

<html>
    <head>
        <link type="text/css" rel="stylesheet" href="displayProps.css">
    </head>
    <span class="container">
        <span class="arrow"></span>
        <span class="text">Why is the arrow different?</span>
    </span>
</html>

displayProps.css:

span.container {
    display: inline;
    position: absolute;
    border: 2px solid; 
    text-align:center;
}

span.container span.arrow { 
    border-color: transparent black transparent transparent;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    display: inline-block;
    position: absolute;
}

span.container span.text {
    display: block;
}

Help appreciated, thanks!

Solution

  • The arrow has position absolute, but you haven't defined a top/botton- and a left/right-value. So the browsers take their default values, which are different.

    Add e.g. following code and they should have the same position:

    span.container span.arrow {
    ...
    top: 10px;
    left: 10px;
}

    Also see this example.

    === UPDATE ===

    If you change the container to position relative and display block, the width will be 100%.

    span.container {
    display: block;
    position: relative;
    ...
}

    See the updated example.

    P.s.: use position absolute only if you define distances.