Start Free Trial

asked on

CSS Menu Not Working in IE6

You can see our site at http://www.ofallonchamber.org/. In IE7, the CSS menu pops out fine. However, in IE6 or lower, it does not. Also, from the words "Investing In Each Other" and below, the content is moved to the left. Any help is greatly appreciated.

you need a file called csshover.htc to be on your server for the menu to work in IE6. I tried to find it and couldn't -- maybe it is there but in a different folder, or maybe it isn't there at all. It is called by this in your document:
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);

btw... if you can't locate that csshover.htc file, you can get it here: http://www.xs4all.nl/~peterned/csshover.html They are up to version 3 now, so if you download their latest file you'll have to either rename their file or change your code to csshover3.htc. Or you could probably find the older version of the file, but I don't think their's any downside to using the newest one.

I meant "there's" , not "their's" .... my mom, a retired english teacher, would hang her head in shame....

missed part two of your question first time around;
I couldn't figure out the purpose of this div
.column_padding {padding-right:58px;}
But if you make that padding-right:0px then the problem with the float dropping in IE seems to be fixed.

ASKER

I added the .htc file and uncommented out those lines referencing the file in my code. It did not seem to help in IE6 and the menu is not looking so good in IE7. Take a peek....

ASKER

Removing that <div> helped with the float issue though....thanks.

I still can't find the csshover.htc or csshover3.htc on your site. I should be able to enter the address and see the whole file as plain text, like happens here:
http://sperling.com/examples/menuh/csshover.htc
So either that file has been uploaded to a different folder, or has a different name, or just didn't get uploaded.

Those comments weren't supposed to be removed. They are a special format of comment that FF will ignore completely, but IE will read the stuff inside... more info here http://reference.sitepoint.com/css/conditionalcomments.

ASKER

OK...progress.

I put the comments back in and the site now looks good in IE 7, however it is still bad in IE 6.

You can find the file by browsing to:

http://www.ofallonchamber.org/includes/csshover3.htc

you're almost there!
your code needs to reflect the actual path to the file, so
behavior: url(csshover3.htc);
should be
behavior: url(includes/csshover3.htc);

ASKER

Gosh...the dran thing still isn't working. I tried behavior: url(includes/csshover3.htc); and behavior: url(/includes/csshover3.htc);

I think the only issue is that all your styles need to be in your document header. That csshover file has to load with the body, so the declaration has to occur before the body tag. have attached recode in correct order that is working on my machine in IE6.... the path names won't be the same as on your machine, so you won't be able to cut and paste my code exactly, but if you rearrange your code in this order it should work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>O'Fallon Chamber of Commerce</title>
<link href="O%27Fallon%20Chamber%20of%20Commerce_files/style.css" rel="stylesheet" type="text/css">
<link href="O%27Fallon%20Chamber%20of%20Commerce_files/layout.css" rel="stylesheet" type="text/css">
<script src="O%27Fallon%20Chamber%20of%20Commerce_files/rollover.js" type="text/javascript"></script>
<style type="text/css">
/**************** menu coding *****************/
#menu {
	/*width: 12em;*/
width: 290px;
	background: #eee;
}
#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#menu a, #menu h2 {
	/*font: bold 11px/16px arial, helvetica, sans-serif;*/
font-family: arial, helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 100;
	display: block;
	border-width: 1px;
	border-style: solid;
	border-color: #90CE26 #7DC500 #70B100 #fff;
	margin: 0;
	/*padding: 2px 3px;*/
padding: 0px 0px;
}
#menu h2 {
	color: #fff;
	background: #000;
	text-transform: uppercase;
}
#menu a {
	color: #fff;
	background: #7dc500;
	text-decoration: none;
	/*height: 69px;*/
