Funny FireFox Positioning

I tried to add a few drop shadows in the header of my page. They are labeled drop1, drop 2, and drop 3. The page looks great in Chrome and Internet Explorer, but in Firefox something happens. Access gets dropped below drop1. It looks right in Chrome and IE because access sits on top of drop1. I hope that makes sense? Let me know if I need to clarify. Here is the header php code from the twenty eleven theme:

<header id="branding" role="banner">
			<hgroup>
				<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
			</hgroup>
	<div id="drop2"></div>
			<?php
				// Check to see if the header image has been removed
				$header_image = get_header_image();
				if ( ! empty( $header_image ) ) :
			?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
				<?php
					// The header image
					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
					if ( is_singular() &&
							has_post_thumbnail( $post->ID ) &&
							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
							$image[1] >= HEADER_IMAGE_WIDTH ) :
						// Houston, we have a new header image!
						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
					else : ?>
					<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
				<?php endif; // end check for featured image or standard header ?>
			</a>
			<?php endif; // end check for removed header image ?>

			<?php
				// Has the text been hidden?
				if ( 'blank' == get_header_textcolor() ) :
			?>
				<div class="only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>">
				<?php get_search_form(); ?>
				</div>
			<?php
				else :
			?>
				<?php get_search_form(); ?>
			<?php endif; ?>
				<div class="drop1"</div>
			<nav id="access" role="navigation">
				<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
				<?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
				<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
				<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
				<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</nav><!-- #access -->
						<div id="drop3"></div>
	</header><!-- #branding -->

And here is the CSS that I think you might need. Let me know if you need more than this:

/* =Header
----------------------------------------------- */

#branding {
	border-top: 2px solid #0a0a0a;
	background: #0f0f0f;
}

#site-title {
	margin-right: 5%;
	padding-top: 1%;
}

#site-title a {
	color: #0397fc;
	font-family: Chunkfive;
	font-size: 600%;
	line-height: 130%;
	text-shadow: 5px 2px 2px #000;
}
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
	border-right: 5px solid #0397fc;
	padding-right: 10px;
}
#site-description {
	color: #FFF;
	margin: 0 0 .0 0;
	font-family: Chunkfive;
	font-size: 300%;
	padding-right: 105px;
	width: 650px;
	line-height: 100%;
	text-shadow: 5px 2px 2px #000;
}

#site-description:hover {
	border-right: 5px solid #FFF;
}

#branding #s {
	background-color: #ddd;
}

/* =Menu
----------------------------------------------- */

#access {
	background: #333; /* Show a solid color for older browsers */
	border-top: 2px solid #FF9000;
	border-bottom: 2px solid #FF9000;
}

#access li {
	float: left;
	position: relative;
	font-family: BEBAS___;
	font-size: 170%;
}

div.drop1 {
	background: #0f0f0f;
	height: 90px;
}

#drop2 {
	background: url(../images/drop2.jpg);
	background-repeat: repeat-x;
	height: 25px;
}

#drop3 {
	background: url(../images/drop3.jpg);
	height: 25px;
	position: relative;
	top: 80px;
}

Any ideas of how I could make this look right in FireFox?

Thank you