PDA

View Full Version : Issues with submenu display in IE8


candidar
07-24-2011, 04:57 AM
I am reworking a site for a client and having one heck of a time getting the submenu of the spry code to work correctly in IE8. In FF, it displays correctly, as a vertical menu, in IE8 it goes horizontal. I've searched for an answer all day and now am turning to this board. Help!

Here's my test site: http://www.localfeasties.com/testsites/folsompharmacy/

Here's the header code where the original designer placed the menu:

<?php
session_start();
ob_start();

if($_REQUEST['mode']=='newsletter'){
$_SESSION['newsletter']=$_REQUEST['textfield'];
header("location:registration.php");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Folsom Compounding Pharmacy</title>
<style type="text/css">
body, td, th {
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;

}
body {
background-color: #EAF1CD;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
color: #000;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
color: #000;
height:auto;
}
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

<script language="javascript">
function chk_eml()
{
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var address = document.form1_newsletter.textfield.value;

if(reg.test(address) == false) {
alert("Please enter your valid e-mail id!");
document.form1_newsletter.textfield.style.backgrou ndColor="#FF9966";
document.form1_newsletter.textfield.focus();
return false;
}else{
document.form1_newsletter.mode.value='newsletter';
document.form1_newsletter.submit();
}
}
</script>


</head>
<body>
<table width="864" align="center" cellpadding="0" cellspacing="2">
<tr>
<td bgcolor="#BEDEA8">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top" style="background-image:url(images/green-logo-new.jpg); width:864px; height:144px; background-repeat:no-repeat;"><table width="864" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="462" align="left" valign="top" style="padding:25px 0 0 15px;"><a href="index.php"><img src="images/logo.jpg" alt="" width="447" height="93" border="0" /></a></td>
<td align="right" valign="top"><table width="280" border="0" align="right" cellpadding="8" cellspacing="0">
<tr>
<td align="left" valign="top"><table width="310" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td width="10" align="left" valign="middle"><img src="images/phone-icon.jpg" alt="" width="21" height="21" /></td>
<td width="225" align="left" valign="top" class="headertext1">Phone: 916-983-4900</td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top" style="padding:30px 8px 0 0px;"></td>
</tr>
<tr>
<td align="left" valign="top"><br /><br />
<form name="form1_newsletter" method="post" action="" onsubmit="return chk_eml();">
<table width="310" border="0" align="right" cellpadding="0" cellspacing="0" style="background-color:#bedda6;">
<tr align="left">
<td valign="top" style="padding:5px 0 0 7px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#000; text-align:center; width: 110px;">Newsletter Sign Up:</td>
<td width="110" align="right" valign="top">

<input type="hidden" name="mode" value="" />
<input name="textfield" type="text" value="enter email to sign up" style="border: #bedda6 solid 1px; height:20px; width: 150px;" size="18"/>

</td>
<td width="23" align="right" valign="top" style="padding:1px;"><input type="image" src="images/go-arrow.jpg" alt="" width="21" height="22" /></td>
</tr>
</table>
</form>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="27" bgcolor="#BEDEA8"><ul id="MenuBar1" class="MenuBarHorizontal">
<li style="width:100px; font-size:15px; text-align:center;"><a href="index.php">Home</a></li>
<li style="width:71px; font-size:15px;"><a class="MenuBarItemSubmenu" href="#">BHRT</a>
<ul>
<li><a href="women.php">Women</a></li>
<li><a href="men.php">Men</a></li>
<li><a href="salivatest.php">Saliva Testing</a></li>
</ul>
</li>
<li style="width:100px; font-size:15px; text-align:center;"><a href="dentalmedications.php">Dental</a></li>
<li style="width:100px; font-size:15px; text-align:center;"><a href="pediatric.php">Pediatric</a></li>
<li style="width:103px; font-size:15px; text-align:center;"><a href="veternary medications.php">Veterinary </a></li>
<li style="width:150px; font-size:15px; text-align:center;"><a href="specialty-testing.php">Specialty Testing</a></li>
<li style="width:105px; font-size:15px; text-align:center;"><a href="aboutus.php">About Us</a></li>
<li style="width:135px; font-size:15px;"><a href="#" class="MenuBarItemSubmenu">Compounding</a>
<ul>
<li><a href="whatiscompounding.php">What is Compounding?</a></li>
<li><a href="faq.php">FAQ</a></li>
</ul>
</li>
</ul></td>
</tr>
<tr>
<td><table width="100%" cellspacing="0" cellpadding="0">
<tr>

<?php
$curpage_name = basename($PHP_SELF);
if($curpage_name == 'registration.php') {
?>
<td width="100%" align="left" valign="top" bgcolor="#F3F3F3" style="padding:0px 0 0 5px;">

<?php
} else {
?>
<td align="left" valign="top" bgcolor="#BEDEA8" style="padding:10px 0 0 15px;">
<div class="new-vertical">
<ul>
<li><a href="rxrefills.php">Rx Refills</a></li>
<li><a href="practitionerlisting.php">Practitioner Listing</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>

</div>
<p style="padding:32px 0 8px 0px;">&nbsp;</p>

<p style="padding:15px 0 8px 0px;"><br />
</p>

<p style="padding:15px 0 8px 0px;"><br />
</p>

</td>

<td width="80%" align="left" valign="top" bgcolor="#F3F3F3" style="padding:5px 0 0 5px;">
<?php
}
?>

And here is the css for the menu itself:

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 10000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 9.25em;
float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 12em;
position: absolute;
left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 10.25em;

}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin-top: -5%;
margin-right: 0;
margin-bottom: 0;
margin-left: 16em;
width: 10.25em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}

/************************************************** *****************************

DESIGN INFORMATION: describes color scheme, borders, fonts

************************************************** *****************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
width: auto;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #EAF1CD;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #33C;
color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #BEDEA8;
color: #FFF;
}

/************************************************** *****************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

************************************************** *****************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

/************************************************** *****************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert

************************************************** *****************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
/* filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f/loat: left;
background: #FFF;
}
}
#MenuBar1 li a {
font-family: Verdana, Arial, Helvetica, sans-serif;
}


I really appreciate any help, thank you much!
CJ

DWcourse
07-24-2011, 05:58 AM
In this rule (about line 89 of your spry css) delete the width property (it's overwriting the correct value from an earlier rule.

ul.MenuBarHorizontal ul {
border: 1px solid #CCCCCC;
width: auto;
}

Explorer interprets the auto value as the full width of the menu which allows the submenu items to line up horizontally.