padding-left: 20px;
	height: 48px;
	padding-top:17px;
}
#menu a.double {
	height:65px;
	padding-top:3px;
}
#menu a:hover {
	/*color: #a00;
background: #fff;*/
color: #fff;
	background: #90CE00;
}
#menu li {
	position: relative;
}
#menu ul ul ul {
	position: absolute;
	top: 0;
	left: 100%;
	width: 100%;
}
div#menu ul ul ul, div#menu ul ul li:hover ul ul {
	display: none;
}
div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {
	display: block;
}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
 #menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {behavior: url(includes/csshover3.htc);
font-size: 100%;
} 
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;} 
 
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
} 
</style>
<![endif]-->
</head>
<body id="index">
<div id="main">
  <!--header -->
  <div id="header">
    <div class="column1">
      <div class="menu">
        <!--<a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('r1','','images/button1_active.gif',1)"><img src="images/button1_active.gif" alt="" id="r1" /></a><br />
<a href="index-1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('r2','','images/button2_active.gif',1)"><img src="images/button2.gif" alt="" id="r2" /></a><br />
<a href="index-2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('r3','','images/button3_active.gif',1)"><img src="images/button3.gif" alt="" id="r3" /></a><br />
<a href="index-3.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('r4','','images/button4_active.gif',1)"><img src="images/button4.gif" alt="" id="r4" /></a><br />
<a href="index-4.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('r5','','images/button5_active.gif',1)"><img src="images/button5.gif" alt="" id="r5" /></a><br />
<a href="index-5.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('r6','','images/button6_active.gif',1)"><img src="images/button6.gif" alt="" id="r6" /></a><br />-->
        <!-- start Menu HTML -->
        <div id="menu">
          <ul>
            <li><a href="http://www.ofallonchamber.org/busdir.aspx" title="Business Directory">BUSINESS DIRECTORY</a></li>
          </ul>
          <ul>
            <li>
              <ul>
                <li><a href="#" title="Community Info">COMMUNITY INFO &nbsp; º</a>
                  <ul>
                    <li><a href="http://www.ofallonchamber.org/history.aspx" title="History">HISTORY</a></li>
                    <li><a href="http://www.ofallonchamber.org/visiting.aspx" title="Visiting">VISITING</a></li>
                    <li><a href="http://www.ofallonchamber.org/relocating.aspx" title="Relocating">RELOCATING</a></li>
                    <li><a href="http://www.ofallonchamber.org/dining.aspx" title="Dining">DINING</a></li>
                    <li><a href="http://www.ofallonchamber.org/staying.aspx" title="Staying">STAYING</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
          <ul>
            <li><a href="http://www.ofallonchamber.org/calendar.aspx" title="Calendar and Event Registration" class="double">CALENDAR AND<br>
              EVENT REGISTRATION</a></li>
          </ul>
          <ul>
            <li>
              <ul>
                <li><a href="#" title="About Us">ABOUT US &nbsp; º</a>
                  <ul>
                    <li><a href="http://www.ofallonchamber.org/mission.aspx" title="Chamber By-Laws">CHAMBER BY-LAWS</a></li>
                    <li><a href="http://www.ofallonchamber.org/contact.aspx" title="Contact Us">CONTACT US</a></li>
                    <li><a href="http://www.ofallonchamber.org/programs.aspx" title="Programs">PROGRAMS</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
          <ul>
            <li><a href="http://www.ofallonchamber.org/appform.aspx" title="Join the Chamber">JOIN THE CHAMBER</a></li>
          </ul>
          <ul>
            <li>
              <ul>
                <li><a href="#" title="The Newsroom">THE NEWSROOM &nbsp; º</a>
                  <ul>
                    <li><a href="http://www.ofallonchamber.org/membernews.aspx" title="Member News">MEMBER NEWS</a></li>
                    <li><a href="http://www.ofallonchamber.org/chambernews.aspx" title="Chamber News">CHAMBER NEWS</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="column2">
      <div class="container">
        <div class="left"> <a href="http://www.ofallonchamber.org/default.aspx"><img alt="O'Fallon Chamber of Commerce" src="O%27Fallon%20Chamber%20of%20Commerce_files/logo.jpg" border="0"></a><br>
        </div>
        <div class="right"> <a href="http://www.ofallonchamber.org/default.aspx">Home</a>
          <!-- &nbsp; | &nbsp; <a href="#">Sitemap</a>-->
        </div>
        <div class="clear"></div>
      </div>
      <img alt="" src="O%27Fallon%20Chamber%20of%20Commerce_files/slogan.jpg"><img alt="" src="O%27Fallon%20Chamber%20of%20Commerce_files/header_img.jpg"><br>
      <span class="smgraytext" style="padding-left: 445px;">Photo by <a href="http://www.cpiphotography.com/" target="_new">Cindy's Photo Impressions</a></span> <br>
    </div>
    <div class="clear"></div>
  </div>
  <!--header end-->
  <div id="middle">
    <div class="container">
      <div class="column1">
        <!--<div class="column_padding">-->
        <!--<img alt="" src="images/page1_title1.gif" class="title2"><br>-->
        <a href="http://www.spiritofofallonaward.com/" target="_new"><img src="O%27Fallon%20Chamber%20of%20Commerce_files/30.gif"></a><br>
        <p><a href="http://www.fishwindowcleaning.com/stores/index/545" target="_new"><img src="O%27Fallon%20Chamber%20of%20Commerce_files/25.gif"></a></p>
        <!--</div>-->
      </div>
      <div class="column2"> <img alt="" src="O%27Fallon%20Chamber%20of%20Commerce_files/page1_title2.gif" class="title"><br>
        <div class="container">
          <div class="col1">
            <div class="col_pad"> <img alt="" src="O%27Fallon%20Chamber%20of%20Commerce_files/page1_img1.jpg"><br>
              <h2 class="under"><a href="http://www.ofallonchamber.org/map.aspx">Map</a></h2>
              Locate Chamber members on an interactive Google map through a searchable database.<br>
              <a href="http://www.ofallonchamber.org/map.aspx" class="more">more..</a> </div>
          </div>
          <div class="col2">
            <div class="col_pad"> <img alt="" src="O%27Fallon%20Chamber%20of%20Commerce_files/page1_img2.jpg"><br>
              <h2 class="under"><a href="http://www.ofallonchamber.org/gallery.aspx">Photo Gallery</a></h2>
              View photos from past Chamber events.<br>
              <a href="http://www.ofallonchamber.org/gallery.aspx" class="more">more..</a> </div>
          </div>
          <div class="col3"> <img alt="" src="O%27Fallon%20Chamber%20of%20Commerce_files/page1_img3.jpg"><br>
            <h2 class="under"><a href="http://www.ofallonchamber.org/calendar.aspx">Events</a></h2>
            Your insight to up and coming Chamber happenings.<br>
            <a href="http://www.ofallonchamber.org/calendar.aspx" class="more">more..</a> </div>
          <div class="clear"></div>
        </div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
  <!--footer -->
  <div id="footer">
    <p>
      <!--<span class="menu"><A href="index.html">Home</A> &nbsp; | &nbsp; 
<A href="index-1.html">About Us</A> &nbsp; | &nbsp; 
<A href="index-2.html">Services</A> &nbsp; | &nbsp; 
<A href="index-3.html">Partners</A> &nbsp; | &nbsp; 
<A href="index-4.html">Support</A> &nbsp; | &nbsp; 
<A href="index-5.html">Contacts</A></span>-->
      <img src="O%27Fallon%20Chamber%20of%20Commerce_files/footer_2.gif" alt="" usemap="#footer_2_Map" style="vertical-align: middle; padding-right: 125px;" border="0" width="550" height="55">
      <map name="footer_2_Map">
        <area shape="rect" alt="SSM St. Joseph Hospital West" coords="413,0,550,55" href="http://www.ssmstjosephwest.com/" target="_blank">
        <area shape="rect" alt="Progress West HealthCare Center" coords="234,0,413,55" href="http://www.progresswesthealthcare.org/" target="_blank">
        <area shape="rect" alt="Costco" coords="70,0,234,55" href="http://www.costco.com/" target="_blank">
        <area shape="rect" alt="City of O'Fallon" coords="0,0,70,55" href="http://www.ofallon.mo.us/" target="_blank">
      </map>
      O'Fallon Chamber of Commerce © 2008
      <!-- | <a href="index-6.html">Privacy Policy</a>-->
    </p>
    <div style="text-align: right; padding-top: 25px; padding-right: 43px; font-family: Tahoma; font-size: smaller; color: Gray;">web site by <a href="http://www.eimpactweb.com/" target="_blank">eImpact</a></div>
  </div>
  <!--footer end-->
