Center Spry Menu Horizontal Bar

My spry menu bar has 7 items with no sub menus.
The menu looks fine but it's up against the left hand border and I am having a terrible time trying to center on the page.

TerryGV, David Powers has given you the best advice, and you have followed it...and it works!
Dreamweaver is not a push-button, automated, all-is-fixed-in-a-single-click type of program. Results with those programs are restricted to the actions that can be pre-supposed by the engineers.
With Dreamweaver, you have the freedom and breadth of possibilities (and sometimes the labor) that come with that lack of second-guessing by others.
What you have done is basic CSS. Once you get a good understanding of Cascading Style Sheets, you will find you will not be wishing for automated solutions as much.
Beth

Similar Messages

Gap in second level spry menu (Horizontal menu)

Hi,
I wonder if anyone can help me?!!
I've been developing a new website for my shool, with a horizontal spry menu bar. It all works fine, but when you select the third level menu on the spry, a gap emerges between the second and third level. Whislt it doesn't effect the functionality, it doesn't look very good!
I've attached a picture below to illustrate the problem, as you can see when the user clicks on the "For Parents" submenu, the next level, (starting with "Heads Welcome"), is seperated.   Please, please, please, can anyone tell me how to fix this, I'm getting desperate!
Thank you so much in advance.

Hi, Thank you Gramps. I'll have a play with a new Spry and see how it looks. I have tried to adapt my current one, and it seems to work well in Safari, Chrome or IE8, but doesn't work on my computer running IE9? Any ideas? Thanks again,Richard
Date: Thu, 8 Dec 2011 18:17:42 -0700
From: [email protected]
To: [email protected]
Subject: Gap in second level spry menu (Horizontal menu)
    Re: Gap in second level spry menu (Horizontal menu)
    created by altruistic gramps in Spry Framework for Ajax - View the full discussion
