Horizontal nav placement issue

Hi all,

I’m having a bit of a spot with my horizontal nav. When you bump up the font size of the browser, you’ll see that the nav will slide out of place.

I tried giving it a AP (with a RP on the wrapper to establish a new containing block) but no luck. What are my tired eyes and over cooked brain missing?


Works like a charm Erik. It’s a direction i hadn’t considered … i kept wrecking my brain over using relative measures instead of px to place the nav bottom :slight_smile:

Still haven’t tried Ralph’s solution but it’s always nice to have some alternatives :smiley:

One thing you can do is change the navcontainer top margin to px instead of em.

#navcontainer {

But a better thing to do is create a separate header div, outside the wrapper, and have the background image on the header repeating, so that it can increase in size vertically.

Hi Ralph,

px are no option being the whole page liquid. The other solution seems indeed better … gonna give it a try 2morrow :slight_smile:

To align the flexible height nav with the background bottom when font-size changes, you want the nav bottom to stay at a set pixel length from top and not allow it to grow/shrink its height downwards.

The background height is 152px. The nav height is the total of current line-height plus padding and bottom border.

To place nav-bottom at the 152px length from page-top: Give the navcontainer a top margin of that length reduced by its thickness of padding and bottom border. Then pull the nav list up by its line-height. Also give the links an inline-block display to get the padding applied and for cross-browser consistency also set a line-height value.

#navcontainer {
[COLOR="Red"]/*[/COLOR]	margin-top : 8em; [COLOR="Red"]*/
	margin-top :149px;
	line-height :1.2em;[/COLOR]
#navcontainer ul {
[COLOR="Red"]	margin-top :-1.2em;[/COLOR]
   white-space : nowrap;
#navcontainer ul li a {
   background : #c2c2e0;
   padding : 1px 1.875em 1px 1.875em;
   color : #484500;
   text-decoration : none;
   border-bottom : 1px solid #565656;
   border-right : 1px solid #565656;
   position : relative;
[COLOR="Red"]	display :inline-block;[/COLOR]

But I think Ralph gave you the best fitted solution here. :slight_smile: