14

When you vote 35 times in a day and you only have five votes left, you start getting a warning popup that you are almost at your limit. When this warning appears in the same place as the tags, part of the tags shows through it.

This screen shot was taken on webmasters.

This is also a problem on Web Applications: CSS bleed-thru on tags:

web applications

and Tags element overlaps notification:

web applications

This also happens on https://gaming.stackexchange.com/ as described here. Here is a video of it happening.

It is also happening on the meta sites associated with the sites that have the problem. For example, here is web apps meta site:

web apps meta bleed through

This a minor annoyance that has been around for at least a couple years.

  • That would be specific to webmasters (and perhaps some other sites that styled the tags similarly). The culprit is z-index:1 found in the :before rule. – 3ventic Nov 6 '14 at 12:15
  • I edited the question to incorporate some of the additional information from these comments. – Stephen Ostermiller Nov 6 '14 at 15:06
  • Hey thanks for the video link – 54D Dec 18 '14 at 11:55
  • 2
    We are currently updating the base CSS of all four of these sites. Once we've finished with the updates. These issues should be resolved. – Kurtis Beavers Feb 20 '15 at 13:23
  • Thank you! I see this is fixed on webmasters already. – Stephen Ostermiller Feb 20 '15 at 13:46
  • This is apparently still happening at Web Apps: Phantom triangles on downvote warning – ale Feb 26 '15 at 1:05
6
+500

You have caught my attention on this one. A fix has been pushed and will build out soon. I also want you to know that our design team has been hard at work at converting all of our .less files to a consistent and uniform layout which will solve most of these issues in the future. Thanks for the report and we'll keep you posted on the status of the conversion.

  • Thanks. It looks like this has the z-index rules have been removed from all the tag CSS now. – Stephen Ostermiller Mar 7 '15 at 1:17
  • 1
    It is still an issue on the three meta sites where you fixed it. Can you make do the same fix for the meta sites? – Stephen Ostermiller Mar 7 '15 at 11:02
  • Looks like this has been "fixed" (at least on meta.gamedev) by adding a z-index: 2 !important style to the notification box, but the underlying bug (unnecessary z-indexes on the tags) is still there. – Ilmari Karonen Jun 23 '15 at 19:52
7

The problem is with the z-index:1; in the rule that causes tags to look tag shaped. In the case of the gaming site it is z-index:2;.

.post-tag:before {
    content: "";
    display: block;
    width: 0px;
    position: absolute;
    border-style: solid;
    border-width: 10px 6px 10px 0px;
    border-color: transparent #DEEFF6;
    left: -6px;
    z-index: 1;
    top: 0px;
}

Here is a script I wrote to determine which StackExchange sites have this problem:

#!/bin/sh

if [ ! -e stacksites.html ]
then
    curl -s http://stackexchange.com/sites > stacksites.html
fi   

sites=`grep noscript-link stacksites.html | sed -r 's|.*http\:\/\/||g;s/\.stackexchange.*//g;s/\.(com|net).*//g' | grep -v '\.'`

for site in $sites
do
    if [ ! -e $site.css ]
    then
        curl -s http://cdn.sstatic.net/$site/all.css > $site.css
        sleep 1
    fi
    beforetag=`grep -oE '\.post-tag\:before\{[^\}]+\}' $site.css`
    if echo "$beforetag" | grep -q 'z-index'
    then
        echo $site
    fi  
    if [ ! -e ${site}meta.css ]
    then
        curl -s http://cdn.sstatic.net/${site}meta/all.css > ${site}meta.css
        sleep 1
    fi
    beforetag=`grep -oE '\.post-tag\:before\{[^\}]+\}' ${site}meta.css`
    if echo "$beforetag" | grep -q 'z-index'
    then
        echo ${site}meta
    fi
done

It appears that only a few sites have this z-index rule in conjunction with tags:

  • webapps
  • webappsmeta
  • gaming
  • gamingmeta
  • webmasters
  • webmastersmeta
  • gamedev
  • gamedevmeta

The solution to this problem appears to be to simply remove the z-index CSS rule from this location. I commented it out using Firebug on the Webmasters site and it did not change how the page is displayed other than fixing this issue.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .