Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS List Menu Location Issue

Status
Not open for further replies.
In such a complex issue, I would suggest the following:

1. Post all the relevant information from the other thread into this thread so we don't have to jump back and forth for information.
2. Tell us exactly what the problem is: which list menu, how is the location different, where do you expect it to be, where is it in XP and where is it in Vista. Most of us will have one or the other OS installed and we won't know where the menu is supposed to be in the other based on your current description.
3. Install 'Firebug' add-on for Firefox. This will allow you to click on any of the items on the page and determine their exact size and location and what styles affect it and how. It might yield some more information to your issue.


[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
My apologies for the confusion. still new as some of these issues. Thank you for your patience.

[the problem]
My issue seems to be that my navigation menu (located on the right side of the screen, towards the "header") is not positioning it self along the color bar on the background image, when viewing in Firefox (version 3.0.12) on an Windows XP machine. All appears to be placed properly on my laptop with Vista viewed in FireFox (3.0.12).
The top level menu appears to be shifted about 3pxs down on the XP box; and the sub level menus appear to be wider and therefore start to wrap on the screen...yuck!

[the page location]

[the html code]
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to Silverdale Baptist! Where Christ is Exhalted!</title>
<link href="css/screen.css" rel="stylesheet" type="text/css" />
<link href="css/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
    <style type="text/css"> 
        /* place css box model fixes for IE 5* in this conditional comment */
        #sidebar1 { width: 180px; }
        #sidebar2 { width: 190px; }
    </style>
<![endif]-->
<!--[if lte IE 6]>
    <link href="css/ie6_hacks.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 7]>
    <link href="css/ie7_hacks.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 8]>
    <link href="css/ie8_hacks.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->


<script type="text/javascript" src="assets/jquery-1.3.2.min.js"></script>
<script src="assets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
// jQuery script for actions on this page
$(document).ready(function() {
	$('a').click(function() {
		$('#hidnwrap').slideToggle('slow');
	});
});
</script>

</head>

<body>

<div id="mainwrap">
<div id="hidnwrap">
            <dl>
              <dt><a href="[URL unfurl="true"]http://www.silverdalebc.com/worship.html">Praise[/URL] &amp; Worship</a></dt>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/worship/choirs/celebration-singers.html">Adult[/URL] Choir</a></dd>
              <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/worship/choirs/childrens-choirs.html">Children's[/URL] Choirs</a></dd>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/worship/choirs/sanctuary-choir.html">Praise[/URL] Band</a></dd>
              <dt><a href="[URL unfurl="true"]http://www.silverdalebc.com/worship.html">Preschool</a></dt>[/URL]
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/worship/choirs/celebration-singers.html">Nursery</a></dd>[/URL]
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/worship/choirs/childrens-choirs.html">Awana[/URL] - Cubbies</a></dd>
                    <dd>&nbsp;</dd>
              <dt><a href="[URL unfurl="true"]http://www.silverdalebc.com/get-connected/youth.html">Children's[/URL] Ministries</a></dt>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/get-connected/youth/junior-high.html">Kidzone</a></dd>[/URL]
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/get-connected/youth/high-school.html">Awana[/URL] - Sparks</a></dd>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/get-connected/college.html">Awana[/URL] - Truth &amp; Training</a></dd>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/get-connected/college.html">Caraway[/URL] Street</a></dd>
                    <dd>&nbsp;</dd>                    
            </dl>
            <dl>
              <dt><a href="[URL unfurl="true"]http://www.silverdalebc.com/get-connected/children.html">Student[/URL] Ministries</a></dt>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/get-connected/children/childcare-kid-time.html">Middle[/URL] School</a></dd>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/get-connected/children/sunday-morning-programs/sunday-preschool.html">Junior[/URL] High</a></dd>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/get-connected/children/sunday-morning-programs/sunday-elementary.html">High[/URL] School</a></dd>
              <dt><a href="[URL unfurl="true"]http://www.silverdalebc.com/newsevents/member-information.html">Member[/URL] Information</a></dt>
              		<dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/">Discovery[/URL] 101</a></dd>
              		<dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/">Discovery[/URL] 201</a></dd>
              		<dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/">Discovery[/URL] 301</a></dd>
              		<dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/">Discovery[/URL] 401</a></dd>                    
              <dt><a href="[URL unfurl="true"]http://www.silverdalebc.com/get-connected.html">Singles</a></dt>[/URL]
            </dl>
            <dl>
              <dt><a href="[URL unfurl="true"]http://www.silverdalebc.com/a/resource-ministries.html">Women's[/URL] Ministries</a></dt>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/newsevents/connection-news.html">Espresso[/URL] for the Soul</a></dd>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/newsevents/connection-news.html">Group[/URL] Studies</a></dd>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/newsevents/connection-news.html">Prayer[/URL] Times</a></dd>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/newsevents/connection-news.html">Special[/URL] Missions</a></dd>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/newsevents/connection-news.html">Christmas[/URL] Tea</a></dd>                                                                                
              <dt><a href="[URL unfurl="true"]http://www.silverdalebc.com/a/resource-ministries.html">Men's[/URL] Ministries</a></dt>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/newsevents/connection-news.html">Men's[/URL] Fraternity</a></dd>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/newsevents/connection-news.html">Fishers[/URL] of Men</a></dd>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/newsevents/connection-news.html">Prayer[/URL] Times</a></dd>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/newsevents/connection-news.html">Car[/URL] Care</a></dd>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/newsevents/connection-news.html">Wild[/URL] Game Dinner</a></dd>                                                                                
            </dl>
            <dl>
              <dt><a href="[URL unfurl="true"]http://www.silverdalebc.com/need-help.html">Strategic[/URL] Services</a></dt>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/helping-others/service-opportunities.html">Parking[/URL] Teams</a></dd>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/need-help/home-auto-repair.html">Greeter[/URL] Teams</a></dd>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/need-help/funerals.html">Nursery[/URL] Volunteers</a></dd>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/need-help/weddings.html">Usher[/URL] Teams</a></dd>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/need-help/counseling.html">Media[/URL] Teams</a></dd>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/need-help/counseling.html">Security[/URL] Teams</a></dd>                    
              <dt><a href="[URL unfurl="true"]http://www.silverdalebc.com/helping-others.html">Missions</a></dt>[/URL]
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/helping-others/world-missions.html">World[/URL] Missions</a></dd>
              <dt><a href="[URL unfurl="true"]http://www.silverdalebc.com/helping-others.html">Outreach</a></dt>[/URL]
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/life-learning/equipping-classes.html">Evangelism</a></dd>[/URL]
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/helping-others/community-impact.html">Local[/URL] Outreach</a></dd>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/helping-others/sports.html">Sports[/URL] Outreach</a></dd>
            </dl>
            <dl>
              <dt><a href="[URL unfurl="true"]http://www.silverdalebc.com/need-help.html">Care[/URL] Ministries</a></dt>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/need-help/growth-recovery/addiction-dependency.html">Individual[/URL] Needs</a></dd>
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/need-help/growth-recovery/cancer-encouragement-group.html">Marriage</a></dd>[/URL]
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/need-help/growth-recovery/divorce.html">Divorce</a></dd>[/URL]
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/need-help/growth-recovery/grief.html">Grief</a></dd>[/URL]
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/need-help/hospital-home-visits.html">Visitation</a></dd>[/URL]
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/need-help/prayer-requests.html">Prayer</a></dd>[/URL]
                    <dd><a href="[URL unfurl="true"]http://www.silverdalebc.com/need-help/reach-up-reach-out.html">Transitions</a></dd>[/URL]
            </dl>
            <span class="clear">&nbsp;</span>            
    <!-- end #hidnwrap -->
</div>
<div id="container">
  <div id="header">
  	<div id="iheader">
  	<div id="trig"><a href="#">Show/Hide</a></div>
    <h1><a href="/">Silverdale Baptist Church</a></h1>
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="/">Home</a>          </li>
          <li><a href="#" class="MenuBarItemSubmenu">New @ SBC</a>
            <ul id="new-sub">
              <li><a href="#">Welcome</a></li>
              <li><a href="#">What to Expect</a></li>
              <li><a href="#">The Good News</a></li>
              <li><a href="#">Service Times</a></li>
              <li><a href="#">Directions</a></li>
              <li><a href="#">Beliefs of SBC</a></li>
              <li><a href="#">How to Join</a></li>
              <li><a href="#">Meet the Staff</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Worshipping</a>
            <ul id="worship-sub">
              <li><a href="#">Adult Worship</a></li>
              <li><a href="#">Student Worship</a></li>
              <li><a href="#">Children's Worship</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Growing</a>
            <ul id="grow-sub">
              <li><a href="#">Through Discipleship</a></li>
              <li><a href="#">Through Small Groups</a></li>
              <li><a href="#">Through Giving</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Serving</a>
            <ul id="serve-sub">
              <li><a href="#">Through Missions</a></li>
              <li><a href="#">Through Ministry</a></li>
              <li><a href="#">Through Service</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Prayer</a>
            <ul id="prayer-sub">
              <li><a href="#">Submit a Request</a></li>
              <li><a href="#">Submit  a Praise</a></li>
            </ul>
          </li>
          <li><a href="#">Watch+Listen</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">Contact SBC</a>
            <ul id="contact-sub">
              <li><a href="#">Email the Staff</a></li>
              <li><a href="#">Prayer Request</a></li>
              <li><a href="#">Join SBC</a></li>
            </ul>
          </li>
      </ul>
    <!-- end #iheader --></div>
    <!-- end #header --></div>
    
  <div id="mainContent">
  
  <div id="sidebar1">
  <h3>Sidebar1 Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p>
  <!-- end #sidebar1 --></div>
  <div id="sidebar2">
  <h3>Sidebar2 Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p>
  <!-- end #sidebar2 --></div>  
  <div id="sidebar3">
  <h3>Sidebar3 Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p>
  <!-- end #sidebar3 --></div>
  <div id="sidebar4">
  <h3>Sidebar4 Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <!-- end #sidebar4 -->
    </p>
    </div>
  <div id="sidebar5">
  <h3>Sidebar5 Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p>
  <!-- end #sidebar5 --></div>
    <div id="sidebar6">
  <h3>Sidebar6 Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p>
  <!-- end #sidebar6 --></div>
  
  <!-- end #mainContent --></div>
  <div class="clear">&nbsp;</div>
  <div id="footer">
    <p>Footer</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
<!-- end #mainwrap --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"assets/SpryMenuBarDownHover.gif", imgRight:"assets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
[end html code]

[the css code]
Code:
@charset "utf-8";
/* ----- main style sheet for Silverdale Baptist Church, Chattanooga, TN. Where Christ is Exhalted! ----- */

html {
	margin: 0;
	padding: 0;
	height: 100%;
}

body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	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-color: #202020;
}

