uncleramsay
asked on
IE CSS Problem
I have code for a menu with a drop down javascript submenu.
It works perfectly in Chrome and Firefox, but in IE7, the CSS makes the drop down list appear underneath the element to the right of the top menu element. I can't figure out why!
Any help would be appreciated!
It works perfectly in Chrome and Firefox, but in IE7, the CSS makes the drop down list appear underneath the element to the right of the top menu element. I can't figure out why!
Any help would be appreciated!
CSS:
/* Menu */
#menu {
width: 950px;
height: 40px;
margin: 0 auto;
}
#menu ul {
margin: 0;
padding: 0 0 0 25px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
float: left;
}
#menu a {
float: left;
padding: 10px 20px;
margin-right: 2px;
background: #64E11B;
text-transform: uppercase;
text-decoration: none;
font: bold 10px Arial, Helvetica, sans-serif;
color: #000000;
}
#menu a:hover, #menu .current_page_item a {
background: #3333CC;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: underline;
}
#menu ul div {
position: absolute;
visibility: hidden;
margin-top: 32px;
padding: 0;
}
#menu ul div a {
float: none;
position: relative;
display: block;
margin-top: 1px;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #64E11B;
color: #000000;
font: bold 10px Arial, Helvetica, sans-serif;
}
#menu ul div a:hover {
background: #3333CC;
color: #FFFFFF;
}
HTML:
<html>
<head>
<link href="temp.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
var ddmenuitem = 0;
function mopen(id)
{
if(ddmenuitem)
ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
function mclose()
{
if(ddmenuitem)
ddmenuitem.style.visibility = 'hidden';
}
document.onclick = mclose;
</script>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="/aboutus.php" onmouseover="mopen('about')" onmouseout="mclose()">About Us</a>
<div id="about" onmouseover="mopen('about')" onmouseout="mclose()" style="opacity:0.9;filter:alpha(opacity=90);">
<a href="/aboutus.php?page=leaders"">Leadership Team</a>
<a href="/aboutus.php?page=programme">Weekly Programme</a>
<a href="/aboutus.php?page=prayer">Prayer Ministry</a>
<a href="/aboutus.php?page=sundays">Sunday Worship</a>
<a href="/aboutus.php?page=smallgroups">Small Groups</a>
<a href="/aboutus.php?page=kids">Children and Youth</a>
<a href="/aboutus.php?page=homeleague">Home League</a>
<a href="/aboutus.php?page=friendshipclub">Friendship Club</a>
<a href="/aboutus.php?page=building">Our Building</a>
<a href="/aboutus.php?page=history">Our History</a>
<a href="/aboutus.php?page=getinvolved">Get Involved!</a>
<a href="/aboutus.php?page=faq">FAQ</a>
</div>
</li>
<li>
<a href="/news.php">News</a>
</li>
<li>
<a href="/diary.php">Diary</a>
</li>
<li>
<a href="/beliefs.php" onmouseover="mopen('beliefs')" onmouseout="mclose()">Our Beliefs</a>
<div id="beliefs" onmouseover="mopen('beliefs')" onmouseout="mclose()" style="opacity:0.9;filter:alpha(opacity=90);">
<a href="/beliefs.php">Doctrines (Set of Beliefs)</a>
<a href="/beliefs.php?section=worship">Worship</a>
<a href="/beliefs.php?section=fellowship">Fellowship</a>
<a href="/beliefs.php?section=discipleship">Discipleship</a>
<a href="/beliefs.php?section=ministry">Ministry</a>
<a href="/beliefs.php?section=mission">Mission</a>
</div>
</li>
<li>
<a href="/music.php" onmouseover="mopen('music')" onmouseout="mclose()">Our Music</a>
<div id="music" onmouseover="mopen('music')" onmouseout="mclose()" style="opacity:0.9;filter:alpha(opacity=90);">
<a href="/music.php?group=worshipband">Worship Band</a>
<a href="/music.php?group=songsters">Songsters</a>
<a href="/music.php?group=band">Senior Band</a>
<a href="/music.php?group=singingco">Singing Company</a>
<a href="/music.php?group=ypband">Junior Band</a>
<a href="/music.php?group=doxology">DoXology</a>
</div>
</li>
<li>
<a href="/facilities.php" onmouseover="mopen('facilities')" onmouseout="mclose()">Our Facilities</a>
<div id="facilities" onmouseover="mopen('facilities')" onmouseout="mclose()" style="opacity:0.9;filter:alpha(opacity=90);">
<a href="/facilities.php?page=cafe">Re:Creation Café</a>
<a href="/facilities.php?page=shops">Charity Shops</a>
<a href="/facilities.php?page=tapes">Tape/CD Fellowship</a>
<a href="/facilities.php?page=conferences">Conference Facilities</a>
</div>
</li>
<li>
<a href="/downloads.php">Downloads</a>
</li>
<li>
<a href="/guestbook.php">Guestbook</a>
</li>
<li>
<a href="/contact.php">Contact Us</a>
</li>
</ul>
</div>
</body>
</html>
ASKER
The HTML is posted, underneath the CSS.
Both CSS and HTML validate correctly.
Both CSS and HTML validate correctly.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Final Code.. Tested on All Browsers
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
/* Menu */
#menu {
width: 950px;
height: 40px;
margin: 0 auto;
}
#menu ul {
margin: 0;
padding: 0 0 0 25px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li
{
float: left;
position: relative; /* I added this */
}
#menu a {
float: left;
padding: 10px 20px;
margin-right: 2px;
background: #64E11B;
text-transform: uppercase;
text-decoration: none;
font: bold 10px Arial, Helvetica, sans-serif;
color: #000000;
}
#menu a:hover, #menu .current_page_item a {
background: #3333CC;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: underline;
}
#menu ul div
{
position: absolute;
visibility: hidden;
margin-top: 32px;
padding: 0;
left: 0; /* I added this */
}
#menu ul div a
{
float: none;
position: relative;
display: block;
/* margin-top: 1px; I removed this for IE; the margin causes the mouseout event to fire when it shouldn't */
border-top: 1px solid white; /* This does the same as the margin visually and keeps IE from firing mouseout prematurely */
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #64E11B;
color: #000000;
font: bold 10px Arial, Helvetica, sans-serif;
}
#menu ul div a:hover {
background: #3333CC;
color: #FFFFFF;
}
</style>
<script type="text/javascript">
var ddmenuitem = 0;
function mopen(id)
{
if(ddmenuitem)
ddmenuitem.style.visibilit y = 'hidden';
ddmenuitem = document.getElementById(id );
ddmenuitem.style.visibilit y = 'visible';
}
function mclose()
{
if(ddmenuitem)
ddmenuitem.style.visibilit y = 'hidden';
}
document.onclick = mclose;
</script>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="/aboutus.php" onmouseover="mopen('about' )" onmouseout="mclose()">Abou t Us</a>
<div id="about" onmouseover="mopen('about' )" onmouseout="mclose()" style="opacity:0.9;filter: alpha(opac ity=90);">
<a href="/aboutus.php?page=le aders"">Le adership Team</a>
<a href="/aboutus.php?page=pr ogramme">W eekly Programme</a>
<a href="/aboutus.php?page=pr ayer">Pray er Ministry</a>
<a href="/aboutus.php?page=su ndays">Sun day Worship</a>
<a href="/aboutus.php?page=sm allgroups" >Small Groups</a>
<a href="/aboutus.php?page=ki ds">Childr en and Youth</a>
<a href="/aboutus.php?page=ho meleague"> Home League</a>
<a href="/aboutus.php?page=fr iendshipcl ub">Friend ship Club</a>
<a href="/aboutus.php?page=bu ilding">Ou r Building</a>
<a href="/aboutus.php?page=hi story">Our History</a>
<a href="/aboutus.php?page=ge tinvolved" >Get Involved!</a>
<a href="/aboutus.php?page=fa q">FAQ</a>
</div>
</li>
<li>
<a href="/news.php">News</a>
</li>
<li>
<a href="/diary.php">Diary</a >
</li>
<li>
<a href="/beliefs.php" onmouseover="mopen('belief s')" onmouseout="mclose()">Our Beliefs</a>
<div id="beliefs" onmouseover="mopen('belief s')" onmouseout="mclose()" style="opacity:0.9;filter: alpha(opac ity=90);">
<a href="/beliefs.php">Doctri nes (Set of Beliefs)</a>
<a href="/beliefs.php?section =worship"> Worship</a >
<a href="/beliefs.php?section =fellowshi p">Fellows hip</a>
<a href="/beliefs.php?section =disciples hip">Disci pleship</a >
<a href="/beliefs.php?section =ministry" >Ministry< /a>
<a href="/beliefs.php?section =mission"> Mission</a >
</div>
</li>
<li>
<a href="/music.php" onmouseover="mopen('music' )" onmouseout="mclose()">Our Music</a>
<div id="music" onmouseover="mopen('music' )" onmouseout="mclose()" style="opacity:0.9;filter: alpha(opac ity=90);">
<a href="/music.php?group=wor shipband"> Worship Band</a>
<a href="/music.php?group=son gsters">So ngsters</a >
<a href="/music.php?group=ban d">Senior Band</a>
<a href="/music.php?group=sin gingco">Si nging Company</a>
<a href="/music.php?group=ypb and">Junio r Band</a>
<a href="/music.php?group=dox ology">DoX ology</a>
</div>
</li>
<li>
<a href="/facilities.php" onmouseover="mopen('facili ties')" onmouseout="mclose()">Our Facilities</a>
<div id="facilities" onmouseover="mopen('facili ties')" onmouseout="mclose()" style="opacity:0.9;filter: alpha(opac ity=90);">
<a href="/facilities.php?page =cafe">Re: Creation Café</a>
<a href="/facilities.php?page =shops">Ch arity Shops</a>
<a href="/facilities.php?page =tapes">Ta pe/CD Fellowship</a>
<a href="/facilities.php?page =conferenc es">Confer ence Facilities</a>
</div>
</li>
<li>
<a href="/downloads.php">Down loads</a>
</li>
<li>
<a href="/guestbook.php">Gues tbook</a>
</li>
<li>
<a href="/contact.php">Contac t Us</a>
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
/* Menu */
#menu {
width: 950px;
height: 40px;
margin: 0 auto;
}
#menu ul {
margin: 0;
padding: 0 0 0 25px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li
{
float: left;
position: relative; /* I added this */
}
#menu a {
float: left;
padding: 10px 20px;
margin-right: 2px;
background: #64E11B;
text-transform: uppercase;
text-decoration: none;
font: bold 10px Arial, Helvetica, sans-serif;
color: #000000;
}
#menu a:hover, #menu .current_page_item a {
background: #3333CC;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: underline;
}
#menu ul div
{
position: absolute;
visibility: hidden;
margin-top: 32px;
padding: 0;
left: 0; /* I added this */
}
#menu ul div a
{
float: none;
position: relative;
display: block;
/* margin-top: 1px; I removed this for IE; the margin causes the mouseout event to fire when it shouldn't */
border-top: 1px solid white; /* This does the same as the margin visually and keeps IE from firing mouseout prematurely */
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #64E11B;
color: #000000;
font: bold 10px Arial, Helvetica, sans-serif;
}
#menu ul div a:hover {
background: #3333CC;
color: #FFFFFF;
}
</style>
<script type="text/javascript">
var ddmenuitem = 0;
function mopen(id)
{
if(ddmenuitem)
ddmenuitem.style.visibilit
ddmenuitem = document.getElementById(id
ddmenuitem.style.visibilit
}
function mclose()
{
if(ddmenuitem)
ddmenuitem.style.visibilit
}
document.onclick = mclose;
</script>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="/aboutus.php" onmouseover="mopen('about'
<div id="about" onmouseover="mopen('about'
<a href="/aboutus.php?page=le
<a href="/aboutus.php?page=pr
<a href="/aboutus.php?page=pr
<a href="/aboutus.php?page=su
<a href="/aboutus.php?page=sm
<a href="/aboutus.php?page=ki
<a href="/aboutus.php?page=ho
<a href="/aboutus.php?page=fr
<a href="/aboutus.php?page=bu
<a href="/aboutus.php?page=hi
<a href="/aboutus.php?page=ge
<a href="/aboutus.php?page=fa
</div>
</li>
<li>
<a href="/news.php">News</a>
</li>
<li>
<a href="/diary.php">Diary</a
</li>
<li>
<a href="/beliefs.php" onmouseover="mopen('belief
<div id="beliefs" onmouseover="mopen('belief
<a href="/beliefs.php">Doctri
<a href="/beliefs.php?section
<a href="/beliefs.php?section
<a href="/beliefs.php?section
<a href="/beliefs.php?section
<a href="/beliefs.php?section
</div>
</li>
<li>
<a href="/music.php" onmouseover="mopen('music'
<div id="music" onmouseover="mopen('music'
<a href="/music.php?group=wor
<a href="/music.php?group=son
<a href="/music.php?group=ban
<a href="/music.php?group=sin
<a href="/music.php?group=ypb
<a href="/music.php?group=dox
</div>
</li>
<li>
<a href="/facilities.php" onmouseover="mopen('facili
<div id="facilities" onmouseover="mopen('facili
<a href="/facilities.php?page
<a href="/facilities.php?page
<a href="/facilities.php?page
<a href="/facilities.php?page
</div>
</li>
<li>
<a href="/downloads.php">Down
</li>
<li>
<a href="/guestbook.php">Gues
</li>
<li>
<a href="/contact.php">Contac
</li>
</ul>
</div>
</body>
</html>
ASKER
Thanks a lot for that, brill! :)
Defining a Doctype [DTD]
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Validating your code:
http://validator.w3.org/