CSS not working correctly in firefox / chrome

I have a page with a style sheet.  It works great in IE, however in firefox and chrome it doesnt.  This pertains to the menu at the type, there is a green bar behind the menu.  In firefox/chrome it extends too far to the left.  Here is the site:

http://wbra.pronet-systems.com/index.html

Here is the code for the index.html and the menu.css

Can someone help me, i'm not that great with css styling.
index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TemplateAccess.com Theme</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="menu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/menu.js"></script>

<!-- Cufon -->
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/myradpro.font.js"></script>
<script type="text/javascript">
Cufon.replace('h1')('h2')('h3')('h4');
</script>
<!-- flash script -->
<script type="text/javascript" src="js/flash_detect.v1.7.js"></script>

 <!-- Start WOWSlider.com HEAD section -->
	<link rel="stylesheet" type="text/css" href="engine1/style.css" />
	
	<!-- End WOWSlider.com HEAD section -->
    <div id="fb-root"></div>
<script>    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
    } (document, 'script', 'facebook-jssdk'));</script>
</head>
<body>
<div class="bg_color">
  <div class="left_color"></div>
  <div class="right_color"></div>
</div>
<div class="main">
  <div class="header">
	 
	   <div class="header_resize">
	  <div class="logo"><a href="#"><img src="images/logo.png" alt="logo" width="300" height="126" border="0" /></a></div>
   		<div id="menu">
		<ul class="menu">
			<li><a href="#" class="parent"><span>Home</span></a>
				
			</li>
			<li><a href="#"><span>About WBRA</span></a>
				<div><ul>
					<li><a href="#" class="parent"><span>Wastewater</span></a>
						<div><ul>
						<li><a href="#"><span>Sub Item 1.1</span></a></li>
						<li><a href="#"><span>Sub Item 1.2</span></a></li>
						</ul></div>
					</li>
					<li><a href="#" class="parent"><span>Board of Directors</span></a>
						<div><ul>
						<li><a href="#"><span>Sub Item 2.1</span></a></li>
						<li><a href="#"><span>Sub Item 2.2</span></a></li>
						</ul></div>
					</li>
					<li><a href="#"><span>Office Hours</span></a></li>
					<li><a href="#"><span>Sub Item 4</span></a></li>
					<li><a href="#"><span>Sub Item 5</span></a></li>
					<li><a href="#"><span>Sub Item 6</span></a></li>
					<li><a href="#"><span>Sub Item 7</span></a></li>
				</ul></div>
			</li>

            <li><a href="#"><span>Customer Service</span></a>
				<div><ul>
					<li><a href="#" class="parent"><span>Sub Item 1</span></a>
						<div><ul>
						<li><a href="#"><span>Sub Item 1.1</span></a></li>
						<li><a href="#"><span>Sub Item 1.2</span></a></li>
						</ul></div>
					</li>
					<li><a href="#" class="parent"><span>Sub Item 2</span></a>
						<div><ul>
						<li><a href="#"><span>Sub Item 2.1</span></a></li>
						<li><a href="#"><span>Sub Item 2.2</span></a></li>
						</ul></div>
					</li>
					<li><a href="#"><span>Sub Item 3</span></a></li>
					<li><a href="#"><span>Sub Item 4</span></a></li>
				</ul></div>
			</li>

                        <li><a href="#"><span>Developers</span></a>
				<div><ul>
					<li><a href="" class="parent"><span>Sub Item 1</span></a>
						<div><ul>
						<li><a href="#"><span>Sub Item 1.1</span></a></li>
						<li><a href="#"><span>Sub Item 1.2</span></a></li>
						</ul></div>
					</li>
					<li><a href="#" class="parent"><span>Sub Item 2</span></a>
						<div><ul>
						<li><a href="#"><span>Sub Item 2.1</span></a></li>
						<li><a href="#"><span>Sub Item 2.2</span></a></li>
						</ul></div>
					</li>
					<li><a href="#"><span>Sub Item 3</span></a></li>
					<li><a href="#"><span>Sub Item 4</span></a></li>
				</ul></div>
			</li>
			
                    <li><a href="#"><span>Resources</span></a>
				<div><ul>
					<li><a href="documents.html" class="parent"><span>Forms & Documents</span></a>
					</li>
					<li><a href="contact.aspx" class="parent"><span>Contact Us</span></a>
					</li>
					<li><a href="faq.aspx"><span>FAQ</span></a></li>
                    <li><a href="employment.aspx"><span>Employment</span></a></li>
				</ul></div>
			</li>



		</ul>
	</div> 

		<div class="clr"></div>

	  <div class="clr"></div>
	</div>
  </div>
    <div class="clr"></div>
  <div id="slider">
	    <!-- start slideshow -->
    <div class="flash_slider">
    <div class="clr"></div>
    <br />
    <br />
    <br />
    <br />
