How I Aligned my site's navigation menu using CSS

Posted over 9 years ago by Philip Ingram

I admit that i was having problems aligning the menu for this very site. What appeared to work in Safari wasn’t working in Firefox, and vice versa. I’m sure every web developer has experienced this phenomenon at one point in their career.

To the code…

I’m about to show you the CSS from the before and after. Please note that both versions work, but i am in favour of the after, obviously.

CSS code before.

Note: i had the image tag within the html code because i thought i’d use it as a clickable home button. For accessibility, i guess i could have added the ALT tag, but i think the cleaner look is to have a HOME link in your menu, as it ticks all the right boxes, imo.

Also, i received some weird behaviour from safari using the bottom tag for some reason. In Firefox it would appear normally but in Safari, the menu would diappear above the top of the browser, and the code would still be in view source, so i knew it was there. Really weird.

HTML:

	<div id=“header”>

		<div id=“menu_container”>

‘menus/menu’ %>

		</div >

	</div >

CSS:

/* header styling */

#header {

	height: 110px;

}

/* menu container */

#menu_container {

	float: right;

	bottom: 10px;

	right: 20px;

	position: relative;

}

CSS code AFTER.

Some minor tweaks made this menu manageable. I moved the image to the CSS background element and I used TOP instead of BOTTOM.
HTML:

	<div id=“header”>

		<div id=“menu_container”>

			 ‘menus/menu’ %>

		</div>

	</div>

CSS:

/* header styling */

#header {

	background: #fff url(/images/IIE_Logo_sm.jpg) no-repeat;

	height: 110px;

}

/* menu container */

#menu_container {

	float: right;

	top: 45px;

	right: 20px;

	position: relative;

}

Moral of this story

While i didn’t move mountains here, i did clean up some code that was bugging me, the code doesn’t feel hackish anymore and it should work in the browsers i care about.

• Whenever possible move image tags to the background style in your CSS. When navigating around that image_tag in the original solution, i ran into all kinds of problems fiddling with some minutia to just get it to fit. pain in the ass.
• TOP is a cool tag to use in the right settings and indenting from the right 20px was killer too, i think.

Comments