kevindougans 2 Junior Poster

Hi guys,

I've got a bug I can't figure out on my navigation and I was wondering if anyone can help:

As you'll see on that page the navigation bar at the top has a little color changing effect. It works great until you hit refresh on the page - and then the "selected" navigation seems to lose its place by forgetting a margin or something but I can't figure out where.

The navigation bar uses a bit of jQuery but that seems to work fine, until refresh so I'm sure it's a CSS bug.

Anyone got any pointers?

The Jquery code form it is:

var $el, leftPos, newWidth;
		        $mainNav2 = $("#example-two");
		    $mainNav2.append("<li id='magic-line-two'></li>");
		    var $magicLineTwo = $("#magic-line-two");
		        .css("left", $(".current_page_item_two a").position().left)
		        .data("origLeft", $(".current_page_item_two a").position().left)
		        .data("origWidth", $magicLineTwo.width())
		        .data("origColor", $(".current_page_item_two a").attr("rel"));
		    $("#example-two a").hover(function() {
		        $el = $(this);
		        leftPos = $el.position().left;
		        newWidth = $el.parent().width();
		            left: leftPos,
		            width: newWidth,
		            backgroundColor: $el.attr("rel")
		    }, function() {
		            left: $"origLeft"),
		            width: $"origWidth"),
		            backgroundColor: $"origColor")
		    /* Kick IE into gear */
		    $(".current_page_item_two a").mouseenter();

And the CSS is:

.nav-wrap { 
	margin: 50px auto; 
	background-color: rgba(0,0,0,0.6); 
	border-top:    2px solid white; 
	border-bottom: 2px solid white; 

/* Clearfix */
.group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
*:first-child+html .group { zoom: 1; } /* IE7 */

#magic-line { 
	position: absolute;
	bottom: -2px; 
	left: 0; 
	width: 100px; 
	height: 2px; 
	background: #fe4902;
.current_page_item a { 
	color: white !important; 
.ie6 #example-one li, .ie7 #example-one li { 
	display: inline; 
.ie6 #magic-line {
	bottom: -3px;

/* Example Two */
#example-two { margin: 0 auto; list-style: none; padding: 6px 0 4px; position: relative; width: 960px; }
#example-two li { float: left; padding-top: 10px; padding-bottom: 10px; }
#example-two li a { position: relative; z-index: 200; color: #eeeeee; font-size: 14px; padding-left: 20px; padding-right: 20px; padding-top:15px; padding-bottom:15px; text-decoration: none;  }
#example-two #magic-line-two { position: absolute; float: none; padding: 6px 0 4px; top: 0; left: 0; width: 100px; background: rgba(220, 133, 5, 0.9); z-index: 100; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

#example-two li a:hover { 
	color: white; 

.current_page_item_two a { 
	color: white !important; 
.ie6 #example-two li, .ie7 #example-two li {
	display: inline;

Thanks guys!