0

I've looked far and wide and have been unable to find an explanation to this behavior.

Why does HTML5's data- attribute override my CSS content property on a common element?

So for example, I have the following element defined:

<th data-module-field="name" class="sortable sorted desc" data-bind="click:sort">Name</th>

And my CSS class is as follows:

.sortable.sorted.desc:after {
    content: url(../Images/desc.gif);
    margin-left: 3px;
}

With the data-module-field attribute set, the content image defined in the CSS class doesn't show up. However, if I remove the data- portion of this attribute (as follows), the content image displays correctly.

<th module-field="name" class="sortable sorted desc" data-bind="click:sort">Name</th>

Can anyone explain why this behavior occurs?

KodeKreachor
  • 8,852
  • 10
  • 47
  • 64
  • 1
    I tried but it seems that it works fine and image show up with data-module-field attribute http://jsfiddle.net/wS82W/1/ may be something else causing issue – Pravin W Apr 25 '14 at 15:02
  • 4
    Data attributes should never directly affect CSS generated content. My guess is that there is another CSS rule depending on an `[data-module-field]` attribute selector that's overriding or otherwise preventing your generated content from displaying. See if your browser's Web inspector has any leads. – BoltClock Apr 25 '14 at 15:04

0 Answers0