Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS not working correctly in firefox / chrome

Posted on 2012-08-17
4
Medium Priority
?
1,870 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
  • 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

876 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