Have a look at the following. I used an un-adulterated CSS
html
body
#header
ul.MenuBarHorizontal
ul.MenuBarHorizontal li
ul.MenuBarHorizontal ul
ul.MenuBarHorizontal a {
    background-color: #000271;
    color: #FFF;
    padding: 0.5em 2.2em;
ul.MenuBarHorizontal ul li
ul.MenuBarHorizontal a.MenuBarItemSubmenu
@media screen, projection {
    ul.MenuBarHorizontal li.MenuBarItemIE     {
        background: transparent;
[Home | HomeFT.html]
[About Us | #]
[For Parents | #]
[Heads Welcome | Head's Welcome FT.html]
[Curriculum | Curriculum FT.html]
[Beyond The Classroom | Beyond the clasroom FT.html]
[Extra Curricular Activities | Ex Curr FT.html]
[Houses | Houses FT.html]
[Year Groups | Year Groups FT.html]
[Achievements | Achievements FT.html]
[Assessment | Assessment FT.html]
[Who's Who | Whos Who FT.html]
[Facilities | Facilities FT.html]
[Forms/Documents | Forms and Docs FT.html]
[Virtual Tour | Virtual Tour FT.html]
[For Students | #]
[Heads Welcome | Head's Welcome FT.html]
[Beyond the Classroom | Beyond the clasroom FT.html]
[Extra Curricular Activities | Ex Curr FT.html]
[Houses | Houses FT.html]
[Year Groups | Year Groups FT.html]
[Achievements | Achievements FT.html]
[Assessment | Assessment FT.html]
[Who's Who | Whos Who FT.html]
[Facilities | Facilities FT.html]
[Forms/Documents | Forms and Docs FT.html]
[Virtual Tour | Virtual Tour FT.html]
[Join Us | #]
[Admissions | Admissions FT.html]
[Prospectus | #]
[Whole School | 12 page Cottesloe School Prospectus 2010.pdf]
[6th Form | sixth form prospectus 2011.pdf]
[Vacancies | Vacancies FT.html]
[Friends of Cottesloe | FOC FT.html]
[Calendar | Calendar Events FT.html]
[Calendar Events | Calendar Events FT.html]
[Term Dates | Term Dates FT.html]
[Exam Dates | Exam Dates FT.html]
[Communications | #]
[Letters Home | Letters Home FT.html]
[Newsletters | Newsletters FT.html]
[News | News FT.html]
[Sports Communications | Sports News FT.html]
[External Links | External Links FT.html]
[Site Map | Site Map FT.html]
[Richards Test Page | Richards Test Page FT.html]
[Contact Us | Contact Us FT.html]
[Supporting Learning | #]
[Independent Learning | Independent Learning FT.html]
[VLE | http://learning.cottesloe.bucks.sch.uk/]
[SAM Learning | https://www.samlearning.com/]
[Parental Guidance | Parental Guidance FT.html]
[Student Guidance | Student Guidance FT.html]
[LINC | LINC FT.html]
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", );
</script>
</body>
</html>
Gramps
     Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/4072864#4072864
     To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/4072864#4072864. In the Actions box on the right, click the Stop Email Notifications link.
     Start a new discussion in Spry Framework for Ajax by email or at Adobe Forums
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.

Spry menu horizontal question

I was wondering if it was possible to edit the spry menu so
that the sub menus showed up as a horizontal line below the main
links something like this
{the initial state would look like this}
home | about us | contact us
{then if you rolled over about us it would look like this}
home | about us | contact
about us submenu1 | about us submenu 2 | about us submenu4

Came across the fix by accident thru extensions in menu bar,
and choice of cursor for each section. Feeling happy! Happy New
Year everyone.

Center spry menu

Hello, I am trying to center my spry menu however I am having some trouble. I am trying to create a fluid layout so I have a <div> where my content will go and I set its width to 80%. Here is the CSS for the menu. Thanks.
@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
          padding: 0;
          list-style-type: none;
          font-size: 90%;
          cursor: default;
          width: 100%;
          font-weight: bold;
          margin: 0 auto;
/* 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;
          text-align: left;
          cursor: pointer;
          width: 18%;
          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
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          z-index: 1020;
          cursor: default;
          width: 80%;
          position: absolute;
          left: -1000em;
/* 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: 100%;
/* 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 #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal 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.MenuBarHorizontal a:hover, ul.MenuBarHorizontal 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.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal 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.MenuBarHorizontal a.MenuBarItemSubmenu
          background-image: url(SpryMenuBarDown.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* 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
          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.MenuBarHorizontal a.MenuBarItemSubmenuHover
          background-image: url(SpryMenuBarDownHover.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.MenuBarHorizontal ul 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.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;

Try
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
ul.MenuBarHorizontal {
    max-width: 50em; /* change to suit */
    margin: auto;
ul.MenuBarHorizontal li {
   width: 25%; /* 4 main menu items x 25% = 100% */
</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 src="SpryAssets/SpryMenuBar.js"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Problem spry menu horizontal

I've got a problem with my spry menu and i can't fix it. Probably its a simple solutions when you know it. My spry menu is correctly showing in Firefox but not in Internet Explorer 8 on windows. I use spry 1.6.1. This is the website http://www.debestebaan.nl

vw2ureg wrote:
Hi David,
Please have a look at the following selectors and change the rules accordingly
ul.MenuBarHorizontal
   margin: 0 0 0 20px;
    padding: 0;
    list-style-type: none;
    font-size: 16px;
    cursor: default;
    width: auto;
    height: 91px;
    position: relative;
    font-weight: bold;
    font-family: Corbel, Chiller;
ul.MenuBarHorizontal li
   margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
@media screen, projection
   ul.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    f\loat: left;
Dit moet helpen.
Ben
Thanks, the problem is solved. Now i can finish my site.
Het heeft geholpen. Bedankt

Can't quite center Spry menu

I've edited the CSS per the help file and added
margin: 0;
padding: 0;
and the menu -sorta- centers, but actually remains left of
center by about 50 pixels.
Any thoughts?
thx
Andrew

Are you using this help file?
http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHorizontalMenuBarSample.h tml

Spry menu - horizontal - submenu default open

i want to have a submenu of one tab open by default on one page rather then when you hover over it. how can i do that? in the css?

All right. Add a class to the ul you want to be open, as
<ul class="open">
Then add a style to your stylesheet:
ul.MenuBarHorizontal ul.open
      {left: 0;
       top: 95%;
You should not need to add id's to actual list items (unless you want to specifically change their colors...)
By giving the submenu (the ul inside the ul.MenuBarHorizontal) a left:0;, you are pulling it in from left-field, where it had been at -1000em and also dropping it to nearly below (95%) the top menu.
You're not tricking the javascript. The javascript will still be working. But the visible submenus will just already be visible instead of hiding and being brought onstage by the javascript. If it's any consolation, the javascript could care less...
If you are working with templates, you can give each submenu ul an id, give the body an editable attribute (so you can change the body id for each page) and set up something in the CSS that controls, for instance:
<body id="contactuspage">
<ul class="MenuBarHorizontal>
     <li>...
          <ul id="contactus">
and in the CSS:
#contactuspage ul.MenuBarHorizontal ul#contactus,
#aboutuspage ul.MenuBarHorizontal ul#aboutus
     {left: 0;
       top: 95%;
So all you have to do is make sure you have set the body id (it could be the id of the container for the menubar...not the menubar itself, though) for each page, and the "show submenus" will automatically apply to the submenus that correspond to the page.
Beth
I'm not sure that this works in all browsers. I'm getting patchy results...It appears that you will have to play with the "top:95%;" call...Internet Explorer drops the top of the submenu to 95% down the WINDOW/viewport, and not just to the bottom of the top menu item. If you have a set height on the top menu item, give that as the value for top.
OK. It looks pretty solid, if you take my comment in the previous paragraph to heart.
Have fun with it!
B

Spry Menu - Horizontal

Website that's being worked on ::
http://shilohsteel.com/Edit
I'm not sure really where to post this so I'm sorry if it's
in the wrong place.
In firefox [of course] everything works as it should..but in
IE [which sadly I have to code this to work in] the sub menu
appears at the top of the screen, not next to the parent that calls
it.
Please help!
-Tabbi

Anyone? Please!

How to keep a Spry menu in one file?

Could somebody explain me how I can keep the HTML code for a
Spry menu (horizontal) bar in just one file? Of course, the aim is
to reduce the effort of making later changes in the menu to a
minimum... I'm not a professionell developer, but I wonder if I can
do so by using PHP or maybe XML. The question is: How do I do this?
Thanks for any help!

http://www.tizag.com/phpT/include.php
Pablo
www.paul-dell.com
"Death is no more than passing from one room into another.
But there's a
difference
for me, you know. Because in this room I know I can have a
beer."
"bjjobe" <[email protected]> wrote in
message
news:fvelgb$idr$[email protected]..
> Could somebody explain me how I can keep the HTML code
for a Spry menu
> (horizontal) bar in just one file? Of course, the aim is
to reduce the
> effort
> of making later changes in the menu to a minimum... I'm
not a
> professionell
> developer, but I wonder if I can do so by using PHP or
maybe XML. The
> cquestion is: How do I do this?
>
> Thanks for any help!
>
>

I am not able to edit the spry menu via dreamweaver

After having configured a spry-menu-horizontal-bar in my we page the
day before, I cam back to add more links, however, I found this error
message:
The following translator were not loaded due to errors:
PHP_MySQL.htm, has configuration information that is invalid.
Spry.htm: has configuration that is invalid.
SplyWidget.htm: has configuration information that is invalid.
XSLT.htm: has configuration information that is invalid
I am not able to edit the spry menu via dream weaver and doing the
modifications by hand is cumbersome and prone to errors.
Does anyone know how to solve this problem?
Have a good day!
http://www.tandooristyle.ca/ArbolOne1.html

Not sure exactly why, but somethings don't look normal like why you have a PHP_MYSQL.htm file?
Anyways, bets to post this on the Dreamweaver forum instead of the Developer Toolbox forum. You will get a much quicker response as this has nothing to do with the Adobe Dreamweaver Developer's Toolkit.
Brad Lawryk
Adobe Community Expert, Dreamweaver
Adobe Usergroup Manager, Northern British Columbia Adobe User Group

Spry menu showing up incorrectly IE6

Hi there,
My spry menu horizontal bar is showing up incorrectly in
IE6....
The buttons are meant to be maroon during hover, but they're
all the default blue, sometimes when you hover over them they turn
pink, sometimes blue, sometimes completely gray, the colors are all
messed up...
But it's fine in other browsers..... Please advice, thanks
cgbub

Even if it would be included as SSI your markup will still be wrong.
if your SSI is in the body, that means you will have a extra tittle tag and meta tag in the body of your page. Same would count for script and <link> tags.
If the SSI was in the head. Than your whole menu bar markup would also be in the <head> which isn't valid either.
Also, you menu is on the right side because:
ul.MenuBarVertical ul {
cursor:default;
font-size:100%;
left:100em;
list-style-type:none;
margin:-5% 0 0 101%;
overflow:visible;
padding:0;
position:absolute;
top:0;
width:169px;
z-index:1020;
You say it needs to be there due to the 100em left
For the underlines, in the ul.MenuBarVertical a css selector add the following property;
text-decoration:none;

Centering a horizontal Spry Menu

I am extremely new to DW and have been trying for hours to center a Spry Menu that I created and I can not figure it out. I've watched a dozen tutorials, have books, and have tried Googling but can not find my answer. Basically, I would like my menu bar to expand & contract with the users browser window. I'd like 15% on the left & right margins, 70% in the middle. The Spry menu (nav bar text) should be centered in the middle 70%. I feel I've tried everything. Any help would be greatly appreciated! Oh, & I am a designer, not a coder so be gentle with code explanations please.

Here is my code:
<!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>template</title>



<link href="../styles.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"></div>
<div id="nav">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="#">Home</a>    </li>
    <li><a href="#" class="MenuBarItemSubmenu">About Us</a>
      <ul>
        <li><a href="#">What We Do</a></li>
        <li><a href="#">History</a></li>
        <li><a href="#">Meet The Board</a></li>
      </ul>
    </li>
    <li><a class="MenuBarItemSubmenu" href="#">Activities</a>
      <ul>
        <li><a href="#">Main Coffee</a>        </li>
        <li><a href="#">Drop-In Coffee</a></li>
        <li><a href="#">Neighbor to Neighbor</a></li>
        <li><a href="#">Special Activites</a></li>
        <li><a href="#">Community Services</a></li>
        <li><a href="#">Subgroups</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Membership</a>
      <ul>
        <li><a href="#">Cost</a></li>
        <li><a href="#">Benefits</a></li>
      </ul>
    </li>
    <li><a href="#">Photo Gallery</a></li>
    <li><a href="#" class="MenuBarItemSubmenu">Useful Links</a>
      <ul>
        <li><a href="#">General Information</a></li>
        <li><a href="#">Friends of Benvenuto</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Dreamweaver "SPRY" Menu - Question on editing the CSS?

Hi, I am using the "SPRY" menu in DW CS4
In the CSS Styles panel there are a lot of "ul" (unordered lists) and "li" (lists) but I am unsure which ones to edit to get the changes I need below. If someone could give me some direction I would be very thankful.
Here is the link to the website with the menu. http://www3.telus.net/~jessum/#
How Do I ...
1.Center the menu horizontally?
2. Change the font style to a sans serif font?
3. Move the menu's to the right so they're centered in the button?
4. Add a different colored background images that will tile the width of the buttons?
5. Change the width of the buttons?
6. Add some "blank" buttons or empty spacers to the left and right of the menu buttons to fill up the with of the menu bar?

Customizing Spry Menu Bar
http://foundationphp.com/tutorials/sprymenu/customize1.php
Centering a Horizontal Spry Menu
http://foundationphp.com/tutorials/sprymenu/centering.php
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Spry menu changes - How to:

First. I'm not a developer or programmer. I'm a hacker (dabble unknowingly by trial and errororor).
I looked deeply for how to change font characteristics and found nothing helpful except comments that it can't be done or BEWARE! Horse puckey! Don't believe that all you can change is font, background and color.
I needed to change the font size and width of the bars in my Spry menu. This is how I did it and the details are for others to trial and error it themselves.
I created a page with a Spry menu (horizontal for me) and populated it to three levels. The first time you use Spry it will copy the necessary files into your directory and create a .css file you can see in that directory. You can open up the Spry menu and see the .css parameters, which isn't helpful at all. You can, also, open up the .css file as a window pane, which is what you need.
Next, open up your browser and use it to open the file you are using for test purposes (the .html, not the .css file). Now you can get an idea of what your file will look like in a browser on the Internet. Change back to the Dreamweaver window. Make sure you have the "SpryMenuBarHorizontal.css" (or vertical).
Go to the menu . . . Windows > CSS Style and make sure the CSS Styles tab with ALL selected is showing. If the tab only shows the tree view, drag from the bottom slider bar upward to show both the tree view and the Properties view. Now you're ready.
Do this one step at a time ready to undo any changes you don't like.
Set the window pane to the SpryMenuBarHorizontal.css page. Go down the list of Rules in the CSS Panel until you find one that you think might change what you want.
Make the SINGLE change.
Save the change.
Change to the browser and click on Refresh. The changes will show up. Make sure you test each level.
Go back to the Dreamweaver .css pane and either change it back or try the next one.
You will find you can add properties not noted in other discussion or instructions.
I wanted to change both font size and button width. I found that in the Rules I made these changes that worked just fine.
ul.MenuBarHorizontal - I changed the font size from 100% to 60% and got a smaller font universally in the menu.
ul.MenuBarHorizontal ul li - I changed the width from 8.2 ems to 16 ems and had wider menu bars universally.
Experiment, try it, be adventurous! Just do it carefully and be ready to undo unwanted changes.

Other than additional specific changes, this was NOT a question for further discussion. It was simply a solution for others to find.

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.

Center Spry Menu Horizontal Bar

Similar Messages

Maybe you are looking for