<!-- Start WOWSlider.com BODY section -->
	<div id="wowslider-container1">
	<div class="ws_images"><ul>
  <li><img src="data1/images/imgslide_1.png" alt="simple_img_1" title="simple_img_1" id="wows0"/></li>
<li><img src="data1/images/imgslide_2.png" alt="simple_img_2" title="simple_img_2" id="wows1"/></li>
</ul></div>
<a class="wsl" href="http://wowslider.com">Free Javascript Photo Gallery by WOWSlider.com v2.1.3</a>
	<div class="ws_shadow"></div>
	</div>
	<script type="text/javascript" src="engine1/wowslider.js"></script>
	<script type="text/javascript" src="engine1/script.js"></script>
	<!-- End WOWSlider.com BODY section -->
    </div>
    <!-- end #slideshow -->
	<div class="clr"></div>
  </div>
  <div class="body">
	<div class="body_resize">
	  <div class="left">
		<h2>Welcome to West Branch Regional Authority <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</span></h2>
		<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="#">read more... &gt;&gt;</a></p>
		<div class="port">
		  <h2>What We Do <span>Sed congue, dui vel tristique mollis...</span></h2>
		  <img src="images/img_1.jpg" alt="picture" width="264" height="101"  />
		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id tristique sem. Nuncnec ipsum sed nisi dictum mollis. Praesent malesuada mauris a odio adipiscing mollis. Invarius tincidunt elit vitae eleifend. </p>
		  <a href="#">&raquo; read more </a></div>
		<div class="port last">
		  <h2>How We Can Help You..</span></h2>
		  <img src="images/img_2.jpg" alt="picture" width="264" height="101" />
		  <p>Sed tempus bibendum risus, nec dignissim sem vestibulum ut. Nam iaculis aliquam elementum. Nunc sed dignissim sapien. </p>
		  <a href="#">&raquo; read more </a> </div>
	  </div>
	  <div class="right">
		<h2>Site Search:</h2>
		<div class="search">
		  <form id="form1" name="form1" method="post" action="">
			<span>
			<input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="Search..." />
			<input name="b" type="image" src="images/search.gif" class="button" />
			</span>
		  </form>
		  <div class="clr"></div>
		</div>
		<h2>Get To Know Us!</h2>
		<div class="list_work">
		  <p><strong>Visit Us On Facebook!</strong></p>
		  <div class="fb-activity" data-site="wbra.pronet-systems.com" data-width="300" data-height="300" data-header="true" data-border-color="green" data-font="verdana" data-recommendations="false"></div>
		</div>
		<div class="list_work">
		  <p><img src="images/icon_bg_2.png" width="50" height="50" alt="icon" class="float_left" /></p>
		  <p><strong>Web &amp; Interactive Media</strong></p>
		  <p>View our images and videos to see what we can do for you.</p>
		  <p><a href="#">read more... &gt;&gt;</a></p>
		</div>
		<div class="list_work last">
		  <p><img src="images/icon_bg_3.png" width="50" height="50" alt="icon" class="float_left" /> </p>
		  <p><strong>Recent Alerts</strong></p>
		  <p>For the most recent news and alerts, please click here.</p>
		  <p><a href="#">read more... &gt;&gt;</a></p>
		</div>
	  </div>
	  <div class="clr"></div>
	</div>
  </div>
  <div class="clr"></div>
