Skip navigation
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.

 
Replies
  • Currently Being Moderated
    May 16, 2012 11:15 PM   in reply to lyn100

    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:
  • Currently Being Moderated
    May 17, 2012 8:00 PM   in reply to lyn100

    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:
  • Currently Being Moderated
    May 17, 2012 10:03 PM   in reply to lyn100

    I do not see that you have made the changes.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    May 17, 2012 11:47 PM   in reply to lyn100

    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:

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