ie8 "content: attr(foo);" acting weird

Question

I have the following css code:

.steps .step:before {
  content: attr(data-number);
  /* IE8? */
  display: block;
  width: 60px;
  height: 60px;
  font-size: 36px;
  font-weight: 300;
  line-height: 60px;
  text-align: center;
  color: #18bfa3;
  border: 1px solid #18bfa3;
  border-radius: 55%;
  position: absolute;
  left: -70px;
}

which is then applied to a div:

<div class="steps">
 <div class="step animate" data-number="1">
  Some content
 </div>
 <div class="step animate" data-number="2">
  Some content
 </div>
</div>

Everything works fine in modern browsers, but in IE8 i get the :before elements with borders and everything, but no content (ie the number) and if I inspect the element, the css shows content: attr(data-number); FONT-WEIGHT: 300 all on the same line, as is the line-brake wasn't there or something. see attached screenshot.

editor screenshot

Any idea why this is happening and how can I stop it?

EDIT:

This is the rendered layout. Notice the empty rectangles, that is where the numbers should be and the rectangle is in fact the rendered :before pseudo-element.

layout screenshot

What about `::before` instead of `:before`. Might also be that IE8 doesn't support the use of `attr` in `content`. — putvande, Aug 12 '14 at 13:51
@putvande IE8 does not support `::pseudo-elements` with two colons. It does support various `attr` values. — TylerH, Aug 12 '14 at 14:05
@Paulie_D doctype is html5, all the code is valid, this is the only thing giving me an issue. — Reddo, Aug 13 '14 at 06:23

score 1 · Answer 1 · edited May 23 '17 at 11:43

1

It's tough to test this in IE8 since code editors don't work until IE9, but are you sure it's not because you have left: -70px; declared? All the values you are using are valid and supported in IE8 (it supports :before, it supports content:, it supports attr(), and it supports custom data- attributes). See this SO answer.

The default positioning for something with position: absolute; is auto unless you set a top, right, left, or bottom. You've only declared a left value, of -70px;. This is moving your meta content 70px to the left of the left-edge of the document window, thus they aren't visible.

If you want them to appear, you need to remove this value, or change it to left: 70px; instead.

edited May 23 '17 at 11:43

Community

1
1

answered Aug 12 '14 at 14:12

TylerH

20,799
66
75
101

The default positioning is actually the static position. All the offsets are auto, not zero. See http://stackoverflow.com/questions/19968979/what-are-the-default-top-left-botton-or-right-values-when-positionabsolute-is/19969046#19969046 – BoltClock Aug 12 '14 at 14:28
I have the appropiate margin for the containing element, the actual pseudo-element's borders are visible, it just doesn't show the the number defined in the data-number attr. If I remove the uppercase style definition from within the f12 developer tools, the number shows up. Hope this makes sense. I could attach a screenshot if needed. – Reddo Aug 13 '14 at 06:20
@Reddo Ahh, thanks for the screenshot. Interesting... have you tried adding single quotes to 'data-number'? I don't really know too terribly much about the attr() property but I have seen some cases where you use it as a selector and use `['data-value']` instead of `(data-value)`. – TylerH Aug 13 '14 at 13:05
@TylerH I'll give that a try and come back here :) – Reddo Aug 14 '14 at 06:39
Tried using `content: attr['data-number'];` but it failed even in the developer tools. I don't think this should work for assigning the content value. This works only if used as selector like `a[data-foo="bar"] {}` – Reddo Aug 14 '14 at 07:36

ie8 "content: attr(foo);" acting weird

1 Answers1