</div>
</body>
</html>

Open in new window

ASKER

Hmmmm...I may be in trouble....

See, these pages are written in ASP.NET 1.1. I am using user controls throughout the page to make the code more modular. The snippet below is what I see in my editor. The following line is what actually prints the menu to the page:

<uc1:menu id="Menu1" runat="server"></uc1:menu>

So, I have all of my menu code in /includes/menu.ascx, which you can see is registered at the top of the page. Correct me if I am wrong, but it looks like I would have to rearrange every page on the site to resolve this....ugh!

<%@ Register TagPrefix="uc1" TagName="footer" Src="/includes/footer.ascx" %>
<%@ Register TagPrefix="uc1" TagName="menu" Src="/includes/menu.ascx" %>
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="default.aspx.vb" Inherits="ococ._default" %>
<%@ Register TagPrefix="uc1" TagName="container" Src="/includes/container.ascx" %>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<HEAD>
		<title>O'Fallon Chamber of Commerce</title>
		<link href="style.css" rel="stylesheet" type="text/css">
			<link href="layout.css" rel="stylesheet" type="text/css">
				<script src="rollover.js" type="text/javascript"></script>
	</HEAD>
	<body id="index">
		<div id="main">
			<!--header -->
			<div id="header">
				<div class="column1">
					<div class="menu">
						<uc1:menu id="Menu1" runat="server"></uc1:menu>
					</div>
				</div>
				<div class="column2">
					<uc1:container id="Container1" runat="server"></uc1:container>
				</div>
				<div class="clear"></div>
			</div>

Open in new window

ASKER

Or...could I move all the stylesheet code inside menu.ascx to my style.css file????

it will be a little bit of work, but not too difficult.... if I've understood your setup correctly, you currently have all the styles and html for the menu in a single menu.ascx file. It really needs to be split into three partss:
1. the menu html code (i.e. everything in the <ul id="menu"> block). All of that stuff should stay in the current uc1 include file.
2. the main menu styles. These need to be removed from menu.ascx and placed in a stylesheet. You could just add them to the "layout.css" file that you already have a link for -- presumably those styles are needed for every page, so no need to separate them. Or you could add a new link to a new menu.css file.
3. the ie-only menu styles, including the csshover3.htc behavior. This is the only thing that requires some care, because you want them to load only in IE6. So you need to use either conditional comments or some kind of hack to hide it from other browsers. Usually I would just add them as a conditional style block in the header, but a lot of people like creating a separate ie-only stylesheet , like menu_ie.css, that includes all the bizarre hacks needed for ie in one place. Then you put the stylesheet link in the condiitional comments, like:



Hope that helps. Once you get into asp code it's pretty tough for me to duplicate what your doing on my machine, so you pretty much have to slog through it yourself.... but I think you're almost there...

ASKER

These sort of lines don't appear to be working in style.css.

<!--[if IE]>

ASKER

So lines like:

<!--[if lt IE 7]>

won't work in the .css page....they have to go in the .html/.aspx page.

