5 Replies Latest reply on Mar 22, 2010 11:24 PM by cuesportpro

    Spry Menu not Aligned Properly in IE

    RyanSPXTech

      My site has a Horizonal Spry Menubar that aligns properly (at the bottom of the header just above the main content) in FF and Safari, but IE for some reason isn't aligning it at all.  It's showing up in the far upper left of the header as if it's completely ignoring the relative postion assigned in the CSS.  Any ideas?

       

      www.spxtech.com/test/

        • 1. Re: Spry Menu not Aligned Properly in IE
          RyanSPXTech Level 1

          I made some design changes last night and got the menu a little closer in IE.  I am struggling to accurately determine what the px height is of the Spry Menu.  All I can find so far is it seems to be the combination of font px, top/bottom padding and then a little extra for the border in the SpryHorizontal a record.  Although on mine it doesn't seem to add up.

           

          When I get it to align perfectly in FF there is a 1-2px space between the bottom of the menu and the top of my MainContent div in IE 8.  IE 7 is even worse as that is wrapping the last button to the next line.

           

          Does anyone have any suggestions or a good information source for Spry Menus?  With all of the different CSS Classes in the Spry I'm getting confused trying to figure out where the right adjustments need to be made.

           

          http://www.spxtech.com/test

          • 2. Re: Spry Menu not Aligned Properly in IE
            osgood_ Level 8

            RyanSPXTech wrote:

             

            I made some design changes last night and got the menu a little closer in IE.  I am struggling to accurately determine what the px height is of the Spry Menu.  All I can find so far is it seems to be the combination of font px, top/bottom padding and then a little extra for the border in the SpryHorizontal a record.  Although on mine it doesn't seem to add up.

             

            When I get it to align perfectly in FF there is a 1-2px space between the bottom of the menu and the top of my MainContent div in IE 8.  IE 7 is even worse as that is wrapping the last button to the next line.

             

            Does anyone have any suggestions or a good information source for Spry Menus?  With all of the different CSS Classes in the Spry I'm getting confused trying to figure out where the right adjustments need to be made.

             

            http://www.spxtech.com/test

             

             

            You need to go about this in a different way. Youre using way too many <divs> and heights and all that kind of crap, which just confuses the issue.

             

            Also I see no reason at all to slice the sphinx image, just use it as a background in the 'container' <div> I can only use the top bit in the example below but you can piece it back together and link the whole image

             

            Copy all the code below, dump it into a new Dreamweaver file, save it to your site folder and test in browsers. It should look the same.

             

             

            <!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>Untitled Document</title>
            <style type="text/css">
            body {
            margin: 0;
            padding: 0;
            }
            #container {
            background-color: #000;
            width: 960px;
            margin-right: auto;
            margin-left: auto;
            font-family: Verdana, Geneva, sans-serif;
            background-image: url(images/hd_960x177.jpg);
            background-repeat: no-repeat;
                                
            }
            #headerMenu {
            margin-right: 24px;
            margin-left: 238px;
            padding-top: 150px;
            overflow: hidden;
            }
            #mainContent {
            background-color: #FFF;
            background-image: url(images/content_698x461.jpg);
            background-repeat: no-repeat;
            width: 676px;
            margin-left: 238px;
            padding-top: 10px;
            padding-bottom: 25px;
            padding-right: 10px;
            padding-left: 10px;
            }
            #footer {
            width: 960px;
            background-image: url(images/bg-ft_24x82.jpg);
            background-repeat: repeat-x;
            font-size: 10px;
            color: #FFF;
            margin: 0 auto;
            overflow: hidden;
            }
            #footerLeft {
            float: left;
            width: 250px;
            margin-left: 238px;
            }
            #footerRight {
            width: 225px;
            float: right;
            margin-right: 24px;

             

            }
            #footerCenter {
            margin-left: 488px;
            }
            h1 {
                font-size: 24px;
            }
            h2 {
                font-size: 18px;
            }
            h3 {
                font-size: 14px;
            }
            </style>
            <style>
            ul.MenuBarHorizontal
            {
                margin: 0;
                list-style-type: none;
                font-size: 100%;
                cursor: default;
                width: 698px;
                padding: 0;
            }
            /* 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: 1000;
            }
            /* Menu item containers, position children relative to this container and are a fixed width */
            ul.MenuBarHorizontal li
            {
                margin: 0;
                list-style-type: none;
                font-size: 100%;
                text-align: left;
                cursor: pointer;
                width: 174px;
                float: left;
                padding: 0;
            }
            /* 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: 8.2em;
                position: absolute;
                left: -1000em;
            }
            /* Menu item containers are same fixed width as parent */
            ul.MenuBarHorizontal ul li
            {
                width: 8.2em;
            }
            /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
            ul.MenuBarHorizontal ul ul
            {
                position: absolute;
                margin: -5% 0 0 95%;
            }

             

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

             

            DESIGN INFORMATION: describes color scheme, borders, fonts

             

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

             

            /* Submenu containers have borders on all sides */
            ul.MenuBarHorizontal ul
            {
                border: 1px solid #CCC;
            }
            /* Menu items are a light gray block with padding and no text decoration */
            ul.MenuBarHorizontal a
            {
                display: block;
                cursor: pointer;
                background-color: #000;
                color: #FFF;
                text-decoration: none;
                font-size: 12px;
                text-transform: uppercase;
                background-image: url(images/bg-nav_21x26.jpg);
                background-repeat: repeat-x;
                text-align: center;
                border: thin outset #666;
                padding-top: 6px;
                padding-right: 0.75em;
                padding-bottom: 6px;
                padding-left: 0.75em;
            }
            /* 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: #000;
                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: #000;
                color: #FFF;
                border: thin inset #666;
            }

             

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

             

            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;
                }
            }
            </style>
            </head>

             

            <body>
            <div id="container">
            <div id="headerMenu"><ul id="MenuBar1" class="MenuBarHorizontal">
                  <li><a href="index.html">Home</a></li>
                  <li><a href="services.html">Services &amp; Rates</a></li>
                  <li><a href="specials.html">Specials</a>      </li>

                 <li><a href="About Us</a></li>
                </ul>
                </div>
            <div id="mainContent">
            <h1>Your Mac and PC Specialists! </h1>

             

                <p>Sphinx Technology Solutions specializes in a diverse array of services for both Mac and PC users- let us be <strong>YOUR</strong> technology department! We can assist with all aspects of hardware/software, diagnostics and repair, virus/spyware removal, data recovery, network setup, printers, new computers...<em>and so much more!</em> With expertise in a multitude of current and upcoming technologies, Sphinx can identify and implement the <em>very best</em> solutions for your home or business.</p>
                <hr />
                <h2>New Client Discount</h2>

             

                <p>As a New Client you will receive a 20% SERVICE DISCOUNT on your first invoice! It's our way of saying, &quot;Thank you for choosing Sphinx Technology Solutions.&quot;</p>
                <hr />
                <h2>Coming Soon... </h2>
                <h3>STS Blog </h3>
                <p>There is a new blog page in the works where we'll discuss the latest news in technology as well as review various software and hardware.</p>
                <h3>Items for Sale</h3>

             

                <p>We have a tendancy to keep up to date with the latest and greatest technology around here. Consequently, that often leaves us with a surplus of computers, parts and other various gadgets. Now we're offering these items to you at great prices so we can make room for all the new technology being introduced.</p>
            </div>
            </div>
            <div id="footer">
                <div id="footerLeft">&copy; 2010 Sphinx Technology Solutions LLC<br />
                  All rights reserved
                </div>
                <div id="footerRight"><img src="images/dcc_80x50.gif" alt="chamber" width="80" height="50" class="floatRight" />Proud Member of the Dearborn Chamber of Commerce</div>

             

                <div id="footerCenter"><img src="images/fb_50x50.gif" alt="facebook" width="50" height="50" hspace="10" /><img src="images/twitter_50x50.gif" alt="twitter" width="50" height="50" hspace="10" /></div>
              </div>
            </body>
            </html>

            • 3. Re: Spry Menu not Aligned Properly in IE
              RyanSPXTech Level 1

              Thanks, that helped out big time.  Kinda learning as I go here.  I tried that technigue (less DIV's) but I could never quite get the content window to line up right.

               

              I do have a side question though...

               

              So now it looks the same in all browsers but having to set the menu buttons to 174px leaves a little space at the end that doesn't quite make it to the end of the content window.  If I increase it there is a little too much.  I had used 25% previously but that causes the 4th button in the menu to wrap to the next line.  Any suggestions to make it line up?

              • 4. Re: Spry Menu not Aligned Properly in IE
                osgood_ Level 8

                RyanSPXTech wrote:

                 

                So now it looks the same in all browsers but having to set the menu buttons to 174px leaves a little space at the end that doesn't quite make it to the end of the content window.  If I increase it there is a little too much.  I had used 25% previously but that causes the 4th button in the menu to wrap to the next line.  Any suggestions to make it line up?

                 

                I missed something in the original css and you altered something I altered back to the orginal css

                 

                Set the 'menuBar' width to 696px and delete margin-right: 24px; (as below)

                 

                #menuBar {
                    width: 696px;
                    margin-left: 238px;
                    padding-top: 151px;
                    overflow: hidden;
                }

                 

                For some reason you re-instated margin-right: 24px; on the 'mainContent' <div>. Delete the margin css and put back the width to 676px (as below)


                #mainContent {
                width: 676px;
                    color: #000;
                    background-color: #FFF;
                    background-image: url(images/content_698x461.jpg);
                    background-repeat: no-repeat;
                    margin-left: 238px;
                    padding-top: 10px;
                    padding-right: 10px;
                    padding-bottom: 25px;
                    padding-left: 10px;
                }

                • 5. Re: Spry Menu not Aligned Properly in IE
                  cuesportpro

                  First of all, I'm using DW CS4 and I'm having a difficult time, because after designing my website, I went in and decided to put in a drop down Spry Menu instead, because I wanted drop downs on one of my navbars. Everytime I add a horizontal spry menu bar, it shows up outside of the div I'm inserting it into. I am of course clicking on the div and then with split menu putting the cursor inside of that div in the code. Then, it appears to work just fine in all the normal browsers, but when I look it up on my cell phone's IE browser, each item is just stacked up on top of one another as if I hadn't floated them at all. I'm just not quite sure what it is and would really love some help.

                   

                  sprymenu.jpg

                   

                  @charset "UTF-8";

                  /* SpryMenuBarHorizontal.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, an auto width box with no margin or padding */
                  ul.MenuBarHorizontal
                  {
                  list-style-type: none;
                  cursor: default;
                  padding: 0;
                  margin: auto;
                  width: 897px;
                  font-size: 100%;
                  }
                  /* 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: 1000;
                  }
                  /* 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;
                  cursor: pointer;
                  width: auto;
                  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
                  {
                  list-style-type: none;
                  z-index: 1020;
                  cursor: default;
                  position: absolute;
                  left: -1000em;
                  padding: 0;
                  margin-top: 0;
                  margin-right: auto;
                  margin-bottom: 0;
                  margin-left: auto;
                  }
                  /* 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: 8.2em;
                  display: inline;
                  }
                  /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
                  ul.MenuBarHorizontal ul ul
                  {
                  position: absolute;
                  margin: -5% 0 0 95%;
                  }
                  /* 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 #FFF;
                  }
                  /* Menu items are a light gray block with padding and no text decoration */
                  ul.MenuBarHorizontal a
                  {
                  display: block;
                  cursor: pointer;
                  background-color: #693;
                  color: #FFF;
                  text-decoration: none;
                  text-align: center;
                  font-family: "Arial Narrow", Arial, sans-serif;
                  font-size: 16px;
                  font-weight: bold;
                  height: 27px;
                  margin: auto;
                  padding-top: 7px;
                  padding-right: 12px;
                  padding-bottom: 0px;
                  padding-left: 12px;
                  border-top-width: 1px;
                  border-right-width: 1px;
                  border-bottom-width: 1px;
                  border-left-width: 1px;
                  border-top-style: none;
                  border-right-style: none;
                  border-bottom-style: solid;
                  border-left-style: none;
                  border-top-color: #FFF;
                  border-right-color: #FFF;
                  border-bottom-color: #FFF;
                  border-left-color: #FFF;
                  }
                  /* Menu items that have mouse over or focus have a blue background and white text */
                  ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
                  {
                  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
                  {
                  color: #FFF;
                  background-color: #363;
                  }

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

                  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
                  {


                  }
                  /* 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
                  {

                  }
                  /* 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
                  {

                  }
                  /* 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
                  {
                  }

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

                  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;
                  }
                  }