?
Solved

CSS not working correctly in firefox / chrome

Posted on 2012-08-17
4
Medium Priority
?
1,819 Views
Last Modified: 2012-08-17
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

0
Comment
Question by:K-9
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 38304899
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
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38305766
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
 

Author Closing Comment

by:K-9
ID: 38306163
You are awesome!!  Thanks!!
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38306175
:))
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question