Skip navigation
lyn100
lyn100
Currently Being Moderated

spry menu out of alignment in IE

May 14, 2012 8:37 PM

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.

1322 Views   11 Replies   Latest reply: lyn100, May 18, 2012 8:14 AM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    May 16, 2012 11:15 PM   in reply to lyn100
    Report

    Because each browser has its own default style rules, it is very hard to have a menubar with automatic width, containing menu items with automatic width to remain exactly the same in each browser. Look at your site in IE9 (menu bar too wide), IE8 (menu bar correct width) and IE7 (menu bar too narrow.

     

    One way to help, but not guaranteed to help, is to use CSS reset as per http://meyerweb.com/eric/tools/css/reset/

     

    Another way is to set  a width to each menu item individually. You can do this inline as per

    <li style="width: 250px;"><a href="#">Item 2</a></li>

    You could also use images that use their own widths.

     

    Incidently, it is better not to use an absolute positioned div in your layout.

     

    Gramps

     
    |
    Mark as:
  • lyn100
    Currently Being Moderated
    2. lyn100,
    May 16, 2012 11:21 PM   in reply to Ben Pleysier
    Report

    Thank you Gramps, I will try both of these possible solutions.

     

     

     
    |
    Mark as:
  • lyn100
    Currently Being Moderated
    3. lyn100,
    May 17, 2012 6:50 PM   in reply to Ben Pleysier
    Report

    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.

     

     

     
    |
    Mark as:
  • lyn100
    Currently Being Moderated
    4. lyn100,
    May 17, 2012 6:52 PM   in reply to Ben Pleysier
    Report

    Please ignore previous comment about the 946 pix main and menu not lining up … I had made an error, and now they do and IE as well as other browsers is purrrrrrrrrrrfect!

     

    Tx.

     

     

     
    |
    Mark as:
  • lyn100
    Currently Being Moderated
    5. lyn100,
    May 17, 2012 7:08 PM   in reply to Ben Pleysier
    Report

    Well I spoke too soon, I see the submenus don’t drop down directly under the main menus in IE7 … any suggestions? Thanks.

     

     

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    6. Ben Pleysier,
    May 17, 2012 8:00 PM   in reply to lyn100
    Report

    Add

    ul.MenuBarHorizontal li {

        text-align: left;

    }

    ul.MenuBarHorizontal a {

        text-align: center;

    }

    ul.MenuBarHorizontal ul a {

        text-align: left;

    }

    to the bottom of SpryMenuBarHorizontal.css

     

    Gramps

     
    |
    Mark as:
  • lyn100
    Currently Being Moderated
    7. lyn100,
    May 17, 2012 9:10 PM   in reply to Ben Pleysier
    Report

    Hi Gramps

     

    These changes have just centered the text in the submenus … what I was trying to correct in IE7 is the submenu boxes that are out of alignment with the main menu items above …

     

     

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    8. Ben Pleysier,
    May 17, 2012 10:03 PM   in reply to lyn100
    Report

    I do not see that you have made the changes.

     

    Gramps

     
    |
    Mark as:
  • lyn100
    Currently Being Moderated
    9. lyn100,
    May 17, 2012 10:22 PM   in reply to Ben Pleysier
    Report

    Hi Gramps

     

    I redid the changes again and now the submenu aligns properly and posted it on the site. Thanks very much … is it possible to have the text in the submenus flush left?

     

    Thanks.

     

     

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    10. Ben Pleysier,
    May 17, 2012 11:47 PM   in reply to lyn100
    Report

    I repeat what I said

    Add

    ul.MenuBarHorizontal li {

        text-align: left;

    }

    ul.MenuBarHorizontal a {

        text-align: center;

    }

    ul.MenuBarHorizontal ul a {

        text-align: left;

    }

    to the bottom of SpryMenuBarHorizontal.css

    The non-highlighted styles, you have modified those, but not the last one

     

    Gramps

     
    |
    Mark as:
  • lyn100
    Currently Being Moderated
    11. lyn100,
    May 18, 2012 8:14 AM   in reply to Ben Pleysier
    Report

    Thank you Gramps, now I understand what you’re asking me to do! The menu is now perfect in IE. Thank you for your patience.

     

     

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points