</div>
<div class="FBG">
  <div class="FBG_resize">
	<div class="blog last">
	  <h2>Contact</h2>
	  <p>West Branch Regional Authority<br />
		117 Old Glade Run Rd.<br />
		Muncy, PA 17756<br />
        (570) 935-0087</p>
        <a href="mailto:contact@westbranch-ra.org">contact@westbranch-ra.org</a><br />
	  <p><img src="images/icon_1.png" width="19" height="19" alt="icon" /><img src="images/icon_2.png" width="19" height="19" alt="icon" /> <img src="images/icon_3.png" width="19" height="19" alt="icon" /></p>
	</div>
	
  </div>
  <div class="footer">
	<p class="leftt">© Copyright <a href="http://www.pronet-systems.com">ProNet Systems</a>. All Rights Reserved </p>
	<div class="clr"></div>
  </div>
  
</div>
</body>
</html>

Open in new window


menu.css

/**
 *********************************************
 * Prototype of styles for horizontal CSS-menu
 * @data 25.01.2010
 *********************************************
 * (X)HTML-scheme:
 *  <div id="menu">
 *      <ul class="menu">
 *          <li><a href="#" class="parent"><span>level 1</span></a>
 *              <div><ul>
 *                  <li><a href="#" class="parent"><span>level 2</span></a>
 *                      <div><ul><li><a href="#"><span>level 3</span></a></li></ul></div>
 *                  </li>
 *              </ul></div>
 *          </li>
 *          <li class="last"><a href="#"><span>level 1</span></a></li>
 *      </ul>
 *  </div>
 *********************************************
 */
/** Selectors **/

/* Reset */
#menu *
{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    text-decoration: none;
    position: relative;
    z-index: 800;
}
div#menu {
position:relative;
width: 200;
z-index:800; }
#menu ul.menu {
  white-space: nowrap;
}

/* Geometrical arrangement */
#menu ul.menu li {
  display: inline-block;
  height: 57px;
  position: relative;
}

#menu ul.menu li div {
  position: absolute;
  top: 55px;
  left: 0px;
}

#menu ul.menu li div div {
  position: absolute;
  top: -6px;
  left: 176px;
}

/* Escaping style for lower levels */
#menu ul.menu li div ul li {
  display: block;
  float: none;
  width: auto;
  height: auto;
}

/** Graphics **/

/* Horizontal sliding doors */
#menu ul.menu li a {
  padding-left: 15px;
  background-image: url("images/menu_level1_item.png");
  background-repeat: no-repeat;
  background-position: left -1000px;
  display: inline-block;
  margin: 6px 2px;
}

#menu ul.menu li a span {
  padding-right: 15px;
  padding-left: 0px;
  background-image: url("images/menu_level1_item.png");
  background-repeat: no-repeat;
  background-position: right -1000px;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
}

#menu ul.menu li:hover a {
  background-position: left -90px;
}

#menu ul.menu li:hover a span {
  background-position: right -135px;
}

#menu ul.menu li.active a {
  background-position: left 0px;
}

#menu ul.menu li.active a span {
  background-position: right -45px;
}

/* Escape Horizontal doors */
#menu ul.menu li div ul li a {
  display: block;
  padding: 0px;
  margin: 0px;
  background: none;
}

#menu ul.menu li div ul li a span {
  display: block;
  padding: 0px;
  background: none;
  height: auto;
  line-height: 25px;
  padding: 10px 0 10px 12px;
  white-space: normal;  
}

/* Vertical sliding doors */
#menu ul.menu li div { 
  width: 170px;
  padding-top: 6px;
  background-image: url("images/submenu-top.png");
  background-repeat: no-repeat;
  background-position: 0px top;
}