h1, h2, h3, h4, h5, h6, h7, p, form, ul, ol, li, blockquote { /* resets most browser styles to enhance cross-browser compatibility */
	margin: 0;
	padding: 0;
}

.clear
{
	clear: both;
	display: block;
	float: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	width: 0;
	height: 0;
}

/* ----- General link styles ----- */

a:link {/*color: #975a18;*/ text-decoration: underline; border: none;}
a:visited {/*color: #975a18;*/ text-decoration: underline; border: none;}
a:hover {/*color: #975a18;*/ text-decoration: none; border: none;}
a:active {/*color: #975a18;*/ text-decoration: underline; border: none;}
a img { border: none;}

/* ----- Structural Styles ----- */

#mainwrap  { /* --- page wrapper --- */
	min-height: 100%;
	margin: 0 auto -150px; /* the auto margins (in conjunction with a width) center the page */	
}

#hidnwrap  { /* --- hidden ministry wrapper --- */
	/*height: 150px;*/
	width: 980px;
	margin: 0 auto;
	padding: 5px 20px 10px 20px;
	display: none;
	height: 300px;
	font-size: 0.8em;
	text-align:left;
	background-color: #202020;
}

#hidnwrap dl {
	float: left;
	overflow: hidden;
	padding: 0 10px;
	width: 172px;
}

