Code Snippet - Making the Navstrip fluid.

[facetofcathy]

Title: Fluid Navstrip
Credit to: n/a
Base style: All
Type: Code Snippet
Best resolution: Display widths of 20em and up
Tested in: Firefox, Chrome, Opera
Features: Cells and contents of the navstrip table wrap as required by the user's display.

This is a code snippet that will work on any layout/style (barring any conflicts with other styles applied to the navstrip). The purpose is to make the navstrip wrap at larger font sizes or smaller screen widths rather than triggering a scrollbar as it does normally.


Screepcaps of the code on my wide screen display, first at 16px font size and then at 32px. I have a minimum font of 14px, so users may see smaller text in the first example.






With a narrower display, the wrapping starts at smaller font sizes.


The content of each cell in the navstrip table wraps as well, and you can get below a 20em display width without any scrollbars. There is padding added, a font size in ems, and a generous line-height. The result has a little more space around the log out button, which may help with accidental log outs for some users.

There is a 1px bit of visible body background colour at the right, left and bottom edges some of the time in all tested browsers, but I see that with my background image as well.

This code should work correctly in all browsers except IE7 and lower.

Padding, font-size and line-height can be customized at will.


Code for the fluid navstrip:

html body {
 padding-top: 0; 
 margin-top: 0;
  }

#lj_controlstrip {
  position: relative;
  height: auto;
  }

#lj_controlstrip td {
  display: inline-block;
  padding: 0.4045em 0.809em;
  white-space: normal;
  }

#lj_controlstrip td,
#lj_controlstrip a {
  font-size: .8em;
  line-height: 1.618em;
  }

#lj_controlstrip_userpic {
  vertical-align: middle;
  }

samjohnsson pointed me to the IE7 fix I couldn't find earlier. Adding zoom: 1; *display:inline; to #lj_controlstrip td should make IE7 display the inline-block correctly.

ETA: I've discovered that my style has a 1px border on body, so I've taken the -1px offset off this code, as it's not generally needed.

Comments

[facetofcathy]

IE7 is supper weird. Lot's of things are broken in it, so this might be it, who knows.

I guess what's going on then is that some styles are taking away the padding for the navstrip without allowing for the fact that some people use it. And then making elements positioned absolutely, which I'm not very fond of--too many chances for problems. That would be hard to fix.

And, I didn't know about that comm (there's so many for styles) so I've subbed to it now too, so thanks.