In my two screenshots, you will notice some space being placed between menu 2 and menu3. I have played around with my padding and margins without noticeable help. So here is am asking for a hint on where my problem is.
thanks...Greg
Code:
ul#cssmw2 {
cursor: default;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 0;
}
ul#cssmw2 ul {
cursor: default;
font-size: 0;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
ul#cssmw2 ul li {
background-image: none;
}
ul#cssmw2 li {
background-image: none;
padding: 0 0 0 0;
position: relative;
white-space: nowrap;
z-index: 100;
}
ul#cssmw2 li ul {
display: none;
top: 0;
}
ul#cssmw2 li:hover > ul {
display: block;
position: absolute;
}
ul#cssmw2 li.hover > ul {
display: block;
position: absolute;
}
ul#cssmw2 li.current > ul {
position: absolute;
}
ul#cssmw2 > li {
background-image: none;
}
ul#cssmw2 > li > a, ul#cssmw2 > li > a:link {
background-color: #100596;
background-image: none;
border-bottom: solid 1px #ffda6c;
border-right: solid 1px #ffda6c;
color: #ffda6c;
display: block;
font-family: Arial, "Arial Black";
font-size: 12px;
font-style: normal;
font-weight: bold;
margin: 0 0 0 15;
padding: 5px 0px 5px 10px;
text-decoration: none;
text-transform: uppercase;
width: 155px;
outline-style: none;
border-top: solid 1px #ffda6c;
border-left: solid 1px #ffda6c;
}
ul#cssmw2 > li > a:active, ul#cssmw2 > li > a:focus {
background-color: #100596;
color: #ffda6c;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
ul#cssmw2 > li:hover > a, ul#cssmw2 > li:hover > a:link {
background-color: #100596;
color: #ffda6c;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
ul#cssmw2 > li.hover > a, ul#cssmw2 > li.hover > a:link {
background-color: #100596;
color: #ffda6c;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
ul#cssmw2 > li.current > a.current, ul#cssmw2 > li.current > a.current:link {
background-color: #100596;
color: #ffda6c;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
ul#cssmw2 ul.level-1 {
left: 155px;
}
ul#cssmw2 ul.level-1 > li {
background-image: none;
}
ul#cssmw2 ul.level-1 > li > a, ul#cssmw2 ul.level-1 > li > a:link {
background-color: #100596;
background-image: none;
border-bottom: solid 1px #ffda6c;
border-right: solid 1px #ffda6c;
color: #ffda6c;
display: block;
font-family: Arial, "Arial Black";
font-size: 12px;
font-style: normal;
font-weight: bold;
margin: 0 0 0 150;
padding: 5px 0px 5px 15px;
text-decoration: none;
text-transform: uppercase;
width: 155px;
outline-style: none;
border-left: solid 1px #ffda6c;
border-top: solid 1px #ffda6c;
}
ul#cssmw2 ul.level-1 > li > a:active, ul#cssmw2 ul.level-1 > li > a:focus {
background-color: #100596;
color: #ffda6c;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
ul#cssmw2 ul.level-1 > li:hover > a, ul#cssmw2 ul.level-1 > li:hover > a:link {
background-color: #100596;
color: #ffda6c;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
ul#cssmw2 ul.level-1 > li.hover > a, ul#cssmw2 ul.level-1 > li.hover > a:link {
background-color: #100596;
color: #ffda6c;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
ul#cssmw2 ul.level-1 > li.current > a.current, ul#cssmw2 ul.level-1 > li.current > a.current:link {
background-color: #100596;
color: #ffda6c;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
Code:
ul#cssmw3 {
cursor: default;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
ul#cssmw3 ul {
cursor: default;
font-size: 0;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
ul#cssmw3 ul li {
background-image: none;
float: none;
}
ul#cssmw3 li {
background-image: none;
float: left;
padding: 0 0 0 0;
position: relative;
white-space: nowrap;
z-index: 100;
}
ul#cssmw3 li ul {
display: none;
top: 0;
}
ul#cssmw3 li:hover > ul {
display: block;
position: absolute;
}
ul#cssmw3 li.hover > ul {
display: block;
position: absolute;
}
ul#cssmw3 li.current > ul {
position: absolute;
}
ul#cssmw3 > li {
background-image: none;
}
ul#cssmw3 > li > a, ul#cssmw3 > li > a:link {
background-color: #100596;
background-image: none;
border-bottom: solid 1px ##ffda6c;
border-right: solid 1px #ffda6c;
color: #ffda6c;
display: block;
font-family: Arial;
font-size: 12px;
font-style: normal;
font-weight: bold;
margin: 0 0 0 0;
padding: 5px 5px 5px 17px;
text-decoration: none;
text-transform: uppercase;
width: 213px;
outline-style: none;
border-left-color: #ffda6c;
border-top-color: #ffda6c;
border-top: solid 1px #ffda6c;
border-left: solid 1px #ffda6c;
height: 20px;
}
ul#cssmw3 > li > a:active, ul#cssmw3 > li > a:focus {
background-color: #FAEEDB;
color: #173232;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
ul#cssmw3 > li:hover > a, ul#cssmw3 > li:hover > a:link {
background-color: #FAEEDB;
color: #173232;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
ul#cssmw3 > li.hover > a, ul#cssmw3 > li.hover > a:link {
background-color: #FAEEDB;
color: #173232;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
ul#cssmw3 > li.current > a.current, ul#cssmw3 > li.current > a.current:link {
background-color: #FAEEDB;
color: #173232;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #105805;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/background_1250_900_2.jpg);
background-repeat: no-repeat;
}
.twoColFixLt #container {
width: 953px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFda6c;
margin: 0 0 0 180; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 200px;
position: absolute;
left: 147px;
top: -1px;
}
.twoColFixLt #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 175px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #100596; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 0px 0px 0px 0px;
}
.twoColFixLt #mainContent {
margin: 0 0 0 180px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 0 0 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.default_12 {
font-family: Arial, "Arial Black";
font-size: 12px;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLt #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLt #sidebar1 { padding-top: 30px; }
.twoColFixLt #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script type="text/javascript" src="CSSMenuWriter/cssmw2/menu.js"></script>
<style type="text/css" media="all">
<!--
@import url("CSSMenuWriter/cssmw2/menu.css");
-->
</style>
<!--[if lte IE 6]>
<style type="text/css" media="all">
@import url("CSSMenuWriter/cssmw2/menu_ie.css");
</style>
<![endif]-->
<script type="text/javascript" src="CSSMenuWriter/cssmw3/menu.js"></script>
<style type="text/css" media="all">
<!--
@import url("CSSMenuWriter/cssmw3/menu.css");
-->
</style>
<!--[if lte IE 6]>
<style type="text/css" media="all">
@import url("CSSMenuWriter/cssmw3/menu_ie.css");
</style>
<![endif]-->
<link rel="shortcut icon" href="images/helmet1.jpg" />
</head>
<body class="twoColFixLt">
<div id="container">
<ul class="level-0" id="cssmw3">
<li><a href="organization.html">Organization</a></li>
<!-- <li><a href="football56.html">Football 5-6</a></li>-->
<li><a href="football78.html">Football 7-8</a></li>
<li><a href="cheerleading.html">Cheerleading</a></li>
<li><a href="history.html">League History</a></li>
</ul>
<script type="text/javascript">if(window.attachEvent) { window.attachEvent("onload", function() { cssmw3.intializeMenu('cssmw3',{select_current: 0, orientation: 1}); }); } else if(window.addEventListener) { window.addEventListener("load", function() { cssmw3.intializeMenu('cssmw3',{select_current: 0, orientation: 1}); }, true); }</script>
<div id="sidebar1">
<ul class="level-0" id="cssmw2">
<li><a href="index.html">Home</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="eligibility.html">Eligibility</a></li>
<li><a href="gamefilm/gamefilm.html">Game Films</a></li>
<li><a href="schedule.html">Game Schedule</a></li>
<li><a href="gamestandings.html">Game Standings</a></li>
<li class="parent"><a href="photos.html">Photo Gallery</a>
<ul class="level-1">
<li><a href="photo56.html">Photo Football 5-6</a></li>
<li><a href="photo78.html">Photo Football 7-8</a></li>
<li><a href="photocheer.html">Photo Cheerleading</a></li>
</ul>
</li>
<li><a href="forms.html">Registration/Forms</a></li>
<li><a href="sponsors.html">Sponsors</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="subscribe.html">Wolverine Newsletter</a></li>
</ul>
<script type="text/javascript">if(window.attachEvent) { window.attachEvent("onload", function() { cssmw2.intializeMenu('cssmw2',{select_current: 0, orientation: 2}); }); } else if(window.addEventListener) { window.addEventListener("load", function() { cssmw2.intializeMenu('cssmw2',{select_current: 0, orientation: 2}); }, true); }</script>
<p><a href="http://www.wolverinebingo.com"><img name="" src="images/wolverinebingo_banner_150.jpg" alt="" height="114" width="159" /></a></p>
<p><a href="http://www.northeastjhfl.com"><img name="" src="images/njhfl_150.jpg" alt="" height="184" width="161" /></a></p>
<h3> </h3>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<br />
<br />
<div>
<div align="center"><span class="default_12">Copyright © 2012 - All Rights Reserved</span></div>
</div>
<div>
<div align="center"><span class="default_12">[<a href="http://www.derrywolverine.com/index.html">Home</a>]
[<a href="http://www.derrywovlerine.com/organization.html" target="_blank">Organization</a>]
[<a href="http://www.derrywolverine.com/contact.html" target="_blank">Contact Us</a>]
</span></div>
<div align="center"><span class="default_12"><br />
<br />
Wolverine Youth Football Association - 55 Crystal Avenue PMB 287 - Derry, New Hampshire 03038 </span></div>
</div>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<!-- end #container --></div>
</body>
</html>
Before you post, read our: 
GAP in IE, but showing right in firefox
