SO Careers job search query keywords, options messing up sorting nav-tab alignment

Question

After fixing the job search results alignment and overlap issue on the sort navigation tabs, now the job search query 'keywords' and 'location' options are messing up the alignment of sort navigation tabs.

Here is how it looks upon searching for for "Node.js" (Keyword) and "San Francisco" (Location) along with an option i.e. "offer visa sponsorship": (here is a query link - currently I'm on 'most recent' sort tab)

And, here is how it looks upon selecting the 'relevance' sort tab with the same job search query keywords and options

The alignment of the 'most recent' sort tab is shifted to the upper right corner. It should be horizontally aligned with the 'relevance' tab.

I can reproduce this in Chrome Ver. 45.0.2454.85 (64-bit), Firefox Ver. 40.0.3 and Safari Ver. 8.0.8 on my MacBook Pro Retina; OS X Yosemite Ver. 10.10.5

Answer 1

Thanks for catching this. When the header text is between 550px and about 680px, this disjointed layout appears. We have a fix coming soon which adjusts the CSS to account for this, while retaining the ability for the (last line of) header text to be vertically aligned with the tab labels (rather than be above the tabs).

Answer 2

Upon inspecting the element, I found out the CSS code and the property that was causing sort tab floating issue. Here are the possible solutions.

Fix #1: The search query result title h2 selector currently has a float: left; in its declaration block. Try either commenting out or set it to a none; value.

#index-hed h2 {
    border: 0;
    margin: 0;
    padding: 0;
    float: left; /* Set it to 'none;' or Comment out entirely */
}

Fix #2: As the search query results title h2 selector has given a float: left; (as shown above), if the title is shorter than the assigned content area, the 'most recent' sort tab jumps up into that available space. To fix this problem, add clear: both; to the tabNav class declaration block. This will clear the floats coming from either direction.

.tabNav {
    margin: 0;
    padding: 0;
    list-style-type: none;
    clear: both;  /* ADD THIS */
}

I would to share the screenshots taken after applying the above CSS code change:

Here I'm on 'most recent' sort tab:

On 'relevance' sort tab:

P.S.

If you notice, in the first screenshot, the 'most recent' sort tab shows a little extra gray underline to the right of it. This is an another issue and has been reported in a separate post.