#hidnwrap dt {
	padding: 10px 0 5px;
}

#hidnwrap dd {
	padding: 1px 0;
}

#hidnwrap dt a {
	color: #fff;
}

#hidnwrap dd a {
	color: #968b79;
}

#hidnwrap a:hover {
	text-decoration: underline;
}

/* --- main visible content --- */

#container  {
	position: relative;
	margin: 0 auto -150px; /* 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. */
	background-image: url(../images/home/bkgd/roadwall_hdr_bg_test2a.jpg);
	background-repeat: repeat-x;
} 

/* Tips for absolutely positioned sidebars with header and footer:
1. Absolutely positioned (AP) elements must be given a top and side value, either right or left. (As a default, if no top value is given, the AP element will begin directly after the last element in the source order of the page. This means, if the sidebars are first element in the #container in the document's source order, they will appear at the top of the #container even without being given a top value. However, if they are moved later in the source order for any reason, they'll need a top value to appear where you desire.
2. Absolutely positioned (AP) elements are taken out of the flow of the document. This means the elements around them don't know they exist and don't account for them when taking up their proper space on the page. Thus, an AP div should only be used as a side column if you are sure the middle #mainContent div will always contain the most content. If either sidebar were to contain more content, that sidebar would run over the bottom of the parent div, and in this case the footer as well, and the sidebar would not appear to be contained.
3. If the above mentioned requirements are met, absolutely positioned sidebars can be an easy way to control the source order of the document.
4. If the source order is changed, the top value should be equal to the height of the header since this will cause the columns to visually meet the header.
*/

