Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Drop down menu problem

    Trying to get a drop down menu to work right in IE. Works great in Firefox but IE compresses it. Here's the link:

    www.baysidesuperior.org/Bayside

    html:

    Code:
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>Bayside Baptist Church</title>
    	<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
        <style type="text/css">
    <!--
    .style1 {font-weight: bold}
    .style2 {
    	color: #94A652;
    	font-size: 19px;
    }
    .style5 {font-size: 18px; color: #94A652; }
    .style6 {
    	font-size: 11px
    }
    .style7 {font-size: 12px}
    -->
        </style>
        
        
        
        
        <script type="text/javascript">
    var timeout	= 500;
    var closetimer	= 0;
    var ddmenuitem	= 0;
    
    // open hidden layer
    function mopen(id)
    {	
    	// cancel close timer
    	mcancelclosetime();
    
    	// close old layer
    	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    
    	// get new layer and show it
    	ddmenuitem = document.getElementById(id);
    	ddmenuitem.style.visibility = 'visible';
    
    }
    // close showed layer
    function mclose()
    {
    	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    }
    
    // go close timer
    function mclosetime()
    {
    	closetimer = window.setTimeout(mclose, timeout);
    }
    
    // cancel close timer
    function mcancelclosetime()
    {
    	if(closetimer)
    	{
    		window.clearTimeout(closetimer);
    		closetimer = null;
    	}
    }
    
    // close layer when click-out
    document.onclick = mclose; 
    
    </script>
        
        
        
        
        
        
    </head>
    
    <body>
    <div id="wrapper">
    <div id="header">
          <div id="logo">
    		<h1>Bayside Baptist Church</h1>
              </div>
              <div id="logo2">
              <h1 class="style7">Service Times:<br>
                Sunday at 9:15am
              </h1>
              </div>
    
              
            <div id="nav">
    <ul id="sddm">
    	<li><a href="index.html" onMouseOver="mopen('m1')" onMouseOut="mclosetime()">Home</a>
    
    	</li>
    	<li><a href="#" onMouseOver="mopen('m2')" onMouseOut="mclosetime()">Ministries</a>
    		<div id="m2" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
    		<a href="#">For Men</a>
    		<a href="#">For Women</a>
    		<a href="#">Children's Ministry</a>
    		<a href="#">Young Adults</a>
            <a href="#">Senior Adults</a>
    		<a href="#">DivorceCare</a>
    		<a href="#">Missions</a>
            <a href="#">Outreach</a>
    		<a href="#">Journey of Faith</a>
            <a href="#">Small Grup Bible Study</a>
            <a href="#">Christian Education Hour</a>
    		</div>
    	</li>
    	<li><a href="#" onMouseOver="mopen('m3')" onMouseOut="mclosetime()">Calendar</a>
    		<div id="m3" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
    		<a href="#">Interactive Calendar</a>
    		<a href="#">PDF Calendar</a>
            <a href="#">PDF Newsletter</a>
    		</div>
    	</li>
    	<li><a href="#" onMouseOver="mopen('m4')" onMouseOut="mclosetime()">Connect</a>
    		<div id="m4" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
    		<a href="#">Staff Positions</a>
    		<a href="#">Prayer</a>
            <a href="#">Christian Education Hour</a>
    		<a href="#">Young Adults</a>
            <a href="#">Worship Team</a>
            <a href="#">Gretting</a>
    		<a href="#">Children's Ministry</a>
            <a href="#">Martha Ministry</a>
    		</div>
    	</li>
    	<li><a href="faq.html" onMouseOver="mopen('m5')" onMouseOut="mclosetime()">FAQ</a>
    		<div id="m5" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
    		<a href="#">How to Know Jesus</a>
    		<a href="#">What We Believe</a>
    		<a href="#">Constitution</a>
            <a href="#">Helpful Links</a>
    		<a href="#">Tools</a>
    		</div>
    	</li>
        <li><a href="youth.html" onMouseOver="mopen('m6')" onMouseOut="mclosetime()">Youth</a>
    
    	</li>
        	<li><a href="#" onMouseOver="mopen('m7')" onMouseOut="mclosetime()">Pictures</a>
    
    	</li>
        	<li><a href="#" onMouseOver="mopen('m8')" onMouseOut="mclosetime()">Contact</a>
    		  <div id="m8" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
    		<a href="#">Staff</a>
    		<a href="#">Directions</a>
    		<a href="#">Prayer Requests</a>
    		</div>
    	</li>
            
    </ul>
    <div style="clear:both"></div>
    
    <div style="clear:both"></div>
    
    </div>
    
    
            
    		</div>
    <div id="headline">
    			<div id="photo"><div><img src="images/pic_1.jpg" width="618" height="254" alt="Pic 1"></div></div>
    			<div id="search-news">
    				<h2 class="downcast">Sermons</h2>
    				<div id="news-box">
    				  <p class="style1"><a href=".../Sermons/01.11.09.m3u">01.11.09</a></p>
    				  <p><strong>01.04.09</strong></p>
    				  <p><strong>12.28.08</strong></p>
    			  </div>
    				
    			  <h2 class="downcast">News &amp; Events</h2>
    				<div id="news-box">
    					<h3><a href="#">12.21.08</a></h3>
    					<p> Join us at the <strong>Christmas Program</strong> for a time filled with music...</p>
    				  <p class="more"><a href="#">more</a></p>
    				  <h3><a href="#">12.24.08</a></h3>
    				  <p>Come to the <strong>Christmas Eve Candlelight Service</strong> to celebrate...</p>
    				  <p class="more"><a href="#">more</a></p>
    				</div>
    			</div>
    			<div class="clear"></div>
    	  </div>
    		<div id="body">
    			<div id="body-left">
                
    				<h2 class="style2">Welcome to Bayside</h2>
    			<p class="style6">Our purpose   				at Bayside is to help people of all ages   				experience the fullness of life that God has made available   				through a personal relationship with Jesus Christ.* Simply   				put, we gather in faith, serve in love, and proclaim hope as we   				love God and love people.* We hope you will join us; we   				look forward to getting to know you.</p>
    				
    			  <p class="more">&nbsp;</p>
    			  <h2 class="style5">Services</h2>
    			  <img src="images/welcome.gif" alt="" width="150" height="114" class="left" />
    			  <p class="style6">Our <strong>9:15 service</strong> combines contemporary worship music and   				traditional hymns with a relevant message from Scripture that   				has real life-changing application to provide a complete worship   				experience.* We would enjoy having you join us on a regular   				basis as we seek to encourage one another to live out the truths   				of the Bible in our daily lives.**</p>
      <ul class="plussbullets">
    					<li><a href="#">Kids Corner</a></li>
    					<li><a href="#">Teen Studies</a></li>
    					<li><a href="#">Christian Education Hour</a></li>
    			  </ul>
    		  </div>
    			<div id="body-right">
                <h2 class="style5">Sermon Series</h2>
    			  <h2><img src="images/church.jpg" width="321" height="56" alt="Pic 2"></h2>
    <p class="style6">Our purpose at Bayside is to help people of all ages experience the fullness of life that God has made available through a personal relationship with Jesus Christ.*Simply put, we gather in faith, serve in love, and proclaim hope as we love God and love people.*We hope you will join us; we look forward to getting to know you.</p>
    				<p class="more">&nbsp;</p>
    				<h2>&nbsp;</h2>
    				<div id="gallery">
    				  <p><a href="#"><img src="images/headphones.gif" alt="Gal 1" width="100" height="64"></a></p>
    			    </div>
                    
    		  </div>
                <div class="clear">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    
    		  </div>
    		</div>
    	</div>
    	<div id="footer">
    		<p>Bayside Baptist Church - 3915 N 16th Street - Superior, Wisconsin 54880 - 715.394.6002</p>
    </div>
    </body>
    </html>
    css:

    Code:
    html, body, ul, li {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    img {
    	border-top-width: 0;
    	border-right-width: 0;
    	border-bottom-width: 0;
    	border-left-width: 0;
    }
    a {
    	font-weight: bold;
    	text-decoration: none;
    }
    a:hover {
    	text-decoration: underline;
    }
    .more {
    	text-align: right;
    }
    .left {
    	float: left;
    	margin-right: 10px;
    }
    .right {
    	float: right;
    }
    .clear {
    	clear: both;
    }
    
    body, h1, h2, h3, form {
    	font: 10px tahoma, arial, sans-serif;
    	margin: 0;
    	padding: 0;
    	color: #5C5C5C;
    }
    
    body {
    	background: url(images/header_bg.jpg) repeat-x;
    	text-align: center;
    }
    #wrapper {
    	text-align: left;
    	margin: auto;
    	width: 774px;
    }
    
    
    
    
    #header {
    	height: 203px;
    	width: 774px;
    	position: absolute;
    
    }
    
    #header h1 {
    	margin-top: 44px;
    	font-family: "Futura Md BT";
    	font-size:18px;
    	color: #e1e1c8;
    }
    #header h1 img {
    	display: block;
    }
    
    
    #logo {
    
    }
    
    #logo h1, #logo h2 {
    
    	float: left;
    
    	margin: 0;
    
    	padding: 0 0 0 10px;
    
    	line-height: normal;
    
    }
    
    #logo h1 {
    	font-family: "Futura Md BT";
    	font-size:19px;
    	font-style: normal;
    	color: #e1e1c8;
    	padding-top: 67px;
    	padding-left: 0px;
    
    
    }
    
    
    
    #logo2 {
    
    }
    
    #logo2 h1, #logo h2 {
    
    	float: left;
    
    	margin: 0;
    
    	padding: 0 0 0 10px;
    
    	line-height: normal;
    
    }
    
    #logo2 h1 {
    	font-family: "Futura Md BT";
    	font-size:12px;
    	font-style: normal;
    	color: #e1e1c8;
    	padding-top: 62px;
    	padding-left: 275px;
    	font-weight: 400;
    	font-variant: normal;
    
    }
    
    #logo3 {
    	height: 95px;
    	position: absolute;
    	width: 565px;
    	left: 210px;
    	top: 0px;
    }
    
    
    #logo3 h3 {
    
    	float: left;
    
    	margin: 0;
    
    	padding: 0 0 0 10px;
    
    	line-height: normal;
    
    }
    
    #logo3 h3 {
    	font-family: "Futura Md BT";
    	font-size:12px;
    	font-style: normal;
    	color: #e1e1c8;
    	padding-top: 80px;
    	padding-left: 275px;
    	font-weight: 400;
    	font-variant: normal;
    	}
    
    
    
    #nav {
    	margin-top: 95px;
    	background: url(images/menu.gif) no-repeat left top;
    	height: 45px;
    	width: 639px;
    
    }
    #nav img {
    	float: left;
    }
    
    
    
    
    #menu {
    
    	float: left;
    
    	width: 639px;
    
    	height: 44px;
    
    }
    
    
    
    #menu ul {
    
    	margin: 0;
    
    	padding: 0px 0 0 20px;
    
    	list-style: none;
    
    	line-height: normal;
    
    }
    
    
    
    #menu li {
    
    	display: block;
    	float: left;
    	background: 0px 12px url(images/divider.jpg) no-repeat;
    
    }
    
    
    
    #menu a {
    	display: block;
    	letter-spacing: -.5px;
    	text-decoration: none;
    	text-transform: none;
    	color: #FFFFFF;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	padding-top: 20px;
    	padding-right: 23px;
    	padding-bottom: 8px;
    	padding-left: 22px;
    	font-weight: bold;
    	
    
    }
    
    
    
    #menu a:hover { 
    
    	text-decoration: none; 
    
    	color: #FFFFFF;
    
    }
    
    
    
    #menu .current_page_item a {
    
    	color: #FFFFFF;
    
    }
    
    
    
    
    
    
    #sddm
    {
    	z-index: 50;
    	width: 639px;
    	float: left;
    	margin-top: 12px;
    }
    
    #sddm li
    {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	float: left;
    	font: bold 11px arial;
    }
    
    #sddm li:hover{
      background:#8b9b5c;
    }
    
    #sddm li a
    {
    	display: block;
    	width: 56px;
    	color: #FFF;
    	text-align: center;
    	text-decoration: none;
    	margin-top: 0;
    	margin-right: 1px;
    	margin-bottom: 0;
    	margin-left: 0;
    	padding-top: 8px;
    	padding-right: 11px;
    	padding-bottom: 8px;
    	padding-left: 11px;
    }
    
    #sddm li a:hover
    {	background: #8b9b5c;
    }
    
    
    #sddm div
    {
    	visibility: hidden;
    	margin: 0;
    	padding: 0;
    	background: #EAEBD8;
    	border: 1px solid #ffffff;
    	position: absolute;
    	}
    
    	#sddm div a
    	{	position: relative;
    		display: block;
    		margin: 0;
    		padding: 5px 10px;
    		width: auto;
    		white-space: nowrap;
    		text-align: left;
    		text-decoration: none;
    		background: #57574e;
    		color: #ffffff;
    		font: 11px arial}
    
    	#sddm div a:hover
    	{	background: #8b9b5c;
    		color: #FFF}
    
    
    
    
    
    
    
    
    
    
    
    #headline {
    	padding-top: 205px;
    }
    
    #photo {
    	float: left;
    	width: 624px;
    }
    #photo div {
    	border: 1px solid #D8D8D8;
    	padding: 2px;
    }
    #photo img {
    	display: block;
    }
    
    #search-news {
    	float: right;
    	width: 140px;
    }
    #search-news div {
    	padding: 3px 0;
    	margin: 0;
    }
    #search-news #q {
    	width: 140px;
    	border: 1px solid #859D31;
    }
    #search-news .downcast {
    	background: #E6E7E7;
    	border-top: 1px solid #CFD0D0;
    	padding: 3px 4px 4px 4px;
    	margin: 2px 0 0 0;
    }
    #search-news h3 {
    	background: url(images/bullet_letter.gif) no-repeat;
    	padding-left: 15px;
    	font-weight: bold;
    	margin: 1em 0 0.4em 0;
    }
    #search-news p {
    	padding-left: 15px;
    	padding-right: 2px;
    	margin-top: 0.1em;
    	margin-right: 0;
    	margin-bottom: 0.1em;
    	margin-left: 0;
    }
    a {
    	font-weight: bold;
    	color: #5C5C5C;
    }
    
    #body {
    	padding-top: 2em;
    	text-align: justify;
    }
    
    #body-left {
    	float: left;
    	width: 408px;
    }
    #body-right {
    	width: 330px;
    	float: right;
    }
    
    #body-left ul.plussbullets {
    	margin-top: 20px;
    	margin-left: 150px;
    	padding: 0;
    	font-weight: bold;
    }
    #body-left ul.plussbullets li {
    	background: top left url(images/bullet_plus.gif) no-repeat;
    	margin: 0 0 10px 0;
    	padding: 0 0 0 25px;
    }
    
    #body h2, #body p {
    	margin: 0.3em 0;
    }
    
    #body-right p {
    	margin-right: 2em;
    }
    
    #body a.green {
    	color: #9AAB68;
    	font-weight: normal;
    	text-decoration: underline;
    }
    
    #gallery img {
    	float: left;
    }
    
    #footer {
    	color: #FFFFFF;
    	background: #42453D url(images/footer_bg.gif) repeat-x;
    	padding: 6px 0 5px 0;
    	margin-top: 2em;
    	font-weight: bold;
    }
    #footer p {
    	margin: 0;
    	padding: 0;
    }

    If you open the link up top in IE and firefox you can see the difference.

    Thanks!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Hi rickfink,
    To expect a cross browser compatibility, we need to supply a valid markup to the browsers. See the errors in your current markup

    The first step to make a valid document, is to apply a valid DOCTYPE at the beginning, check http://www.alistapart.com/stories/doctype/

    Now, I'd recommend the son of suckerfish drop down, which is very easy to learn and customise.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    rickfink (01-23-2009)

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Awesome thanks the DOCTYPE worked. I think I had that in there at one point but somehow it go deleted. Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •