18

I'm sure this is a very low priority bug, but as you can see here, it appears that <hr/>'s are not getting rendered in deleted answers (although, the extra vertical space still exists):

However, they do appear in the preview when editing a deleted answer:

Update: Zooming in all the way on my iPad 2 I can actually see a difference in the color. I guess this can be considered a bug/feature-request to make the horizontal rule color a bit darker (or lighter, whatever contrast works better, im no graphics expert), at least for deleted posts.

|improve this question
  • 4
    I don't know why people are downvoting this. It's still a CSS issue that warrants fixing IMO. – animuson♦ Sep 3 '12 at 21:35
  • 3
    Upvoting because I agree. It is very low priority. – Mr Lister Sep 3 '12 at 22:05
  • rgba(0,0,0,.13), imo. – canon Jan 22 '14 at 20:59
20

They do get rendered, they're just really hard to see on that background. Inside a normal post, a horizontal rule has the color #DDD on a background #E3D9D9 (very hard to tell the difference). Inside the preview, the color of the horizontal rule is actually a darker #AAA (for some reason), which has better contrast on the red-grey background. It is there, just not very visible. I'm a tad confused why they're using two different colors for them, though.

Can you see the difference?

Perhaps this will make it easier to see how close together the colors are:

Side by side

I've drawn a single 1px line through both sides using the other side's color. Can you see it? ^_^

|improve this answer
  • Ahh, im on my ipad so i couldnt check the page source, but this makes sense. – chown Sep 3 '12 at 20:42
  • 1
    +1 for freehand circle – toniedzwiedz Sep 3 '12 at 20:46
  • 6
    As far is my monitor is concerned, you're circling nothing. I'll take your word for it. – Matt Sep 3 '12 at 20:49
  • @Matt You Sir are in need of a new monitor. Use a color picker or view a deleted answer and view source. There's a wide bar and it's so #DDD it hurts my eyes ;) – toniedzwiedz Sep 3 '12 at 20:53
  • 2
    Wow, that contrast is worse than I thought - I wasn't sure the line existed in the second picture. Then I zoomed in. It's real, people. – Ry- Sep 4 '12 at 4:03
  • The <hr> elements of a post body have the background colors overridden from the normal darker shade to a lighter one, perhaps so they don't stand out too much for a normal post. When the post is deleted, this shade is still applied but doesn't contrast well with the already darker background. This same overriding doesn't apply to edit previews as there's no additional css classes defined for that. – Jeff Mercado Sep 4 '12 at 4:19
  • 1
    NB Although I can see the different colour in the sample here, I cannot see it in the OP's image, even if I zoom in. – Mark Hurd Sep 4 '12 at 6:25
  • @MarkHurd: Probably just the image program he used compressing the color out. If I zoom into x1600, I can see a very faint line where you can tell the program combined the color with the red. The exact color I'm seeing is #E2DAD8. – animuson♦ Sep 4 '12 at 6:43
3

As animuson notes, the problem is that the #dddddd gray of the horizontal rules has almost exactly the same luminance as the #e3d9d9 pink of the deleted answer background.

Fixing this minor issue should be simple enough; either add an extra CSS rule for <hr>s in deleted answers:

.deleted-answer .post-text hr {
    background-color: #c3c3c3;
    color: #c3c3c3;
}

or possibly even change the existing style to work on any background:

.post-text hr {
    background-color: black;
    color: black;
    opacity: 0.125;
}

(Also, for the sake of consistency and least surprise, the CSS probably should have the same styles for .wmd-preview as for .post-text.)

Edit: While waiting for the SE devs to fix this, I have added the following CSS rules to the Stack Overflow Unofficial Patch, a collection of client-side CSS and JavaScript fixes packaged as a GreaseMonkey-style user script:

.wmd-preview hr {
     background-color: #ddd; color: #ddd;
}
.deleted-answer .post-text hr,
.deleted-answer .wmd-preview hr {
     background-color: #c3c3c3; color: #c3c3c3;
}

If you're using a compatible browser (Firefox, Chrome, Opera, possibly Safari and others, but unfortunately not IE or most mobile browsers), please give it a try!

|improve this answer

You must log in to answer this question.

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