...

View Full Version : Drop down menu problem



rickfink
01-18-2009, 06:22 AM
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:


<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:


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!

abduraooft
01-18-2009, 10:37 AM
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
(http://validator.w3.org/check?uri=http%3A%2F%2Fwww.baysidesuperior.org%2FBayside&charset=%28detect+automatically%29&doctype=Inline&group=0)
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 (http://htmldog.com/articles/suckerfish/dropdowns/), which is very easy to learn and customise.

rickfink
01-23-2009, 05:26 PM
Awesome thanks the DOCTYPE worked. I think I had that in there at one point but somehow it go deleted. Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum