Mon, 2009-06-29 13:05
Everything looks great in Firefox and IE 8, but the footer Spry menus are off the right side of the page in IE 7. Suggestions welcome. I have the HTML, CSS and Spry CSS below. The website is www.houstonhillel.org.
Thanks for your help!
HTML
<!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" http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> <!-- TemplateBeginEditable name="doctitle" --> <title>Houston Hillel: The Foundation for Jewish Campus Life</title> <!-- TemplateEndEditable --> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <link href="../houstonhillel/houstonhillel.css" rel="stylesheet" type="text/css" /> <!-- Do not remove the line below!!! It is required for the XML Flash Slideshow v3. --> <script type="text/javascript" src="../houstonhillel/v3flashslideshow/slideshow.js"></script> <script src="../houstonhillel/SpryAssets/SpryMenuBar.js" type="text/javascript"></script> <link href="../houstonhillel/SpryAssets/SpryMenuBarVerticalRight.css" rel="stylesheet" type="text/css" /> <!-- Do not remove the line below!!! It is required for the XML Flash Slideshow v3. --> <script type="text/javascript" src="../v3flashslideshow/slideshow.js"></script> <!-- TemplateBeginEditable name="CSS Region" --> <style type="text/css"> .footer { background-color: #FFF; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; color: #000; margin-top: 5px; padding-top: 0px; height: 200px; text-decoration: none; text-align: right; margin: 0 auto; } </style> <!-- TemplateEndEditable --> <script type="text/javascript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onload="MM_preloadImages('../houstonhillel/images/logofade.gif')"> <div class="container"> <!-- TemplateBeginEditable name="EditRegion5" --> <div class="header"><a href="../houstonhillel/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../houstonhillel/images/logofade.gif',1)"><img src="../houstonhillel/images/logo.gif" name="Image3" width="195" height="90" border="0" align="left" alt="Hillel Logo"/></a></div> <!-- TemplateEndEditable --> <!-- TemplateBeginEditable name="maincol" --> <div class="mainContent"> <!-- Begin XML Flash Slideshow v3 --> <script type="text/javascript"> // <![CDATA[ XMLFlashSlideshow_v3({swf:'../v3flashslideshow/slideshow.swf',w:'970',h:'365',redirect:'',usePreloader:'true',xml:'../v3flashslideshow/slideshow_data1.xml',preventCache:'true',disableMultipleXML:'false',initXML:'%3C?xml%20version=%221.0%22%20encoding=%22utf-8%22?%3E%3Cslideshow%20version=%223%22%3E%0A%20%20%3Cstyles%3E%0A%20%20%20%20%3CPreloader%20label=%22Loading%20%7BN%7D%2525%22%20iconColor=%22#666666%22%20iconAlpha=%2270%22%20iconWidth=%2250%22/%3E%0A%20%20%20%20%3CPreloaderLabel%20font=%22Verdana%22%20size=%2210%22%20color=%22#666666%22%20bold=%22false%22/%3E%0A%20%20%20%20%3CBackground%20backgroundColor=%22#E4E4E4%22%20backgroundAlpha=%22100%22%20bevelColor=%22#FFFFFF%22%20bevelStrength=%2270%22%20borderWidth=%220%22%20borderColor=%22#FF6600%22/%3E%0A%20%20%20%20%3CLoaderAnimation%20type=%22circle%22%20color=%22#FFFFFF%22%20alphaBackground=%2220%22%20alphaInner=%2240%22%20frameWidth=%222%22%20width=%2250%22%20height=%2250%22/%3E%0A%20%20%20%20%3CDataLoader%20useAnimation=%22true%22%20useLabel=%22false%22%20labelPlacement=%22bottom%22%20fadeOutDuration=%22400%22%20textFormat=%22loader_text%22/%3E%0A%20%20%3C/styles%3E%0A%20%20%3Clocalization%3E%0A%20%20%20%20%3Ctext%20orig=%22Loading%20Data...%22%20local=%22Loading%20Data...%22/%3E%0A%20%20%3C/localization%3E%0A%20%20%3Cfonts%3E%0A%20%20%20%20%3Cfont%20id=%22loader_text%22%20name=%22Pixelade%22%20embed=%22true%22%20size=%2213%22%20color=%22#666666%22%20bold=%22false%22%20selectable=%22false%22%20align=%22left%22/%3E%0A%20%20%3C/fonts%3E%0A%3C/slideshow%3E'}); // ]]> </script> <!-- End XML Flash Slideshow v3 --> </div> <!-- TemplateEndEditable --> <div class="footer"> <a href="../houstonhillel/index.html" style="letter-spacing: .2em; text-decoration: none" >Houston Hillel: The Foundation for Jewish Campus Life</a> <hr /> <div class="footerleft" align="left"> <ul id="MenuBar4" class="MenuBarVertical"> <li><a class="MenuBarItemSubmenu" href="#">Jewish Life</a> <ul> <li><a href="../houstonhillel/campuses.html">Campuses</a> </li> <li><a href="../houstonhillel/israel.html">Israel</a> </li> <li><a href="http://www.jewstontexas.org">Jewstontexas - Grad/YP</a></li> <li><a href="http://www.shabbatacrosshouston.org">Shabbat Across Houston</a></li> </ul> </li> <li><a href="#" class="MenuBarItemSubmenu">Calendar</a> <ul> <li><a href="../houstonhillel/falafel.html">Falafel - Weekly Email</a></li> <li><a href="../houstonhillel/googlecalendar.html">Google Calendar</a></li> <li><a href="../houstonhillel/facebookgroups.html">Facebook Groups</a></li> </ul> </li> <li><a class="MenuBarItemSubmenu" href="#">Alumni & Donors</a> <ul> <li><a href="../houstonhillel/alumnifacebook.html">Alumni Facebook Groups</a> </li> <li><a href="../houstonhillel/newsschmooze.html">News & Schmooze Email</a></li> <li><a href="../houstonhillel/donoropportunities.html">Donor Opportunities</a></li> <li><a href="../houstonhillel/donateonline.html">Donate Online</a></li> </ul> </li> <li><a href="#" class="MenuBarItemSubmenu">Prospective Students</a> <ul> <li><a href="../houstonhillel/campuses.html">Campuses</a></li> <li><a href="../houstonhillel/visit.html">Visit Houston Hillel</a></li> <li><a href="../houstonhillel/staff.html">Staff</a></li> <li><a href="../houstonhillel/facebookgroups.html">Facebook Groups</a></li> </ul> </li> </ul> </div> <div class="footerright" align="right"> <ul id="MenuBar3" class="MenuBarVertical"> <li><a href="../houstonhillel/HHD.html">High Holy Day Services</a> </li> <li><a href="../houstonhillel/honeysale.html">High Holy Day Honey Sale</a></li> <li><a class="MenuBarItemSubmenu" href="#">About Houston Hillel</a> <ul> <li><a href="../houstonhillel/contactus.html">Contact Us</a> </li> <li><a href="../houstonhillel/staff.html">Staff</a></li> <li><a href="../houstonhillel/facilities.html">Facilities</a></li> <li><a href="../houstonhillel/boards.html">Lay & Student Boards</a></li> </ul> </li> <li><a href="../houstonhillel/donateonline.html">Donate Online</a></li> </ul> </div> </div> <!-- end .footer --> </div> <!-- end .container --> <script type="text/javascript"> <!-- var MenuBar3 = new Spry.Widget.MenuBar("MenuBar3", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"}); var MenuBar4 = new Spry.Widget.MenuBar("MenuBar4", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"}); //--> </script> </body> </html>
CSS
@charset "UTF-8"; body { margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; background-color: #FFF; text-align: center; } .container { width: 970px; text-align: center; margin:0 auto; background-color: #FFF; } .mainContent { background-color: #FFF; width: 970px; height: 365px; top: 100px; text-align: center; color: #666; margin: 0px; padding: 0px; } .colorblack { color: #000; } .header { width: 970px; margin-right: auto; margin-left: auto; height: 90px; margin-top: 5px; margin-bottom: 0px; } .footerspacing { letter-spacing: 0.2em; } .footerleft { width: 650px; float: left; font-size: 11px; } .footerright { width: 320px; vertical-align: top; font-family: Tahoma, Geneva, sans-serif; font-size: 11px; letter-spacing: .2em; color: #000; line-height: 18px; float: right; } a.footer:link { color: #000; text-decoration: none; } a.footer:visited { color: #000; text-decoration: none; } a.footer:hover { color: #666; text-decoration: none; } a.footer:active { color: #000; text-decoration: none; } .container .mainContent table tr td p { text-align: left; } .container .mainContent p { text-align: center; } .container .mainContent { color: #000; font-family: Tahoma, Geneva, sans-serif; } .container .mainContent tr td { font-weight: normal; text-align: center; font-family: Tahoma, Geneva, sans-serif; } #grey { color: #000; text-align: center; } .container .mainContent p { font-family: Tahoma, Geneva, sans-serif; } .container .footer a:link { color: #000; } .container .footer a:visited { color: #000; } .container .footer a:hover { color: #999; } .container .footer a:active { color: #000; } .container .mainContent #center { font-family: Tahoma, Geneva, sans-serif; } .container .mainContent table tr td strong { font-size: 14px; } .container .mainContent #grey { color: #000; } .container .mainContent p { text-align: left; } .container .mainContent a #Image2 { float: right; padding-top: 15px; padding-right: 0px; padding-bottom: 15px; padding-left: 15px; clear: both; } .container .mainContent table tr td #Image2 { padding-top: 15px; padding-right: 0px; padding-bottom: 15px; padding-left: 15px; } .container .mainContent table { text-align: center; }
Spry CSS
@charset "UTF-8"; /* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /******************************************************************************* LAYOUT INFORMATION: describes box model, positioning, z-order *******************************************************************************/ /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */ ul.MenuBarVertical { padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: 15em; margin-top: 0; margin-right: 100px; margin-bottom: 0; margin-left: 0; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: <a href="http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html" rel="nofollow">http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html</a> */ ul.MenuBarActive { z-index: 1000; } /* Menu item containers, position children relative to this container and are same fixed width as parent */ ul.MenuBarVertical li { padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: 18em; margin-top: 0em; margin-right: 0em; margin-bottom: 0; margin-left: 0; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarVertical ul { padding: 0; list-style-type: none; font-size: 100%; position: absolute; z-index: 1020; cursor: default; width: 15em; left: -1000em; top: 0; margin-top: 3%; margin-right: 0; margin-bottom: 0; margin-left: -95%; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: -6%; } .container .footer .footerleft #MenuBar4 ul.MenuBarVertical ul.MenuBarSubmenuVisible { right: 60%; } .container .footer .footerleft #MenuBar4 li ul { margin-left: 95%; width: 30em; } .container .footer .footerleft #MenuBar4 a { display: block; cursor: pointer; background-color: #FFF; padding: 0.18em 0.75em; color: #000; text-decoration: none; text-align: left; letter-spacing: 0.2em; line-height: 15px; } /* Menu item containers are same fixed width as parent */ ul.MenuBarVertical ul li { width: 18em; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Outermost menu container has borders on all sides */ ul.MenuBarVertical { border: 0px solid #CCC; margin-left: -7px; margin-right: 25px; } /* Submenu containers have borders on all sides */ ul.MenuBarVertical ul { color: #000; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarVertical a { display: block; cursor: pointer; background-color: #FFF; padding: 0.18em 0.75em; color: #000; text-decoration: none; text-align: right; letter-spacing: .2em; line-height: 15px; } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus { background-color: #FFF; color: #999; } .container .footer .footerleft #MenuBar4 a:hover, a:focus { background-color: #FFF; color: #999; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible { background-color: #FFF; color: #999; } /******************************************************************************* 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.MenuBarVertical a.MenuBarItemSubmenu { } /* 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.MenuBarVertical a.MenuBarItemSubmenuHover { } /******************************************************************************* 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 */ /* 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.MenuBarVertical li.MenuBarItemIE { display: inline; f\loat: left; background: #FFF; } } .container .footer .footerleft #MenuBar4 li .MenuBarItemSubmenu { text-align: left; float: none; } .container .mainContent table tr td strong { font-size: 13px; } .container .mainContent table tr td { font-size: 12px; } .container .mainContent table tr td { font-size: 13px; text-align: left; font-family: Tahoma, Geneva, sans-serif; } .container .mainContent { font-size: 13px; text-align: left; font-family: Tahoma, Geneva, sans-serif; }
