K-9
asked on
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
menu.css
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... >></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="#">» 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="#">» 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 & Interactive Media</strong></p>
<p>View our images and videos to see what we can do for you.</p>
<p><a href="#">read more... >></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... >></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>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; }
/* */ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
You are awesome!! Thanks!!
:))
Remove both position rules from menu.css line #33 (position: relative;) and from menu.css line #162 (position: absolute).