Solved

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

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

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

777 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