you're right, the conditional comments don't work in the stylesheet.
sometimes people try to accomplish the same thing with hacks, like
* html body {behavior: url{csshover3.htc)}
That style in your stylesheet would only load csshover for IE (because FF,Chrome, etc. don't recognize html as a descendent of *, but IE does). It seemed like a good idea for a while, but then IE7 came along and I think it will read that style and load csshover, even though IE7 already supports hover. So rather than earning a degree in hack management, it is definitely more logical and robust in the long term to use the conditional comments to target exactly the versions of the browser you need to target.

ASKER

More progress....

The menu functions in IE6 now with now issues in IE7, but the formatting isn't there. The menu should be large...like it views in IE7.

ASKER

Oh....I only made the update on the main page until we get it working.

ASKER

I meant to say with NO issues in IE7...

the strange appearance of the menu in IE6 is being set by the conditional styles near the csshover.htc link (pasted below).
I don't know how this website evolved, but that code looks like it came originally from a horizontal version of your menu -- it is a lot like the css here: http://sperling.com/examples/menuh/
For the vertical version of that menu, I don't think those tweaks are necessary. I put the last four lines in comments, and it didn't seem to break anything, and the menu now looks almost the same in IE6 as 7 and FF.

<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {behavior: url(/includes/csshover3.htc);
font-size: 100%;
} 
/* delete the following four lines
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;} 
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif; */
} 
</style>
<![endif]-->

Open in new window

ASKER

Sorry I've been away....

It does look better in IE 6, but is there any chance it can look exaclty like it does in IE 7? To me, it still doesn't look so good in IE 6 with the bottom not aligning with the block to the right.

your page header is causing IE6 to render the page in "quirks mode", which means the box model is being interpreted differently. see: http://www.quirksmode.org/css/quirksmode.html, esp the bit about "xml prolog". Unless there is some other reason why you want quirks mode, suggest you try replacing your header with the code below:

btw.... there is a little jog at the bottom of the menu that was bugging me. I traced it to the file menu_tall.gif, which has 2px of white on the far left end. If you make that just 1px of white, then that fixes the appearance. Have attached a modified image file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Open in new window

ofallon.jpg
menu-tall.gif

btw... it took me a while to figure out that quirks mode issue, because apparently when I saved your page to my hard drive using Firefox "Save As" command, Firefox must have overwritten your page header with a standard one. So on my machine, everything was rendering just fine in IE6 without me doing anything. That's a little twist I'd never run into before.

ASKER

OK....made the header change, but now take a look at what I have.

In IE7 the menu is no longer formatted correctly (all shrunk) and the pop-out menus do not work. In IE6 the menu is also shrunk, but the pop-outs work.

ASKER

Amazing to myself, I fixed the scrunched up problem on a guess in the style.css file. However, the menu is till no longer popping out in IE7...no errors either.

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

I think that did it!

yes, it looks pretty good now.
I got you into a working mode with that doctype, but you probably want to change it to HTML 4.01 transitional.... or better yet, do the work to make the site XHTML compliant. Because right now you are getting over 100 errors on W3C validation vs. xhmtl strict.

totally off topic, but I just followed the links to eimpactweb.com and noticed a statement that "eImpact uses the W3C Markup Validation Service to validate all of the web documents we create.", but if I cehck a few of your portfolio example like http://www.woman2womanstl.com/ or http://www.jeremyvlasich.com/ they have tons of validation errors. just from one geek to another, that's going to cause some potential customers to walk away without even talking to you...

ASKER

Yeah, we ran into a number of clients wanting things that were much harder to validate if not impossible, so we should probably take that statement off. We stamp all the sites we have validated. Those 2 in particular are WordPress and phpNuke sites.

ASKER

Thanks for all yoru help and sticking with this problem for so long. I really appreciate it.

ASKER

I did notice one problem....the Google Map no longer works.

ASKER

Nevermind....my bad. :)