Last post about this particular website, I promise!

My client wants her custom navbar to be vertically aligned with the "wood edge" on this page's background image. I've placed the code for the header image (beachippelli) and code for the custom menu in catalyst_hook_header in my custom hooks in my Catalyst Wordpress Template. The background image is specific to this page and has been added to the Custom CSS.

The problem I'm seeing is that my layout works in Firefox and Explorer but looks bunk in Chrome. What CSS code do I need to add to make my page layout the same on all browers? Or is this impossible? I screwed around with clearfix and still couldn't get it to work.

I hate to tell my client that I can't figure this out. I feel that unacceptable on my part. Any help would be greatly appreciated.

http://beachiappelli.com/

Code:

Code:
<div class="clearfix"><img class="music-header" src="http://beachiappelli.com/wp-content/themes/dynamik/css/images/header.png" alt="header"class="clearfix"></div>
<div>

<div class="clearfix" >
<ul id="red-nav" class="red-menu">

<li class="red-music"><a href="http://beachiappelli.com/">music</a>
           <ul class="red-menu2" id="red-nav2">
           <li class="red-press"><a href="http://beachiappelli.com/music/press-shot/">press</a></li>
           <li class="red-live"><a href="http://beachiappelli.com/music/live-performances/">live</a></li>
           <li class="red-album"><a href="http://beachiappelli.com/music/album-artwork">album</a></li>
           </ul></li>
	
<li class="red-blog"><a href="http://iycswis.blogspot.com/" target="new">blog</a></li>
<li class="red-projects"><a>projects</a>
    <ul class="red-menu3" id="red-nav3">
           <li class="red-american"><a href= "http://beachiappelli.com/projects/proud-to-be-american/" target="new">american</a></li>
           <li class="red-liberty"><a href="http://beachiappelli.com/projects/liberty-avenue/" target="new">liberty</a></li>
           <li class="red-portraits"><a href="http://beachiappelli.com/portraits/" target="new">portraits</a></li>
           <li class="red-weddings"><a href="http://www.elleandarre.com/" target="new">weddings</a></li>
           </ul></li>
<li class="red-bio"><a href="http://beachiappelli.com/biocontact">bio</a></li>
</ul>
</div>
Css

Code:
.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}


body.page-id-51 {
background-image:url('http://beachiappelli.com/wp-content/themes/dynamik/css/images/background.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center top;
z-index:-1;
}

.music-header
position:fixed;
top: 30px;
z-index:-1;
}

.red-music-header
{
position:fixed;
margin-left:auto;
margin-right:auto;
z-index:-1;
}


.red-menu {
	list-style: none;
           margin-top: -25px;
           margin-left: 183px;
	   float: left;	
	
}
.red-menu li {	
	height: 114px;
	list-style: none;
	background-repeat: no-repeat;
}

.red-menu2 li {	
        margin-left: 30px;        
        height: 30px;
	list-style: none;
	background-repeat: no-repeat;
}

.red-menu3 li {	
        margin-left: 30px;        
        height: 30px;
	list-style: none;
	background-repeat: no-repeat;
}

.red-menu li ul {
	position: absolute;
	width: 10em;
	left: -9999em;
}
.red-menu li:hover ul, #nav li.sfhover ul {
	left: auto;
}
.red-menu li a, .nav li a:visited {
	display: block;
	text-decoration: none;
	text-indent: -9999px;
	height: 114px;
	background-repeat: no-repeat;
}



.red-music {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/music-roll.png); width: 170px;}
.red-music a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/music.png);}
.red-blog {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/blog-roll.png); width: 152px;}
.red-blog a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/blog.png);}
.red-projects {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/projects-roll.png); width: 213px;}
.red-projects a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/projects.png);}
.red-bio {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/bio-roll.png); width: 280px;}
.red-bio a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/bio.png);}
.red-press {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/press-roll.png); width: 190px;}
.red-press a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/press.png);}
.red-live {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/live-roll.png); width: 190px;}
.red-live a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/live.png);}
.red-album {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/album-roll.png); width: 190px;}
.red-album a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/album.png);}
.red-american {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/american-roll.png); width: 188px;}
.red-american a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/american.png);}
.red-liberty {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/liberty-roll.png); width: 188px;}
.red-liberty a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/liberty.png);}
.red-portraits {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/portraits-roll.png); width: 188px;}
.red-portraits a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/portraits.png);}
.red-weddings {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/weddings-roll.png); width: 188px;}
.red-weddings a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/weddings.png);}





ul.red-menu li a:hover {background: none;}
.red-menu li {float: left;}
.red-menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
}


#red-nav li:hover ul ul, #red-nav li.sfhover ul ul {
	left: -9999em;
}

#red-nav li.sfhover ul

.red-menu li li, .menu li li a, .red-nav li li a:visited {
  height: auto;
}

#red-nav ul {
margin-top: -35px;
}


#red-nav3 ul {
margin-top: -15px;
}


#red-nav3 li:hover ul ul, #red-nav3 li.sfhover ul ul {
	left: -9999em;
}

#red-nav3 li.sfhover ul

.red-menu3 li li, .menu li li a, .red-nav3 li li a:visited {
  height: auto;
}


#red-nav3 ul {
margin-top: -15px;
}

#red-nav ul.red-menu3{margin-top:0}