Solved

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

Posted on 2011-03-08
1
330 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When you work with shopping cart / ecommerce relates web sites, you need to pass the certain form post details to the payment gateway process page with required details for the products items you give to order. Also you may need to track the ordered…
Most of the sites are being standardized with W3C Web Standards. W3C provides lot of web standard services to the web. They have the web specification, process and documentation for all the web standards. You can apply HTML, CSS and Accessibility st…
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

829 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