#trig  { /* --- trigger for hidden ministry div --- */
	margin: 0 40px 0 0;
	padding: 2px;
	width: 74px;
	float: right;
	font-size: 0.8em;
}

#header {
	height: 151px;
	background-image: url(../images/home/bkgd/RoadwallCross_mod1.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	margin-bottom: 30px;
}

#iheader  {
	margin: 0px auto;
	width: 1004px;
	height: 151px;
}
#iheader  h1  {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
#iheader  h1  a:link, #iheader  h1  a:visited, #iheader  h1  a:active, #iheader  h1  a:hover {
	height: 100px;
	width: 325px;
	display: block;
	text-indent: -9999px;
	margin-left: 15px;
	margin-bottom: 18px;
	margin-top: 15px;
}

/* --- Main Navigation Menu --- */

#MenuBar1   {
	font-size: 0.8em;
	float: right;
	top: 127px;
	position: absolute;
	margin-left: 300px;
}

#MenuBar1 li {
	margin: 0 0 0 3px;
}

#MenuBar1 li a:hover, #MenuBar1 li a:focus, {
	background-color: #23242c;
}


/* --- Sub Navigation Menu --- */
/* --- New @ SBC submenu style overides --- */
#new-sub {
	margin: 3px 0 0 -150px;
	width: 810px; /* Submenu width setting for horizontal submenus [original 8.2em] */
	border: none;
}

#new-sub li {
	width: auto; /* Submenu List Item individual lists [original 8.2em] */
	background-color: #23242c;
	margin: 0px;
}

#new-sub a {
	background-color: #23242c;
}

#new-sub a:link, #new-sub a:visited, #new-sub a:active {
	color: #FFFF00;
	background-color: #23242c;
	text-decoration: none;
}

#new-sub a:hover {
	color: #FFFFCC;
	background-color: #23242c;
	text-decoration: none;
}

/* --- Worshipping submenu style overides --- */

#worship-sub {
	margin: 3px 0 0 -100px;
	width: 810px; /* Submenu width setting for horizontal submenus [original 8.2em] */
	border: none;
}

