Spry menu out of alignment in IE

Not sure if this is the right place ... I am new to Dreamweaver and CSS but I have created a spry menu (horizontal) and everything looks good in all browsers except IE, the main container which is green is out of alignment with the menu bar at the top. I have been fiddling with this for weeks. Any help would be much appreciated. The link is as follow:
www.whiterockchristiansciencechurch.com/bctestmay12/
thanks.
L*
PS please reply in language that a rookie can understand.

Hi Gramps
Thank you … I took a look at the web address you sent me, but couldn’t figure out what I was supposed to do with it! Then I tried setting the individual widths of the menu items and this has improved the appearance in IE to the point where I can live with it. What puzzles me though is why, if the cumulative total of the menu items measure 946 px and the ‘main‘ div also measures 946, they don’t exactly match up exactly lengthwise.
Also your comment about not using ‘absolute’ positioned divs … I have been learning Dreamweaver from the Adobe manual and it recommends that you use absolute positioning for the ‘main’ div and so I thought everything else within the container (other than the container itself which I have set to relative) should be absolute. Are you saying that I should not use absolute for the main div or are you just referring to the menu div? If I don’t use absolute what should I use?
Thanks so much for your assistance, most appreciated.

Similar Messages

  • Main menu out of alignment, when first opened in dvd player

    I have a strange problem.....
    I have authored a very simple 1menu 1 track 4x3 dvd, something I have done a thousand times..
    I have created a .img file.
    When I open that file and open the DVD files in dvd player to test it, the menu come on all out of wack and the overlay is not over the button.
    It kind of looks like a 4:3 image that is stretched vertically (like anamorphic 16x9) but not centred, the bottom of the frame is cut off...
    BUT
    as soon as I got up to the DVD Player menu to "open DVD media" it immediately corrects itself. and all is ok.
    any ideas where this glitch is coming from?
    I am running
    Macbook pro 10.4.11
    DVD studio Pro 4.1.2
    Thanks!

    I have seen this in the past when the dimensions of the overlay don't match the frame size. It has been a few versions since pixel aspect ratios have been an issue, such as on 16:9 Pan&Scan menus. However, I bet if you go to your photoshop file, you may find that there is some layer in there that has some leftover pixels outisde the canvas. A quick select all-crop will do the trick there. By opening your build or the image in DVD Player you should be seeing pretty much what any othe player would show (avoiding any Simulator-specific anomalies) so I would definitely try to track this one down.
    Hope this helps -
    Max Average

  • Chapter markers menu out of alignment

    When I set chater markers in iMovie and then share to iDVD, I am never happy with the alignments of the "buttons" for the scene selections. The are never positioned nicely and tend to overlap a lot. If I set to "free float" and line the buttons up nicely, then the directional buttons don't operate logically when I operate the final DVD (that is I press down on the remote and it goes left, or something like that).
    Does anyone else have this problem. How do you get around it?
    Thanks,
    Tony

    Hi Tony:
    Read this regarding chapters in iDVD (it says iDVD 4 but it's the same for 5)
    http://www.kentidwell.com/idvd4/#faq_14
    Sue

  • Spry Menu and IE Issue (Hover Font Size)

    I'm not able to figure out why the hover focus setting works fine with Firefox or Chrome, but I can't find a setting in the CSS to ensure the value for the font on a hover within IE remains fixed. on a hover, the font size increases slighly in IE and pushes menu out of alignment very slightly. I was able to keep the hover size fixed in Firefox and Chrome via the CSS values for the spry, but not sure why IE is doing this and if there is a setting specific to IE that would allow me to keep the hover font size fixed, but not change the values in Firefox/Chrome. Is there any way to lock in the hover value using CSS for the font so in IE it remains constant?
    http://oregonstate.edu/~labellec/CDfiles/index.html
    Page is under development, but if you open it up in IE, the menu hover causes too much movement. I'm new to CS4, so, any help appreciated.
    Thanks,
    Chris

    Perhaps you could adapt the techniques used here for your
    Spry menu:
    http://www.projectseven.com/products/menusystems/pmm2/see-through.htm
    Al Sparber - PVII
    http://www.projectseven.com
    The Finest Dreamweaver Menus | Galleries | Widgets
    http://www.projectseven.com/go/pop
    The Ultimate DW Menu System
    "Webkil" <[email protected]> wrote in
    message
    news:gnmh2l$dvo$[email protected]..
    >I have tried this. I want a transparent background no
    colour. As soon as I
    >add transparent IE comes up with the word false in the
    sub menus.

  • How do I change the alignment of a Spry Menu in Dreamweaver

    I know CSS but I can't figure out how to change the entire alignment of a Spry menu to either center in a table or even right align.  I have tried both changing the div alignment and the td alignment and neither one works.  Any ideas?

    See here http://labs.adobe.com/technologies/spry/samples/ and go down to the menu.
    Gramps

  • Lay out spry menu

    I am working with Dreamweaver CS6 and I am having some problems with the spry menus.
    Is there a lay out available on which I can find which items has which name?
    E.g. ul MenubarVertical ul: which item is this in the spry menu?
    David

    Have you read the comments in the CSS file?
    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
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: 8em;
    /* 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 same fixed width as parent */
    ul.MenuBarVertical li
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 8em;
    /* 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
        margin: -5% 0 0 95%;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: absolute;
        z-index: 1020;
        cursor: default;
        width: 8.2em;
        left: -1000em;
        top: 0;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarVertical ul.MenuBarSubmenuVisible
        left: 0;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarVertical ul li
        width: 8.2em;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Outermost menu container has borders on all sides */
    ul.MenuBarVertical
        border: 1px solid #CCC;
    /* Submenu containers have borders on all sides */
    ul.MenuBarVertical ul
        border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarVertical a
        display: block;
        cursor: pointer;
        background-color: #EEE;
        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.MenuBarVertical a:hover, ul.MenuBarVertical 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.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
        background-color: #33C;
        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.MenuBarVertical 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.MenuBarVertical 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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
            display: inline;
            f\loat: left;
            background: #FFF;

  • Spry Menu Bar white-out in IE

    I am brand new to web design and Dreamweaver and I cannot figure out why my Spry Menu Bar, though perfect in Firefox and Chrome, is behaving so strangely in Internet Explorer.  I have the background color set as transparent, but in IE, the entire bar appears with a white background.
    Here's the url, uploaded onto our test site: http://www.test.partnersoft.org/partner_test/partnersoft.com/
    My apologies for not including any code; I don't know what to put up that will help you.  I have no clue if this is a CSS problem or what.
    Thanks so much, apologies for my ignorance.

    Supplying an online URL is all we need.
    Add the following style rule to your document
    <style>
    @media screen, projection {
        ul.MenuBarHorizontal li.MenuBarItemIE    {background: transparent;}
    </style>

  • Print out spry menu structure?

    Is there a way to print out the complete Spry Menu Bar
    structure that someone builds in dreamweaver so it would show how
    each menu listing branches off?

    Hi,
    You can use PPOS_OLD for display of your structure click Structural graphics view and give print.
    Regards
    Chandrashekar

  • Spry menu hroizontal alignment

    I have a fixed width purchased website template and I removed the simple menu for a horizontal multi layer spry menu.
    But the spry menu alignes to the far left instead of centered over the content. I've been able to slide it to to far right but not centered over the content that is 960 px wide.
    I'm using CS6. Adding a left margin does not help. I'm stumped.

    The menubar needs a fixed width and centred using margin: auto as in
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    <style>
    ul.MenuBarHorizontal {
        width: 32em; /* 4 items 8em wide = 32em */
        margin: auto;
    </style>
    </head>
    <body>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
        <ul>
          <li><a href="#">Item 1.1</a></li>
          <li><a href="#">Item 1.2</a></li>
          <li><a href="#">Item 1.3</a></li>
        </ul>
      </li>
      <li><a href="#">Item 2</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
        <ul>
          <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
            <ul>
              <li><a href="#">Item 3.1.1</a></li>
              <li><a href="#">Item 3.1.2</a></li>
            </ul>
          </li>
          <li><a href="#">Item 3.2</a></li>
          <li><a href="#">Item 3.3</a></li>
        </ul>
      </li>
      <li><a href="#">Item 4</a></li>
    </ul>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>

  • Spry Menu Text Alignment

    I'm wondering if there is any way to have the text centered
    in the main menu bar but align text left the in the submenus. I've
    tried, but any alignment I apply in the CSS seems to affect all
    text.

    I just happened to do this example page someone else:
    http://www.projectseven.com/testing/customers/adobe/fubar/
    Perhaps it will help. The spry menu is the second one.
    Al Sparber - PVII
    http://www.projectseven.com
    The Finest Dreamweaver Menus | Galleries | Widgets
    http://www.projectseven.com/go/pop
    The Ultimate DW Menu System
    "efredian" <[email protected]> wrote in
    message
    news:gnnq9i$3bu$[email protected]..
    > I'm wondering if there is any way to have the text
    centered in the main
    > menu bar but align text left the in the submenus. I've
    tried, but any
    > alignment I apply in the CSS seems to affect all text.

  • Alignment Issues with Spry Menu Bar in Safari

    www.laurentambard.com    
    I am new to CS5 and currently building a site for a friend.  Having issues with aligning then far right spry menu bar so that it is flush with the page.  It only shows a problem on Safari (as far as I know).  Also the second tab (About) is dropping down slightly when the drop down menu is selected and not sure how to fix it.

    If you place the menubar in a container with an ID of nav or similar and a background color of #EEE so that it blends in with the background colour of the menu items, the centralise the menubar and menu items as per http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHorizontalMenuBarSample.h tml, it should go a long way to meeting your requirements.
    Gramps

  • Pulling my hair out over IE8 issues with spry menu bar

    Its a classic story, but for the life of me, I can't figure this out.  I've seen it in a hundred different forums (all slightly different versions of the same problem) .  I've put together a horizontal spry menu bar (version 1.6.1).  It works fine in Chrome, Safari, Firefox, etc..., but goes nuts in IE.
    layout and positioning of the submenus cascades horizontally, goes far right, etc.
    A sample of the menu sits at http://www.alaskanrafting.com/mockup/newindex.html
    I'm sure it's just a line or two in my CSS, but I sure can't find it.
    the CSS sheet would be at http://www.alaskanrafting.com/mockup/SpryAssets/SpryMenuBarHorizontal.css
    If anyone has any pointers, I would greatly appreciate it.
    Thanks

    Try adding/modifying the following
    ul.MenuBarHorizontal ul li {
        display: block;
        float: none !important;
        width: auto;
        white-space: nowrap;
        border-bottom: solid 1px #EEE;
    There needs to be an !important for the float so that it overrides the JS.
    Gramps

  • Header, Spry Menu and Body not properly aligned

    Please take a look at my page http://www.seanmccuedesign.com/shemwebsitenew/index.html and tell me why the Header, Horizontal Spry Menu and Body are wonky and not aligned properly.
    Thanks very much,
    Sean

    The header is a bit to the left, the spry menu hangs too far to the right, and the body is too far to the right as well. I simply need them all centered...

  • How to align the spry menu pannel in dreamweaver cs4

    Can someone tell me how to align the spry menu pannel either left, center, are right in a div tag? I'm talking the whole pannel I have within a div tag.
    Thanks

    Defaults to left align
    To center ul.MenuBarHorizontal{margin: 0 auto; width: 32em;} addjusting the width to suit.
    To align right ul.MenuBarHorizontal {float: right; width: 32em;} addjusting the width to suit.

  • Vertical spry menu bar 2.0 - orientation of submenus (left vs. right fly-out)

    Hello:
    I have a general question I would like to pose to anyone who has worked with the vertical spry 2.0 menu bar regarding the orientation of sub-menus (left vs. right flyout).  In the previous version of the spry menu bar it was possible to to designate that the flyout sub-menus would appear to the left (as opposed to the right (normal or standard position) of the main level menu bar.
    In reviewing the tutorials for the new version, and reviewing the settings for the widget I can't seem to see anything similar for the latest version of the spry menu bar.  Does anyone now if this is possible?  Does it require adjustments to the Javascript or can it be done directly from within the widget customization.
    I realize that it isn't normal practice to pose questions in such general terms, however I thought I would try to determine if anyone has had experience in this regard before launching into the project.
    Thanks in advance.
    Steve Webster

    OK, here's what I've done. By adjusting the right padding on #MenuBarVertical .MenuItem .MenuItemLabel, AND #MenuBarVertical .SubMenu .MenuItem .MenuItemLabel, I was able to position the right arrows to where I wanted them. I also removed all links from top-level menu items so that the fly-out submenus would appear on a touch screen. You can see the results on my client site: www.gcssepm.org. I must say that this solution was not intuitive; it took a lot of experimentation to figure out which rule to adjust, and menu rules vs. submenu rules seem to operate in the opposite manner as far as padding and arrows go.
    I do have a similar issue with Scott, in that it takes two or more "taps" to get the submenus to fly out, but at least the arrow is there so the user knows there is a submenu to be had. The only real issue I still have is that for sub-submenus (i.e., third-level), no amount of tapping will get those to display long enough to select them (only an issue on the iPad). I don't know a way around this for the iPad, other than to also eliminate all links from second-level menus that have a third level, and that's more reprogramming than I want to do for today.
    Final questions regarding the Spry 2.0 widget. Obviously, after I customized the widget, saved it, and imported into my site template, it took some additional tweaking before everything was working properly. Is there a way to export the settings back out to the widget, so that all the tweaking is there? Also, is there a way to save my menu text back to the widget, because it is obviously NOT Home, Entertainment, Music, etc.
    Thanks for all your help, and I hope someone else benefits from my experiences as well.
    Gail

Maybe you are looking for