unable to get multiple values for text-decoration shown

Question

Something weird - I'm trying to get a simpel HTML file to show both underline & overline (but it also happens on the "line-through" value) for a text (writing this in a separate CSS file) but on any of the browsers I'm checking it doesn't work (I've installed Chrome, Firefox, Opera, IE and Safari - all of them are probably the latest versions so nothing like Chrome version 6...).

When I'm deleting the other values and specify only one - it works but when I add another - all of the effects of the text-decoration style disappear.

Does anyone know about an issue of this style ?

thanks in advance.

p.s. I'm putting those values on the same line, e.g. :

h1, h2 {
    text-decoration: underline, overline, line-through;
}

Ironist

Answer 1

You need to seperate them with a space:

h1, h2 {
        text-decoration: underline overline line-through;
    }

<h1> FUNNY </h1>

Generable

The relevant spec is w3.org/TR/CSS2/text.html#lining-striking-props where the “||” notation means that one or more of the values may appear, in any order, separated by whitespace (only). – Bankhead

Answer 2

        Agreed with nadavage: I played around too and found out: Commas in CSS are for if the font or value is not supported. So if I write:

    font-family: 'Lorem Ipsum', cursive;

        If "Lorem Ipsum" is not a name of a registered font on the OS or imported in, it would show the "cursive" font, supported on most browsers. In your case, to do all of them at once you would put space, but some properties that take multiple paremeters, such as

    text-shadow: 2px 2px rgba(0, 0, 0, 0.4);

would expect only one value for each parameter- Most browsers can decipher what values are for which parameter and what to use.

Hope this helps!

Libove

Answer 3

I've never seen a spec for text-decoration accepting multiple values. See here http://www.w3.org/TR/CSS2/text.html#propdef-text-decoration (Learn something new everyday!)

You could possibly implement in a different way by doing the following.

HTML

<p>Some text here and then <span class="underover">underline and overline</span> and some more text here.</p>

CSS

.underover {
  border-width: 1px 0;
  border-style: solid;
  border-color: blue blue red red;
}

See this codepen for an example: http://codepen.io/keithwyland/pen/Eagbz

Grimsby

imagine my surprise when i tried two values and it worked! disregard! – Grimsby