#worship-sub li {
	width: auto; /* Submenu List Item individual lists [original 8.2em] */
	background-color: #033500;
	background-image: url(../images/home/bkgd/submenu_brown_glass2.jpg);
	margin: 0px;
}

#worship-sub a {
	background-color: #033500;
	background-image: url(../images/home/bkgd/submenu_brown_glass2.jpg);
}

#worship-sub a:link, #worship-sub a:visited, #worship-sub a:active {
	color: #000;
	background-color: #033500;	
	background-image: url(../images/home/bkgd/submenu_brown_glass2.jpg);
	text-decoration: none;
}

#worship-sub a:hover {
	color: #009900;
	background-color: #033500;	
	background-image: url(../images/home/bkgd/submenu_brown_glass2.jpg);
	text-decoration: none;
}

/* --- Growing submenu style overides --- */

#grow-sub {
	margin: 3px 0 0 -150px;
	width: 810px; /* Submenu width setting for horizontal submenus [original 8.2em] */
	border: none;
}

#grow-sub li {
	width: auto; /* Submenu List Item individual lists [original 8.2em] */
	background-color: #033500;
	margin: 0px;
}

#grow-sub a {
	background-color: #033500;
	background-image: url(../images/home/bkgd/submenu_brown_glass2.jpg);
}

#grow-sub a:link, #grow-sub a:visited, #grow-sub a:active {
	color: #000;
	background-color: #033500;	
	background-image: url(../images/home/bkgd/submenu_brown_glass2.jpg);
	text-decoration: none;
}

#grow-sub a:hover {
	color: #009900;
	background-color: #033500;	
	background-image: url(../images/home/bkgd/submenu_brown_glass2.jpg);
	text-decoration: none;
}

/* --- Serving submenu style overides --- */

#serve-sub {
	margin: 3px 0 0 -130px;
	width: 810px; /* Submenu width setting for horizontal submenus [original 8.2em] */
	border: none;
}

#serve-sub li {
	width: auto; /* Submenu List Item individual lists [original 8.2em] */
	background-color: #033500;
	background-image: url(../images/home/bkgd/submenu_brown_glass2.jpg);
	margin: 0px;
}

#serve-sub a {
	background-color: #033500;
	background-image: url(../images/home/bkgd/submenu_brown_glass2.jpg);
}

#serve-sub a:link, #serve-sub a:visited, #serve-sub a:active {
	color: #000;
	background-color: #033500;	
	background-image: url(../images/home/bkgd/submenu_brown_glass2.jpg);
	text-decoration: none;
}

#serve-sub a:hover {
	color: #009900;
	background-color: #033500;	
	background-image: url(../images/home/bkgd/submenu_brown_glass2.jpg);
	text-decoration: none;
}

/* --- Prayer submenu style overides --- */

#prayer-sub {
	margin: 3px 0 0 -130px;
	width: 810px; /* Submenu width setting for horizontal submenus [original 8.2em] */
	border: none;
}

#prayer-sub li {
	width: auto; /* Submenu List Item individual lists [original 8.2em] */
	background-color: #033500;
	background-image: url(../images/home/bkgd/submenu_brown_glass2.jpg);
	margin: 0px;
}

#prayer-sub a {
	background-color: #033500;
	background-image: url(../images/home/bkgd/submenu_brown_glass2.jpg);
}

#prayer-sub a:link, #prayer-sub a:visited, #prayer-sub a:active {
	color: #000;
	text-decoration: none;
	background-color: #033500;
	background-image: url(../images/home/bkgd/submenu_brown_glass2.jpg);
}

#prayer-sub a:hover {
	color: #009900;
	text-decoration: none;
	background-color: #033500;
	background-image: url(../images/home/bkgd/submenu_brown_glass2.jpg);
}

/* --- Contact SBC submenu style overides --- */

#contact-sub {
	margin: 3px 0 0 -200px;
	width: 810px; /* Submenu width setting for horizontal submenus [original 8.2em] */
	border: none;
}

