Solved

Menu works great in firefox but IE7 or IE8 doesn't work

Posted on 2011-03-08
1
331 Views
Last Modified: 2012-05-11
I have created a beautiful vertical menu that works great in FireFox but doesn't work in IE7 or IE8 so not sure what is the cause.  Here is the code below
<html>
<head>
<style type="text/css">
body {
	margin:0px;
	padding:0px;
	background:#555555;
}
.innerMenu {
	margin-top:20px;
}
ul.innerMenu li {
	font-size:13px;
	width:170px;
	height:25px;
	color:#fff;
	font-weight:normal;
	list-style:none;
	background:url(/images/myarrow.png) right top no-repeat;
}
ul.innerMenu li:hover {
	width:170px;
	height:25px;
	background:#252525 url(/images/myarrow.png) right top no-repeat;
}
ul.innerMenu li:hover .subMenu {
	left:200px;
	top:auto;
	top:20px;
}
.submenu li {
	width:165px;
	height:30px;
	padding:5px;
}
.submenu li:hover {
	width:165px;
	height:30px;
	padding:5px;
}
.innerMenu li a:link {
	color:#fff;
	text-decoration:none;
}
.innerMenu li a:visited {
	color:#fff;
}
.innerMenu li a:hover {
	background:#252525;
}
.subMenu {
	float: left;
	left: -999em;/* Hide Div layers */
	margin: 0px auto;
	position: absolute;
	text-align: left;
}
</style>
</head>
<body>
<!--Start menu -->
<ul class="innerMenu">
  <li><a href="#">Main Item 1</a>
    <div class='submenu'>
      <ul>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a></li>
        <li><a href="#">Item4</a></li>
        <li><a href="#">Item5</a></li>
      </ul>
    </div>
  </li>
  <!--End Menu Item --> 
  
  <!--Start Menu -->
  <li><a href="#"> Main Item 2</a>
    <div class='submenu'>
      <ul>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
      </ul>
    </div>
  </li>
  <!--End Menu Item --> 
  
  <!--Start Menu -->
  <li><a href="#"> Main Item 3</a>
    <div class='submenu'>
      <ul>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a></li>
        <li><a href="#">Item4</a></li>
        <li><a href="#">Item5</a></li>
      </ul>
    </div>
  </li>
  <!--End Menu Item --> 
  
  <!--Start Menu -->
  <li><a href="#"> Main Item 4</a>
    <div class='submenu'>
      <ul>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a></li>
        <li><a href="#">Item4</a></li>
        <li><a href="#">Item5</a></li>
      </ul>
    </div>
  </li>
  <!--End Menu Item --> 
  
  <!--Start Menu -->
  <li><a href="#"> Main Item 5</a>
    <div class='submenu'>
      <ul>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a></li>
        <li><a href="#">Item4</a></li>
        <li><a href="#">Item5</a></li>
      </ul>
    </div>
  </li>
  <!--End Menu Item -->
  
</ul>
<!--End Menu -->

</body>
</html>

Open in new window

0
Comment
Question by:stargateatlantis
1 Comment
 
LVL 3

Accepted Solution

by:
Duboux earned 500 total points
ID: 35072984
I'd rather give u a fishing-net than the fish ;)

Add a strict doctype to your page, and work from there.
That way most browsers will all show the same.


For example add above your <html> tag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Open in new window

or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Open in new window

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

685 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