11

While adding tags to a question I asked, I noticed that the box that displays as you type in a tag was getting cut off. Also, the list of "Similar Questions" was overflowing down to the bottom of the page (where the links to different SE sites are). Here is a screenshot to better explain:

enter image description here

EDIT: I am using Firefox 32.0.2 on Windows 7, 64-bit.

  • What browser are you using for this. I'm seeing it in Chrome 37.0.2062.120. That sidebar locks to the top of the window no matter how far down you scroll. Happens with the "how to edit, how to format" too. Tested on main StackOverflow and it's occurring there as well. Probably needs to be submitted as a bug. – Bmo Sep 25 '14 at 13:45
  • 1
    +1: Same on Firefox 36.0, Windows 7 SP1 x64, 1280x1024, 100% zoom level, AdBlocker turned off. – Thomas Weller Feb 27 '15 at 22:25
5

The tag menu cutoff happens because the style sheet here on workplace.SE styles the #content element as overflow: hidden. Simply overriding that style with:

#content { overflow: visible }

is enough to fix it.

(However, I'm a bit worried that the overflow: hidden style may have been added for a reason, possibly to fix some other unrelated problem somewhere else. This needs a bit more testing.)

Update: OK, so there is a pretty obvious reason for the overflow: hidden; without it, the content area will not expand to contain all floated elements (like, say, the mainbar and the sidebar) inside it, causing the white background to cut off halfway through the page.

Fortunately, there's a simple fix: we just need to add a non-floating element at the end of the #content div, styled with clear: both. And even more conveniently, we can do this with pure CSS:

#content:after { content: ' '; display: block; height: 0; clear: both }

As for the sidebar extending into the footer, that's not really specific to this site; it happens on every SE site, but it just looks uglier here, because the sidebar here has a transparent background. Giving it a white background with:

#scroller { background: white; border-radius: 5px }

makes it slightly less ugly. (The border-radius is just a finishing touch, to make it fit better with the general rounded design here.)

I've added these styles to the devel branch of SOUP; unless further breakage shows up, or unless these bugs get properly fixed in the mean time, they'll be part of the next stable SOUP version, v1.30.

Here's what asking a question looks like to me with these fixes:

Screenshot

1

Oh the irony; I see the overlap problem on this post, in Firefox but not in Chrome.

Firefox:

screen shot

Chrome:

screen shot

You must log in to answer this question.

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