StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POForcing IE8 to rerender/repaint :before/:after pseudo elements
primarykey
Id
8703799
data
AcceptedAnswerId
8852418
AnswerCount
4
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2012-01-02T17:55:40.317
FavoriteCount
26
LastActivityDate
2015-07-09T04:33:52.743
LastEditDate
2012-01-03T02:12:59
LastEditorUserId
106224
OwnerUserId
652287
ParentId
0
PostTypeId
1
Score
51
ViewCount
20274
LastEditorDisplayName
text
Body
so I've been toying with this calendar-ish thingy for a bit: <ul> <li>Grid of divs (mimicking a table)</li> <li>Hovering over a table cell displays a tooltip with 2 icons each consisting of a div with :before and :after elements</li> <li>Icons change colour depending on colour of cell hovered and that of its previous sibling (cell's colour class is applied to the icon).</li> </ul> Stripped down fiddle: <a href="http://jsfiddle.net/e9PkA/1/" rel="noreferrer">http://jsfiddle.net/e9PkA/1/</a> This works fine in every browser but IE8 and below (IE lte 7 and I will never friends, but IE8 would be nice to have). IE8 notices the change of classNames and updates the divs' colour accordingly but completely ignores the colour changes implied by the :before and :after declarations, e.g.: <pre><code>.wbscal_icon_arrival:before { width: 12px; height: 4px; left: -8px; top: 6px; background-color: silver; } .wbscal_icon_arrival.wbscal_full:before { background-color: #ff0000 !important; } </code></pre> In the fiddle above, the :before/:after elements are coloured exactly once: the first time the tooltip is shown. In another version it would update everytime I'd move the mouse out of the "table" div, but not if the tooltip is hidden when hovering a "cell" div border. I've tried force-triggering repaints by adding/removing other classes to/from the element/its parents/the body, editing/accessing style attributes and whatnot so I guess it's not your average repaint problem. Is there a JS hack that fixes this and forces :before/:after to update?
Tags
<javascript><css><internet-explorer-8><pseudo-element>
Title
Forcing IE8 to rerender/repaint :before/:after pseudo elements
singulars
PostAcceptedAnswerId
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USBoltClock
UserOwnerUserId
1. USfdo
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. PL
 singulars
 LinkTypeLinkTypeId
 LTLinked
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 POForcing IE8 to rerender/repaint :before/:after pseudo elements
 UserUserId
 USBenjamin Parry
 VoteTypeVoteTypeId
 VTFavorite
2. VO
 singulars
 PostPostId
 POForcing IE8 to rerender/repaint :before/:after pseudo elements
 UserUserId
 USBenjamin Parry
 VoteTypeVoteTypeId
 VTFavorite
3. VO
 singulars
 PostPostId
 POForcing IE8 to rerender/repaint :before/:after pseudo elements
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.