Solved

IE CSS Problem

Posted on 2009-03-30
5
868 Views
Last Modified: 2013-12-08
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!
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>

Open in new window

0
Comment
Question by:uncleramsay
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 11

Expert Comment

by:level9wizard
ID: 24024461
Can you post the HTML? If you haven't validated your code or provided a dtd it can cause compatibility issues between browsers.

Defining a Doctype [DTD]
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Validating your code:
http://validator.w3.org/
0
 
LVL 3

Author Comment

by:uncleramsay
ID: 24024505
The HTML is posted, underneath the CSS.

Both CSS and HTML validate correctly.
0
 
LVL 4

Accepted Solution

by:
jwmcpeak earned 250 total points
ID: 24025775
I made the changes below. I tested in Firefox, IE8 (in both standards and compatibility mode). I can't test in IE6 or 7 until Tuesday morning.
#menu li
{
    float: left;
    position: relative; /* I added this */
}
 
#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;
}

Open in new window

0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24026097
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.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>
0
 
LVL 3

Author Closing Comment

by:uncleramsay
ID: 31564566
Thanks a lot for that, brill! :)
0

Featured Post

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Prevent surfing 14 47
Position Absolute Goes Beyond Parent 11 21
PHP Web Development 6 25
[Bootstrap] Navigation Bar Collapse 27 38
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question