#contact-sub li {
	width: auto; /* Submenu List Item individual lists [original 8.2em] */
	background-color: #033500;
	background-image: url(../images/home/bkgd/submenu_brown_glass2.jpg);
	margin: 0px;
}

#contact-sub a {
	background-color: #033500;
	background-image: url(../images/home/bkgd/submenu_brown_glass2.jpg);
}

#contact-sub a:link, #contact-sub a:visited, #contact-sub a:active {
	color: #000;
	text-decoration: none;
	background-color: #033500;
	background-image: url(../images/home/bkgd/submenu_brown_glass2.jpg);
}

#contact-sub a:hover {
	color: #009900;
	text-decoration: none;
	background-color: #033500;
	background-image: url(../images/home/bkgd/submenu_brown_glass2.jpg);
}

/* --- --- */

#mainContent  {
	position: relative;
	width: 1004px;
	margin: 0px auto; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. */
	padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	border: none;
}

#sidebar1  {
	/*position: absolute;*/
	/*top: 151px;*/
	/*left: 25px;*/
	float: left;
	width: 668px; /* 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 */
	height: 348px;
	background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 4px;
	margin: 30px 10px;
}

#sidebar2  {
	/*position: absolute;*/
	/*top: 151px;*/
	/*right: 25px;*/
	float: left;
	width: 230px; /* 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 */
	height: 348px;
	background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 4px;/* padding: 15px 10px 15px 20px; */
	margin: 30px 5px 20px 20px;
}

#sidebar3  {
	/*position: absolute;*/
	/*top: 151px;*/
	/*right: 25px;*/
	width: 936px; /* 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 */
	height: 124px;
	background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 4px;/* padding: 15px 10px 15px 20px; */
	margin: 20px 0px 20px 10px;
	clear: left;
}

#sidebar4  {
	/*position: absolute;*/
	/*top: 151px;*/
	/*left: 25px;*/
	float: left;
	width: 668px; /* 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 */
	/*height: 348px;*/
	background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 4px;
	margin: 10px;
}

#sidebar5  {
	/*position: absolute;*/
	/*top: 151px;*/
	/*right: 25px;*/
	float: left;
	width: 230px; /* 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 */
	/*height: 100px;*/
	background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 4px;/* padding: 15px 10px 15px 20px; */
	margin: 10px 5px 20px 20px;
}

#sidebar6  {
	/*position: absolute;*/
	/*top: 151px;*/
	/*right: 25px;*/
	float: left;
	width: 230px; /* 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 */
	/*height: 100px;*/
	background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 4px;/* padding: 15px 10px 15px 20px; */
	margin: 10px 5px 20px 20px;
}

#footer  {
	bottom: 0px;
	padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#DDDDDD;
	height: 150px;
} 
#footer  p  {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.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;
}
[end css code]

[the css code default for menu by Dreamweaver]
Code:
@charset "UTF-8";

/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

 *******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [URL unfurl="true"]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/URL] */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: center;
	cursor: pointer;
	width: auto;
	float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	width: 8.2em; /* Submenu width setting for horizontal submenus [original 8.2em] */
	position: absolute;
	left: -1000em;
	display: block;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	width: auto; /* Submenu List Item individual lists [original 8.2em] */
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0;
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
	border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #EEE;
	padding: 0.5em 0.75em;
	color: #333;
	text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	background-color: #33C;
	color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	background-color: #033500;
	color: #FFF;
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	/*background-image: url(SpryMenuBarDown.gif);*/
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	/*background-image: url(SpryMenuBarRight.gif);*/
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	/*background-image: url(SpryMenuBarDownHover.gif);*/
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	/*background-image: url(SpryMenuBarRightHover.gif);*/
	background-repeat: no-repeat;
	background-position: 95% 50%;
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
	position: absolute;
	z-index: 1010;
	filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarHorizontal li.MenuBarItemIE
	{
		display: inline;
		f\loat: left;
		background: #FFF;
	}
}
[end dreamweaver code]

if you need anything else, please advise.

thanks again.
nitefisher1
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top