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

[the_shoshanna]

oh wow, THANK YOU.

[facetofcathy]

You are most welcome.