#menu ul.menu li div ul { 
  padding: 9px;
  padding-top: 0;
  background-image: url("images/submenu-bottom.png");
  background-repeat: no-repeat;
  background-position: 0px bottom;
}

/* Hover Effect on Submenus */
#menu ul.menu ul li:hover
{
  background-repeat: repeat-x;
  background-position: 0% 100%;
  background-image: url(images/menu_level2_item_hover.png);
}

#menu ul.menu ul li:hover>a
{
  background-repeat: repeat-x;
  background-position: 0% 0%;
  background-color: transparent;
  background-image: url(images/menu_level2_item_hover.png);
}


/* Main header line */
#menu
{
    height: 57px;
    position: absolute;
    padding-left:14px;
    padding-right:14px;
    background: transparent url(images/page_header_b.png) repeat-x;
}

/* Text shadow */
#menu span
{
  color: #edf0f1;
  text-shadow:0 -1px 1px #000000;
}

#menu li:hover>a>span 
{
  color: #ffffff;
  text-shadow: 0 1px 1px #000000, 0 2px 10px #969696;
}

/* Fonts */
#menu ul.menu li a span
{ 
  font-family: Arial;
  font-size: 18px;
  font-weight: 400;
}

#menu ul.menu li div ul li a span
{
  font-family: Arial;
  font-size: 15px;
  font-weight: 400;
}

/* Lines between li */
#menu ul.menu li div ul
{
  padding-bottom: 8px;
}

#menu ul.menu li div ul li:first-child
{
  border-top-width: 0px;
}


/* menu logic */
#menu li>div { visibility: hidden; }
#menu li:hover>div { visibility: visible; }
/* */

/* Hover Effect on Submenus */
#menu ul.menu ul li:hover
{
  background-color: #2e4355;
}

/* Lines between li */
#menu ul.menu li div ul li
{
  border-bottom: 1px solid #6d819a;
  border-top: 1px solid #304054;
}

/* ie7 */
#menu ul.menu li {
  *zoom: 1;
  *display: inline;
}

#menu ul.menu li a {
  *zoom: 1;
  *display: inline;
}

#menu ul.menu li a span {
  *zoom: 1;
  *display: inline;
}

#menu ul.menu li div ul li a {
  *display: inline;
}

/* Discarding semi-transparency */
#menu ul.menu ul li:hover
{
  *background-image: none;
}

#menu ul.menu ul li:hover>a
{
  *background-image: none;
}

/* IE6 */
#menu ul.menu li a {
  _background-image: url("images/menu_level1_item.gif");
}

#menu ul.menu li a span {
  _background-image: url("images/menu_level1_item.gif");
}

#menu ul.menu li div { 
  _background-image: url("images/submenu-top.gif");
}

#menu ul.menu li div ul { 
  _background-image: url("images/submenu-bottom.gif");
}

#menu ul.menu li a:hover {
  _background-position: left -90px;
}

#menu ul.menu li a:hover span {
  _background-position: right -135px;
}

/* menu logic for IE6 */
#menu div { _display: none; }
#menu div li:hover div { _display: block; }
#menu div li:hover li:hover div { _display: block; }
#menu div li:hover li:hover li:hover div { _display: block; }
/* */

Open in new window

K-9Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kyle HamiltonData ScientistCommented:
make the following css changes:

#menu {
height: 57px;
position: absolute;
padding-left: 14px;
padding-right: 14px;
background: transparent url(images/page_header_b.png) repeat-x;
right: 0;
}

div#menu {
/* remove positioning */
width: 200;
z-index: 800;
}

.header_resize {
padding: 0;
margin: 0 auto;
width: 962px;
position: relative;
}
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
HagayMandelCommented:
IE9 behaves exactly the same as Chrome & FF. all cover your logo!!
Remove both position rules from menu.css line #33 (position: relative;) and from menu.css line  #162 (position: absolute).
0
K-9Author Commented:
You are awesome!!  Thanks!!
0
Kyle HamiltonData ScientistCommented:
:))
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.