two4god07
12-20-2009, 02:18 PM
I have two webpages that look great on my computer using firefox.. and on my work computer which uses IE 8, but both webpages have had complaints.
http://www.faithmiracle.net/ they are complaining that they cant get the dropdown menus to .. well.. drop down.
Menu CSS
#menu {
width: 100%;
background: #eee;
float: left;
z-index: 50;}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 5.6em;
float: left;
z-index: 35;}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #000 #000 #000 #000;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #fff;
background: #2a0203;
text-transform: uppercase;
}
#menu a {
color: #9c7c7d;
background: #362021;
text-decoration: none;
}
#menu a:hover {
color: #000;
background: #975658;
}
#menu li {position: relative; z-index: 49;}
#menu ul ul {
position: absolute;
z-index: 500;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
Menu HTML
<div id="menu">
<ul style="width: 5.2em">
<li><a href="index.html" style="background-color: #2a0203; color: white; text-transform: uppercase;">Home</a></li>
</ul>
<ul>
<li><a href="about.html" style="background-color: #2a0203; color: white; text-transform: uppercase;">About</a>
<ul>
<li><a href="http://www.facebook.com/faithmiracle">FaceBook</a></li>
<li><a href="about.html#are">Who We Are</a></li>
<li><a href="about.html#mission">Mission</a></li>
<li><a href="about.html#value">Values</a></li>
<li><a href="about.html#believe">Beliefs</a></li></ul></li>
</ul></li>
</ul>
<ul>
<li><a href="staff.html" style="background-color: #2a0203; color: white; text-transform: uppercase;">Staff</a>
</li>
</ul>
</ul>
<ul>
<li><h2>Events</h2>
<ul>
<li><a href="events.html">Upcoming</a></li>
<li><a href="events2.html">Past Events</a></li></ul></li>
</ul>
<ul>
<li><h2>Outreach</h2>
<ul>
<li><a href="women.html">WomenOfFaith</a></li>
<li><a href="men.html">Men's Group</a></li>
<li><a href="ged.html">GED Classes</a></li>
<li><a href="recovery.html">Celebrate Recovery</a></li>
<li><a href="pantry.html">Pantries</a></li>
<li><a href="http://www.faithmiracle.net/break/index.html">Breaking Free</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="contact.html" style="background-color: #2a0203; color: white; text-transform: uppercase;">Contact</a></li>
</ul>
<ul>
<li><h2>Newsletter</h2><ul>
<li><a href="newsletter.html">Sign Up</a></li>
<li><a href="archives.html">Archives</a></li></ul></li>
</ul>
<ul>
<li><a href="prayer.html" style="background-color: #2a0203; color: white; text-transform: uppercase;">Prayer</a></li>
</ul>
<ul>
<li><a href="http://www.faithmiracle.net/break/index.html" style="background-color: #2a0203; color: white; text-transform: uppercase;">Breaking Free</a></li>
</ul>
</div>
The other page http://www.mcfact.org/ has that same issue. There was also layout complaints. One example is on the Fact Board page http://www.mcfact.org/board.html There is supposed to be two neatly aligned columns with pictures on the left side of each and names on the right side of each. It is reported that all the pictures are showing up on the left bunched together with the lables all over the place.
Can you guys help me get this cross broswer appropriate if that is the issue?
http://www.faithmiracle.net/ they are complaining that they cant get the dropdown menus to .. well.. drop down.
Menu CSS
#menu {
width: 100%;
background: #eee;
float: left;
z-index: 50;}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 5.6em;
float: left;
z-index: 35;}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #000 #000 #000 #000;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #fff;
background: #2a0203;
text-transform: uppercase;
}
#menu a {
color: #9c7c7d;
background: #362021;
text-decoration: none;
}
#menu a:hover {
color: #000;
background: #975658;
}
#menu li {position: relative; z-index: 49;}
#menu ul ul {
position: absolute;
z-index: 500;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
Menu HTML
<div id="menu">
<ul style="width: 5.2em">
<li><a href="index.html" style="background-color: #2a0203; color: white; text-transform: uppercase;">Home</a></li>
</ul>
<ul>
<li><a href="about.html" style="background-color: #2a0203; color: white; text-transform: uppercase;">About</a>
<ul>
<li><a href="http://www.facebook.com/faithmiracle">FaceBook</a></li>
<li><a href="about.html#are">Who We Are</a></li>
<li><a href="about.html#mission">Mission</a></li>
<li><a href="about.html#value">Values</a></li>
<li><a href="about.html#believe">Beliefs</a></li></ul></li>
</ul></li>
</ul>
<ul>
<li><a href="staff.html" style="background-color: #2a0203; color: white; text-transform: uppercase;">Staff</a>
</li>
</ul>
</ul>
<ul>
<li><h2>Events</h2>
<ul>
<li><a href="events.html">Upcoming</a></li>
<li><a href="events2.html">Past Events</a></li></ul></li>
</ul>
<ul>
<li><h2>Outreach</h2>
<ul>
<li><a href="women.html">WomenOfFaith</a></li>
<li><a href="men.html">Men's Group</a></li>
<li><a href="ged.html">GED Classes</a></li>
<li><a href="recovery.html">Celebrate Recovery</a></li>
<li><a href="pantry.html">Pantries</a></li>
<li><a href="http://www.faithmiracle.net/break/index.html">Breaking Free</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="contact.html" style="background-color: #2a0203; color: white; text-transform: uppercase;">Contact</a></li>
</ul>
<ul>
<li><h2>Newsletter</h2><ul>
<li><a href="newsletter.html">Sign Up</a></li>
<li><a href="archives.html">Archives</a></li></ul></li>
</ul>
<ul>
<li><a href="prayer.html" style="background-color: #2a0203; color: white; text-transform: uppercase;">Prayer</a></li>
</ul>
<ul>
<li><a href="http://www.faithmiracle.net/break/index.html" style="background-color: #2a0203; color: white; text-transform: uppercase;">Breaking Free</a></li>
</ul>
</div>
The other page http://www.mcfact.org/ has that same issue. There was also layout complaints. One example is on the Fact Board page http://www.mcfact.org/board.html There is supposed to be two neatly aligned columns with pictures on the left side of each and names on the right side of each. It is reported that all the pictures are showing up on the left bunched together with the lables all over the place.
Can you guys help me get this cross broswer appropriate if that is the issue?