Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2011-03-08
1
Medium Priority
?
339 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
[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
1 Comment
 
LVL 3

Accepted Solution

by:
Duboux earned 2000 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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

722 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