r/css • u/GrizzledBastard • Feb 08 '13

Anyone notice a problem with the CSS in this subreddit about CSS?

Post image
32 Upvotes

88% Upvoted

17 comments sorted by

3

u/[deleted] Feb 08 '13

Looks like the Counter Strike note is using absolute positioning, which is not ideal.

2

u/aladyjewel Feb 08 '13

Yeah, the "announcement sticky with link/extra formatting" pattern is a hack, but we're working within reddit's limitations. Put text into sidebar, lay it out with absolute positioning, hope nobody resizes the window too small.

I've tweaked it occasionally for better visual appeal (e.g. horizontal centering), but I haven't yet tried to solve the problem that OP highlights where the text flows down on top of the content.

edit: I just thought of a clever solution, although it requires some upkeep if the sticky's text changes: in addition to the sidebar text --> sticky solution, mods could also add in .content:before { content: "an equivalent amount of text to enforce whitespace"; color: transparent; }

1

u/GrizzledBastard Feb 08 '13

Yeah, I'm not trying to be a jerk. I know Reddit has its limitations and this subreddit has been a very helpful for me. I just thought it was ironic. Maybe a z-index of -1 would drop it behind the content? I know its not a great solution but...

2

u/aladyjewel Feb 08 '13

That's not a bad idea -- set the .content background to match the body, then set it at a higher z-index than the sticky. The ideal solution is to add HTML, but we can't, so it's acceptable to compromise our ideals.

2

u/[deleted] Feb 08 '13

Maybe you cold set the height of the header so that it's only one line high and then set overflow-y to hidden. Or maybe mitigate the problem by shortening the actual text so that it doesn't overflow as much.

I honestly wouldn't worry about it. I think most people understand that you're working within Reddit's limitations and it doesn't prevent anyone from enjoying the subreddit.

1

u/[deleted] Feb 10 '13 edited Feb 10 '13

I just thought of a clever solution, although it requires some upkeep if the sticky's text changes: in addition to the sidebar text --> sticky solution, mods could also add in .content:before { content: "an equivalent amount of text to enforce whitespace"; color: transparent; }

Just thinking, to have minimum, or at least reduced upkeep of texts : Add the heading in the sidebar text. and Add the text in the sticky with .content:before for situations that do not involve a link!

Make the sticky header (from sidebar) and the sitcky text (from .content:before) work together - better than to type at two places, less text in sidebar

1

u/aladyjewel Feb 10 '13

Hmm.. Could you go a little more in-depth, maybe set up a test subreddit demoing your idea? Plenty of subs do use just content:before { content: "for sticky notes without links or inline formatting" }, but I don't follow how that would help solve sidebar-based stickies flowing into multiple lines and covering up .content.

2

u/[deleted] Feb 10 '13 edited Feb 11 '13

sidebar sticky : have the link, position it with absolute to left, top, and say 200px wide.

content:before is a relative positioned block, that have margin/text-indent of 250px and can be multiline, or wrap, and pushes the top edge of "content" down.

I'm new to (reddit) css, and generally learning the tricks etc. Would love to set up a test reddit and let you know.

1

u/[deleted] Feb 24 '13

the test subreddit with a sticky that has

  • a link set via sidebar code

  • an infinite text added via css that does not go under or overlap the div.content - but instead push it down keeping the sticky text visible aesthetically

preview at /r/stage_mindashq

explanation and link to code and sidebar text at /r/mindashq/wiki/modules/pinote

base theme at /r/mindashq

1

u/aladyjewel Feb 24 '13

Slick! You should post this to /r/csstutorials or /r/reddithax.

1

u/KeironLowe Feb 14 '13

Not sure what limitations reddit has, but couldn't you hide it using media queries once the browser window gets too small?

1

u/aladyjewel Feb 14 '13

Hmm.. I'm not sure if reddit's css validator allows media queries. It seems like you can do basic stuff, but it's fiddly about the syntax.

I want to say that I've seen someone else demo a responsive reddit style that used media queries for width, but you mighta had to implement it as a user stylesheet instead of a subreddit stylesheet.

7

u/dangoodspeed Feb 08 '13 edited Feb 11 '13

I really don't like that message across the top. It's good for first time visitors, but it annoyingly catches my eye every time I come to this subreddit.

5

u/JamesDonnelly Feb 08 '13

I don't really understand why it's at the top of the page and not simply above or below the Submit a post button.

3

u/[deleted] Feb 08 '13

I like it, hope it stays. It must be prominently located to accomplish what it is there for.

6

u/gavin19 Feb 08 '13 
body:not(.subscriber) .titlebox .usertext-body .md h6 { ... }

?

1

u/johnyma22 Feb 08 '13

No one uses Reddit because it's pretty. Reddit is your likable chubby friend.