Centering vertically

Dumb quesdtion, I'm sure, but I'm just trying out Dreamweaver
8
Having problems with vertical centering.
I have a Flash movie (SWF). I put it in a table (100%) with
one cell that I set to vAlign = Middle, Align = Center
It centers horizontally fine. As you resize the browser, the
flash moves and recenters itself.
But, for the life of me, I cannot get it to center
vertically. It starts down about 1" on screen, higher than middle
and stays there no matter how you resize the browser.
I remember doing something with a <DIV> in the past,
but does anyone know how to simply center the Flash movie
vertically without twisting myself into knots?
Thanks, in advance, for your help.
AAKAlan

http://www.apptools.com/examples/tableheight.php
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"AAKALAN" <[email protected]> wrote in
message
news:ea6c5e$hnk$[email protected]..
> Dumb quesdtion, I'm sure, but I'm just trying out
Dreamweaver 8
> Having problems with vertical centering.
>
> I have a Flash movie (SWF). I put it in a table (100%)
with one cell that
> I
> set to vAlign = Middle, Align = Center
> It centers horizontally fine. As you resize the browser,
the flash moves
> and
> recenters itself.
> But, for the life of me, I cannot get it to center
vertically. It starts
> down
> about 1" on screen, higher than middle and stays there
no matter how you
> resize
> the browser.
>
> I remember doing something with a <DIV> in the
past, but does anyone know
> how
> to simply center the Flash movie vertically without
twisting myself into
> knots?
>
>
> Thanks, in advance, for your help.
>
> AAKAlan
>

Similar Messages

Text in document is centered vertically on page... how do I change it

I have a large project and the entire document is set to center text vertically on a page, but I want it aligned to the TOP. I am certain there is a simple solution, but cannot find it anywhere...driving me crazy. Please help!

The only way you can have text centred vertically is to have it in a floating textbox and:
+Inspector > Text > Text > Color and alignment > vertical alignment buttons to the right+
You never said how you managed to have an entire document set to this.
Did you open a Word document?
It is possible that you have done a number of other things as well but it is hard to tell from the little details you have provided.
Peter

Make text box text start at top of box, not centered vertically

It seems all my text boxes i have start the text in the center of the box vertically, then spaces it out as you type more. is there a way to make it start at the top of the box and work down, just as if you were typing in Word or Notepad. if someone only types a few lines, it looks kinda odd having the text in the middle of the box with all that white space above and below it.

Hi,
You can set the vertical alignment of the caption and value (and both) for an object in the Paragraph tab - works just like Word.
Good luck,
Niall

Firefox only prints a centered vertical column that has 1/3 of selected info. Margins are set @ l,r = 0.5", t,b = 0.3"

This happened after the last upgrade to Ff 4.0. The info printed is the left 1/3 column of the page, even if I highlight the whole page & "select" the highlighted portion for printing.

http://kb.mozillazine.org/Problems_printing_web_pages
Is that happening with all three printers?? <br />
Any chance you have a "custom" paper size selected, and not 8 1/2 x 11?
Type '''about:config''' in the URL bar and hit Enter. <br />
''If you see the warning, you can confirm that you want to access that page.''
Filter = '''print_margin'''<br />
Check the '''print_margin_left''' and '''print_margin_right''' prefs to verify that they match the settings in Page Setup. If they aren't correct, right-click each one and select '''Reset'''.

Centering a file in the browser vertically with CSS

I remember there was an issue doing this with tables and I am
wondering
if this is also hard to to with CSS. I would like to center a
flash
file, both vertically and horizontally. I have it centered
horizontally
but not vertically. This is what I have so far.
body {
background-color: #fff;
margin: 0;
padding: 0;
#container {
width: 800px;
margin: 0 auto;
background-color:25231a;
My flash file is inside of the container in the html file.
What do I need to do, to get this centered vertically as
well?
I tried this, but with no luck.
#container {
width: 800px;
margin: auto;
background-color:25231a;
Thank you for any help!
Brian

If I don't hear anything positive from Adobe about fixing it,
I am going to
be much more vocal.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
".: Nadia :. **AdobeCommunityExpert**"
<[email protected]> wrote in
message
news:[email protected]...
> It is getting more and more difficult to support such
posts. I don't have
> that much time to copy and paste a link,find it's wrong
and then have to
> copy and paste again...........
>
>
> --
> Nadia
> Adobe� Community Expert : Dreamweaver
> --------------------------------------------
>
http://www.csstemplates.com.au
- CSS Templates | Free Templates
> --------------------------------------------
>
http://www.perrelink.com.au
- Web Dev
>
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
>
http://www.adobe.com/devnet/dreamweaver/css.html
> -------------------------------------------------
>
>
> "Murray *ACE*" <[email protected]>
wrote in message
> news:[email protected]...
>>I will no longer support posts that contain broken
links like that.
>>
>> --
>> Murray --- ICQ 71997575
>> Adobe Community Expert
>> (If you *MUST* email me, don't LAUGH when you do
so!)
>> ==================
>>
http://www.dreamweavermx-templates.com
- Template Triage!
>>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>>
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
>> ==================
>>
>>
>> ".: Nadia :. ACE :."
<[email protected]> wrote in message
>> news:[email protected]...
>>> OMG - nothing against you Excavatorak, but links
posted via the web
>>> forum interface come through as an absolute mess
on the nttp forum :\
>>>
>>>
>>> --
>>> Nadia
>>> Adobe� Community Expert : Dreamweaver
>>> --------------------------------------------
>>>
http://www.csstemplates.com.au
- CSS Templates | Free Templates
>>> --------------------------------------------
>>>
http://www.perrelink.com.au
- Web Dev
>>>
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
>>>
http://www.adobe.com/devnet/dreamweaver/css.html
>>>
>>>
>>>
>>>
>>>
>>> "Excavatorak" <[email protected]> wrote
in message
>>> news:[email protected]...
>>>> <a target=_blank
class=ftalternatingbarlinklarge
>>>> href="
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html">http://www
>>>>
.jakpsatweb.cz/css/css-vertical-center-solution.html</a>
>>>> <a target=_blank
class=ftalternatingbarlinklarge
>>>> href="
http://milov.nl/code/css/verticalcenter.html">http://milov.nl/code/css/ver
>>>> ticalcenter.html</a>
>>>>
>>>>
>>>
>>>
>>
>>
>
>

Vertical centering in Spark/Flex

I am horizontally dividing my panel between two elements.
To acheive that I am using the following layout controls
     <s:layout>
          <s:HorizontalLayout>
             <s:paddingBottom>20</s:paddingBottom>
             <s:paddingTop>50</s:paddingTop>
             <s:paddingLeft>20</s:paddingLeft>
             <s:paddingRight>20</s:paddingRight>
             <s:gap>300</s:gap>
          </s:HorizontalLayout>
     </s:layout>
This is splitting the panel correctly on the horizonal front.
However, I am then trying to center my other components vertically within the panel and am failing. My non-spark component seems to center perfectly using the following:
     <mx:VBox verticalGap="20" horizontalAlign="center">
          </mx:VBox>
However, when I add a second panel I can't seem to figure out how to center it vertically. I am using the following code:
<s:Panel id="nodeExplorer" backgroundColor="0xFFFFFF" creationComplete="hidePanelHeader(event)" horizontalCenter="0" verticalCenter="0">
     <s:layout>
     <s:VerticalLayout>
        </s:VerticalLayout>
     </s:layout>
</s:Panel>
Any advice on how to verticaly center that second panel is welcome.

UbuntuPenguin and _spoboyle -
   Thanks for the help. Setting the verticalAlign to middle and height to 100% seemed to mostly solve the issue.
That seems to line up the VBox and the Panel.. However, when I place an object into the panel that object isn't centered vertically within that panel. I have a mouse listener on the images in the VBox and when you click one it removes it from the VBox and adds it to the panel. The VBox recenters everything correctly, but the moved object is not centered.
<s:Panel verticalCenter="0" id="mainPanel" visible="true" width="100%" height="100%" backgroundColor="0x000000" creationComplete="hidePanelHeader(event)">
     <s:layout>
          <s:HorizontalLayout>
               
             <s:gap>300</s:gap>
             <s:verticalAlign>middle</s:verticalAlign>
          </s:HorizontalLayout>
     </s:layout>
     <mx:VBox backgroundColor="0xFFFFFF" height="100%" verticalGap="20" verticalAlign="middle">
          <mx:Image source="@Embed(source='p6-550.png')" scaleX=".5" scaleY=".5"/>
          <mx:Image source="@Embed(source='p6-550.png')" scaleX=".5" scaleY=".5"/>
          <mx:Image source="@Embed(source='p6-550.png')" scaleX=".5" scaleY=".5"/>
          <mx:Image source="@Embed(source='p7-750.png')" scaleX=".5" scaleY=".5" id="p71" creationComplete="blinkP7Disk(p71)" mouseDown="exploreNode(p71)"/>
          <mx:Image source="@Embed(source='p7-750.png')" scaleX=".5" scaleY=".5" id="p72" creationComplete="blinkP7Disk(p72)"/>
          <mx:Image source="@Embed(source='p7-750.png')" scaleX=".5" scaleY=".5" id="p73" creationComplete="blinkP7Disk(p73)"/>
     </mx:VBox>
     <s:Panel id="nodeExplorer" backgroundColor="0xFFFFFF" creationComplete="hidePanelHeader(event)" height="100%">
          <s:layout>
               <s:VerticalLayout>
                    <s:verticalAlign>middle</s:verticalAlign>
                    <s:gap>20</s:gap>
               </s:VerticalLayout>
          </s:layout>
     </s:Panel>
</s:Panel>

Centering Object Vertically on Page when exporting to ePUB

I am preparing my first ePUB book using InDesign 5.5. I would like to center the graphic object on the title page, but I cannot figure out how to center an object vertically on a page. Although I can achieve the intended result on my screen in InDesign, when I export to ePUB, the object goes to the very top of the page and is no longer centered vertically. I have a few other pages (the dedication page, the copyright page, etc.), where I have text that I would like to have centered vertically on the page -- same problem. Please help. Thanks.

Irregardless of what you are doing in your InDesign document, an ePub export has to follow the very strict rules of HTML -- and not even the full set as we know it from (semi)formatted web pages, but a subset thereof. There is absolutely no guarantee you can export all you can do in InDesign to an ePub, in fact, there is only very little that survives this radical downsaving.
Besides, I'd have to check but I don't think Adobe intended InDesign to be the once-and-future ePub Layout Engine. Rather, its export is to facilitate cross-publishing, and helping you on your way creating the eBook of your (e)Dreams -- but you have to do the finalizing with some better targeted software.
But, basically, your premise -- that you can put something "at the bottom of an e-page" -- is wrong to begin with! A proper eBook can be reflowed, the font and its size can be changed, the reading window can be resized (on some devices) or rotated from landscape to portrait and back (on some devices). So there is no concept of a "page", and everything you pull off to "be" at the bottom might appear at the top for other views.

Vertical Centering of a page in GoLive

I need a help in vertical centering a page. After long trials and with the help of others in this forum I was able a website that is functioning well enough. The only concern is that it needs to be centered vertically. You can see the website on: http://www.chimeddorj.com
I read the tutorial on the following link, and I liked the 3rd method.
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
But it was too complicated for me as I don't use GoLive often enough. I made this website 3 months ago and since then I haven't used it again. As a result I kind of forgot a lot of things that I knew at that time. If you know how to make the Vertical Centering, could you please guide me how to place the codes in right places? I could provide you with necessary files if necessary. You can also see the HTML code sources by clicking the right button on the website that I created.
For some people it may be easy as click. Please help me if you can.

Thank you very much for comment. I tried to use the table method with your codes. It is centering the content horizontally, but not vertically. The contents are stuck to the top as I resize the window. It seems like I am missing some point. I copy and paste my current code. Could you please give me more advice?
<!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" />
<meta name="generator" content="Adobe GoLive" />
<title>Mongolian Artist Chimeddorj</title>
<script src="js/swfobject.js" type="text/javascript" ></script>
<style type="text/css" media="screen"></style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" height="100%">
<tr align="center" valign="middle">
<td align="center" valign="middle">
<div style="position:relative;width:1060px;height:540px;-adbe-g:p;">
<div style="position:absolute;top:0px;left:0px;width:700px;height:540px;-adbe-c:c">
<script type="text/javascript">
var flashvars = {XMLFile: "paintings.xml"};
var params = {bgcolor: "#ffffff", allowFullScreen: "true"};
swfobject.embedSWF("ArtFlashGallery.swf", "myAlternativeContent","700", "540", "10.0.0",false, flashvars, params);
</script>
<div id="myAlternativeContent">
<a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a></div>
<br />
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

Vertical centering

Using margin-left: auto; margin-right:auto; is good for centering an object horizontally
nice and easy and a reliable option when using box model positioning or absolute positioning with %.
my problem is that i need something centered vertically and margin-top: auto; margin-bottom: auto; does not work in the same way.
my object has to use absolute positining because it is hidden until another object is clicked on.
how can i make this vork

Easy
Here is an exemple
function(){return A.apply(null,[this].concat($A(arguments)))}
function(){return A.apply(null,[this].concat($A(arguments)))}<div style="position:absolute; left:50%; margin-left:-100px; top:50%; margin-top:-100px; width:200px; height:200px">
<table width="200" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999">
    <tr>
      <td><img src="../Site web Final/images/w_siudmak_30gh.jpg" width="200" height="200" /></td>
    </tr>
</table>
</div>
The key is to put the margin left and top at Minus half the size of your thing. Then put the left and top at 50 %.
It need to be in a Div and voila. It is always centered.
Message was edited by: Chorale0001
You also need to set the div to the exact size of your content, otherwise, nothing good will happen. As in my exemple, everything is working fine.

Vertical text centering

Hi. I'm new to the forum and Dreamweaver.
I have created a background layer for an inline navigation
bar, but I can't find a way to center the text line vertically over
the background layer. If the text is presumably written on lines as
in a text editor like Word, and the background layer only has
space( about 50 pixels high by 800 pixels wide) for two horizontal
lines at a given font size , does that mean my navigation bar can
only be on the first line or second line in the background layer
"box"? I'd like to be able to center the text line vertically, but
I gather I can only do this if I expand the background layer
"box,table" vertically to allow for three lines so that I can
position the navigation bar text on the middle line. Unfortunately
, that would seem to affect the proportioning of the background
layer as a frame (as in picture), which would use up more page
space than is necessary.
Thanks in advance for any suggestions or confirmation of this
explanation as the way it really is. ............Paul

Any text box with the line-height, and the text-size the same
will have the
text centered vertically, e.g.,
p { line-height:32px; font-size:32px; }
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"insanepablo" <[email protected]> wrote in
message
news:ethlm3$knm$[email protected]..
> Hi. I'm new to the forum and Dreamweaver.
>
> I have created a background layer for an inline
navigation bar, but I
> can't
> find a way to center the text line vertically over the
background layer.
> If the
> text is presumably written on lines as in a text editor
like Word, and the
> background layer only has space( about 50 pixels high by
800 pixels wide)
> for
> two horizontal lines at a given font size , does that
mean my navigation
> bar
> can only be on the first line or second line in the
background layer
> "box"? I'd
> like to be able to center the text line vertically, but
I gather I can
> only do
> this if I expand the background layer "box,table"
vertically to allow for
> three
> lines so that I can position the navigation bar text on
the middle line.
> Unfortunately , that would seem to affect the
proportioning of the
> background
> layer as a frame (as in picture), which would use up
more page space than
> is
> necessary.
>
> Thanks in advance for any suggestions or confirmation of
this explanation
> as
> the way it really is. ............Paul
>

How do I make Vertical Spry Menu appear in IE

The URL in question is:
http://www.ambppct.org/index_menu.php
I have inserted a Vertcal Spry Menu on this page. It functions perfectly in Safari, Firefox and IE 8. However it does not appear in previous versions of IE.
Below is the css file:
@charset "UTF-8";
/* SpryMenuBarVertical.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, a fixed width box with no margin or padding */
ul.MenuBarVertical
margin: 0em;
padding: 0em;
list-style-type: none;
font-size: 12px;
cursor: default;
width: 12em;
font-family: Verdana, Geneva, sans-serif;
color: #C03;
font-style: normal;
z-index: auto;
background-color: #CC9999;
/* 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;
width: 12em;
/* 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: 12em;
background-color: #CC9999;
/* 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
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 12em;
left: -1000em;
top: 0;
margin-top: -5%;
margin-right: 0;
margin-bottom: 0;
margin-left: 95%;
/* 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;
width: 12em;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 12em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 1px solid #D6D6D6;
width: 12em;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 1px solid #D6D6D6;
width: 12em;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-color: #CC9999;
color: #C03;
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: normal;
border: thin solid #D6D6D6;
overflow: hidden;
padding-top: 0.5em;
padding-right: 0.75em;
padding-bottom: 0.5em;
padding-left: 0.75em;
width: auto;
position: relative;
/* 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: #CC6666;
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: #C66;
color: #FFF;
width: auto;
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%;
width: auto;
/* 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%;
width: auto;
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: none;

You will have to update your spry code (do not know how (possibly in editing the css), but it is causing the problem).
If you have CS3 or 4, you can use the spry updater extension from -
http://labs.adobe.com/technologies/spry/
Delete your old spry files then apply the spry updater by selecting, Site - Spry Updater - then select the options req'd.
Check your page works, modify the spry css as required, checking the site in the browsers after every change.
PZ

Spry Menu Vertical - Border thickness problem in IE 7

Hello,
No. I'm not using the last 1.6.1 file, because I have change
the css vertical menu to fit my design style.
Errors that I get:
They are all with IE 7 versions. In Firefox, everything is
great.
1) A weird refresh when I click on the submenu links.
2) I can't get the horizontal border line between the menus
to get 1px in IE 7.
Here is the vertical menu css code:
@charset "UTF-8";
/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release
1.5 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
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: 10em;
/* 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: 10em;
/* 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: 10em;
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: 10em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 1px solid #000;
/* 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: #333333;
padding: 0.6em 0.75em; /*primeiro pading vertical, segundo:
horizontal*/
color: #FFFFFF;
text-decoration: none;
font-family: sans-serif;
text-align: center;
border: 1px solid white;
/* 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: #8E001C;
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: #8E001C;
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;
float: left;
background: #fff;
How can I give the same effect that happens in firefox, also
in IE 7 ?
Please test the link in both: IE 7 and Firefox.
http://www.hundehilfe-portugal.de/hund.html

add this to the
@media screen, projection section of the css.
ul.MenuBarVertical li.MenuBarItemIE a and give it a fixed
height. That should fix it.

How do I vertically center links in spry horizontal nav bar?

OS: Mac OS 10.6.7
APP: Dreamweaver CS5.5
Browser: Opera, Safari, Firefox, Chrome
At first, positioning looked great in Chrome and Firefox but was off in Safari and Opera. The link text appeared half on the background image and half below it.
After ample fiddling, vertical positioning is not working in any browser. Please let me know what properties, in what combination, used on which HTML objects will get me reliable results.
HTML:
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="../styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="header"><a href="../index.html"><img src="../images/banner.jpg" width="848" height="160" alt="Dorsay & Easton LLP, Indian Law, Home Page" /></a></div>
   <div class="menuImg">
<ul id="MenuBar3" class="MenuBarHorizontal">
    <li id="home" name="home"><a href="../index.html" title="Home page">Home</a></li>
    <li id="practice"><a href="../practice.html" title="Practice Areas">Practice Areas</a></li>
    <li id="team"><a href="../team.html" title="The Team at Dorsay & Easton">The Team</a></li>
    <li id="contact"><a href="../contact.html" title="Contact Us">Contact Us</a></li>
    <li id="canoe"><a href="#"> </a></li>
</ul>
</div>
CSS:
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
     list-style-type: none;
     font-size: 110%;
     cursor: default;
     width: auto;
     background-image: url(../images/menubackgrd.jpg);
     vertical-align: middle;
     position: relative;
     height: 38px;
     margin: 0px;
     padding-top: 0px;
/* 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; /* jacq addition. not working? */
     cursor: pointer;
     float: left;
     position: relative;
     height: 38px;
     padding: 2px;
ul.MenuBarHorizontal a {
     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     color: #CC6;
     text-decoration: none;
     padding-top: 10px;
     padding-right: 12px;
     padding-bottom: 10px;
     padding-left: 12px;
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     color: #FFC;
     text-decoration: none;
     margin: 0px;
ul.MenuBarHorizontal a:active
     color: #FFC;
     text-decoration: none;
     margin: 0px;
/* 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) */
/* commenting out all submenu style info
ul.MenuBarHorizontal ul
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     z-index: 1020;
     cursor: default;
     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: 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%;
/* 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;
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;
#practice {
     height: 38px;
#home {
     height: 38px;
     margin-left: 5px;
#team {
     height: 38px;
#contact {
     height: 38px;
#canoe {
     height: 38px;
     width: 285px;
.menuImg {
     background-image: url(../../../DW-CIB/images/menubackgrd.jpg);
     height: 38px;
     width: 848px;
     position: inherit;
     visibility: visible;
     z-index: 2;
     top: auto;
     bottom: inherit;
     vertical-align: middle;
Thanks!
gotsowell

Try line-height: 19px; and display: block; (as shown) on the following css seletor :
ul.MenuBarHorizontal a {
     font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
     color: #CC6;
     text-decoration: none;
     padding-top: 10px;
     padding-right: 12px;
     padding-bottom: 10px;
     padding-left: 12px;
     line-height: 19px;
     display: block;
Normally setting a height on a container which you have no control over is not a good idea. The text can be enlarged and that will throw everything off. The best way is to set no heights at all but use padding and make sure your background image is flexible enough to accommodate the text enlargement.
ul.MenuBarHorizontal a {
      padding: 12px 12px;
     display: block;

My spry horizontal menu bar is now displaying vertical. How do I fix it?

My horizontal spry menu bar displays correctly at http://www.matthewvandyke.com/ar/photos/ but displays vertical at http://www.matthewvandyke.com/ar/about.html. It started doing this a few days ago and I am not sure why.
Can anyone take a look at this code and tell me why this would be happening?
Here is the code:
about.html
(the relevant code from this page)
<div id="topNavigation">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="الصفحة" _mce_href="http://www.matthewvandyke.com/ar/">الصفحة">http://www.matthewvandyke.com/ar/"> الصفحة الرئيسية</a></li>
      <li><a href="حول" _mce_href="http://www.matthewvandyke.com/about.html">حول">http://www.matthewvandyke.com/a bout.html">حول ماثيو فاندايك</a></li>
      <li><a href="الكتابhttp://www.matthewvandyke.com/book.html">الكتاب</a></li>
      <li><a href="الفيلمhttp://www.matthewvandyke.com/film.html">الفيلم</a></li>
      <li><a href="مقاتل" _mce_href="http://www.matthewvandyke.com/about.html#freedom-fighter">مقاتل">http://www.ma tthewvandyke.com/about.html#freedom-fighter">مقاتل الحرية</a></li>
      <li><a href="مغامراتhttp://www.matthewvandyke.com/about.html#adventures">مغامرات</a></li>
      <li><a href="تحليلاتhttp://www.matthewvandyke.com/analyst.html">تحليلات</a></li>
      <li><a href="الحقائقhttp://www.matthewvandyke.com/the-facts.html">الحقائق</a></li>
      <li><a href="الصورhttp://www.matthewvandyke.com/ar/photos/">الصور</a></li>
      <li><a href="الفيديوhttp://www.matthewvandyke.com/video/">الفيديو</a></li>
      <li><a href="المدونةhttp://www.matthewvandyke.com/blog/">المدونة</a></li>
      <li><a href="الصحافةhttp://www.matthewvandyke.com/press.html">الصحافة</a></li>
      <li><a href="الأحداث" _mce_href="http://www.matthewvandyke.com/events/">الأحداث">http://www.matthewvandyke.com/ events/">الأحداث والمناسبات</a></li>
      <li><a href="الرعاةhttp://www.matthewvandyke.com/sponsors/">الرعاة</a></li>
      <li><a href="وسائل" _mce_href="http://www.matthewvandyke.com/social-media.html">وسائل">http://www.matthewvand yke.com/social-media.html">وسائل الإعلام الاجتماعية</a></li>
    </ul>
</div>
SpryMenuBarHorizontal.css
@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
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 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 .15em;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
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
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: auto;
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
display: block;
float: none;
width: auto;
white-space: nowrap;
/* 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: #000000;
padding: 0.4em 0.15em;
color: #FFFFFF;
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: #d6c7a6;
color: #000;
/* 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: #d6c7a6;
color: #000;
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%;
padding: 0.4em 0.15em;
/* 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;
SpryMenuBar.js
// SpryMenuBar.js - version 0.12 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//   * Redistributions of source code must retain the above copyright notice,
//     this list of conditions and the following disclaimer.
//   * Redistributions in binary form must reproduce the above copyright notice,
//     this list of conditions and the following disclaimer in the documentation
//     and/or other materials provided with the distribution.
//   * Neither the name of Adobe Systems Incorporated nor the names of its
//     contributors may be used to endorse or promote products derived from this
//     software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
SpryMenuBar.js
This file handles the JavaScript for Spry Menu Bar. You should have no need
to edit this file. Some highlights of the MenuBar object is that timers are
used to keep submenus from showing up until the user has hovered over the parent
menu item for some time, as well as a timer for when they leave a submenu to keep
showing that submenu until the timer fires.
var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
     (ua.match(/linux/i) ? "linux" :
     (ua.match(/mac/i) ? "mac" :
     ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.BrowserSniff();
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
this.init(element, opts);
Spry.Widget.MenuBar.prototype.init = function(element, opts)
this.element = this.getElement(element);
// represents the current (sub)menu we are operating on
this.currMenu = null;
this.showDelay = 250;
this.hideDelay = 600;
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
// bail on older unsupported browsers
return;
// Fix IE6 CSS images flicker
if (Spry.is.ie && Spry.is.version < 7){
try {
   document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
this.hoverClass = 'MenuBarItemHover';
this.subHoverClass = 'MenuBarItemSubmenuHover';
this.subVisibleClass ='MenuBarSubmenuVisible';
this.hasSubClass = 'MenuBarItemSubmenu';
this.activeClass = 'MenuBarActive';
this.isieClass = 'MenuBarItemIE';
this.verticalClass = 'MenuBarVertical';
this.horizontalClass = 'MenuBarHorizontal';
this.enableKeyboardNavigation = true;
this.hasFocus = false;
// load hover images now
if(opts)
for(var k in opts)
   if (typeof this[k] == 'undefined')
    var rollover = new Image;
    rollover.src = opts[k];
Spry.Widget.MenuBar.setOptions(this, opts);
// safari doesn't support tabindex
if (Spry.is.safari)
this.enableKeyboardNavigation = false;
if(this.element)
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
   if (i > 0 && this.enableKeyboardNavigation)
    items[i].getElementsByTagName('a')[0].tabIndex='-1';
   this.initialize(items[i], element);
   if(Spry.is.ie)
    this.addClassName(items[i], this.isieClass);
    items[i].style.position = "static";
if (this.enableKeyboardNavigation)
   var self = this;
   this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
if(Spry.is.ie)
   if(this.hasClassName(this.element, this.verticalClass))
    this.element.style.position = "relative";
   var linkitems = this.element.getElementsByTagName('a');
   for(var i=0; i<linkitems.length; i++)
    linkitems[i].style.position = "relative";
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
Spry.Widget.MenuBar.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
return false;
return true;
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
if (!ele || !className || this.hasClassName(ele, className))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
if (!ele || !className || !this.hasClassName(ele, className))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
   element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
   element.attachEvent('on' + eventType, handler);
catch (e) {}
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:""';
layer.frameBorder = '0';
layer.scrolling = 'no';
menu.parentNode.appendChild(layer);
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
while(layers.length > 0)
layers[0].parentNode.removeChild(layers[0]);
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
var menus = root.getElementsByTagName('ul');
for(var i=0; i<menus.length; i++)
this.hideSubmenu(menus[i]);
this.removeClassName(this.element, this.activeClass);
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
if(this.currMenu)
this.clearMenus(this.currMenu);
this.currMenu = null;
if(menu)
this.addClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
   if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
    menu.style.top = menu.parentNode.offsetTop + 'px';
if(Spry.is.ie && Spry.is.version < 7)
   this.createIframeLayer(menu);
this.addClassName(this.element, this.activeClass);
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
if(menu)
this.removeClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
   menu.style.top = '';
   menu.style.left = '';
if(Spry.is.ie && Spry.is.version < 7)
   this.removeIframeLayer(menu);
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
if(menu)
this.addClassName(link, this.hasSubClass);
if(!Spry.is.ie)
// define a simple function that comes standard in IE to determine
// if a node is within another node
listitem.contains = function(testNode)
   // this refers to the list item
   if(testNode == null)
    return false;
   if(testNode == this)
    return true;
   else
    return this.contains(testNode.parentNode);
// need to save this for scope further down
var self = this;
this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
if (this.enableKeyboardNavigation)
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
this.lastOpen = listitem.getElementsByTagName('a')[0];
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.hasFocus = true;
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
this.clearSelection(listitem);
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
//search any intersection with the current open element
if (!this.lastOpen)
return;
if (el)
el = el.getElementsByTagName('a')[0];
// check children
var item = this.lastOpen;
while (item != this.element)
   var tmp = el;
   while (tmp != this.element)
    if (tmp == item)
     return;
    try{
     tmp = tmp.parentNode;
    }catch(err){break;}
   item = item.parentNode;
var item = this.lastOpen;
while (item != this.element)
this.hideSubmenu(item.parentNode);
var link = item.getElementsByTagName('a')[0];
this.removeClassName(link, this.hoverClass);
this.removeClassName(link, this.subHoverClass);
item = item.parentNode;
this.lastOpen = false;
Spry.Widget.MenuBar.prototype.keyDown = function (e)
if (!this.hasFocus)
return;
if (!this.lastOpen)
this.hasFocus = false;
return;
var e = e|| event;
var listitem = this.lastOpen.parentNode;
var link = this.lastOpen;
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
if (!opts[3])
opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
var found = 0;
switch (e.keyCode){
case this.upKeyCode:
   found = this.getElementForKey(opts, 'y', 1);
   break;
case this.downKeyCode:
   found = this.getElementForKey(opts, 'y', -1);
   break;
case this.leftKeyCode:
   found = this.getElementForKey(opts, 'x', 1);
   break;
case this.rightKeyCode:
   found = this.getElementForKey(opts, 'x', -1);
   break;
case this.escKeyCode:
case 9:
   this.clearSelection();
   this.hasFocus = false;
default: return;
switch (found)
case 0: return;
case 1:
   //subopts
   this.mouseOver(listitem, e);
   break;
case 2:
   //parent
   this.mouseOut(opts[2], e);
   break;
case 3:
case 4:
   // left - right
   this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
   break;
var link = opts[found].getElementsByTagName('a')[0];
if (opts[found].nodeName.toLowerCase() == 'ul')
opts[found] = opts[found].getElementsByTagName('li')[0];
this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
opts[found].getElementsByTagName('a')[0].focus();
        //stop further event handling by the browser
return Spry.Widget.MenuBar.stopPropagation(e);
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if (this.enableKeyboardNavigation)
this.clearSelection(listitem);
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
if (listitem.closetime)
clearTimeout(listitem.closetime);
if(this.currMenu == listitem)
this.currMenu = null;
// move the focus too
if (this.hasFocus)
link.focus();
// show menu highlighting
this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
if(menu && !this.hasClassName(menu, this.subHoverClass))
var self = this;
listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
if(!listitem.contains(related))
if (listitem.opentime)
   clearTimeout(listitem.opentime);
this.currMenu = listitem;
// remove menu highlighting
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
if(menu)
   var self = this;
   listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
if (this.hasFocus)
   link.blur();
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
var child = element[sibling];
while (child && child.nodeName.toLowerCase() !='li')
child = child[sibling];
return child;
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
var found = 0;
var rect = Spry.Widget.MenuBar.getPosition;
var ref = rect(els[found]);
var hideSubmenu = false;
//make the subelement visible to compute the position
if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
els[1].style.visibility = 'hidden';
this.showSubmenu(els[1]);
hideSubmenu = true;
var isVert = this.hasClassName(this.element, this.verticalClass);
var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
for (var i = 1; i < els.length; i++){
//when navigating on the y axis in vertical menus, ignore children and parents
if(prop=='y' && isVert && (i==1 || i==2))
   continue;
//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
   continue;
if (els[i])
   var tmp = rect(els[i]);
   if ( (dir * tmp[prop]) < (dir * ref[prop]))
    ref = tmp;
    found = i;
// hide back the submenu
if (els[1] && hideSubmenu){
this.hideSubmenu(els[1]);
els[1].style.visibility = '';
return found;
Spry.Widget.MenuBar.camelize = function(str)
if (str.indexOf('-') == -1){
return str;
var oStringList = str.split('-');
var isFirstEntry = true;
var camelizedString = '';
for(var i=0; i < oStringList.length; i++)
if(oStringList[i].length>0)
   if(isFirstEntry)
    camelizedString = oStringList[i];
    isFirstEntry = false;
   else
    var s = oStringList[i];
    camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
return camelizedString;
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
var value;
try
if (element.style)
   value = element.style[Spry.Widget.MenuBar.camelize(prop)];
if (!value)
   if (document.defaultView && document.defaultView.getComputedStyle)
    var css = document.defaultView.getComputedStyle(element, null);
    value = css ? css.getPropertyValue(prop) : null;
   else if (element.currentStyle)
     value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
catch (e) {}
return value == 'auto' ? null : value;
Spry.Widget.MenuBar.getIntProp = function(element, prop)
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
if (isNaN(a))
return 0;
return a;
Spry.Widget.MenuBar.getPosition = function(el, doc)
doc = doc || document;
if (typeof(el) == 'string') {
el = doc.getElementById(el);
if (!el) {
return false;
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
//element must be visible to have a box
return false;
var ret = {x:0, y:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
parent = el.offsetParent;
if (parent != el) {
   while (parent) {
    ret.x += parent.offsetLeft;
    ret.y += parent.offsetTop;
    parent = parent.offsetParent;
// opera & (safari absolute) incorrectly account for body offsetTop
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
   ret.y -= doc.body.offsetTop;
if (el.parentNode)
   parent = el.parentNode;
else
parent = null;
if (parent.nodeName){
var cas = parent.nodeName.toUpperCase();
while (parent && cas != 'BODY' && cas != 'HTML') {
   cas = parent.nodeName.toUpperCase();
   ret.x -= parent.scrollLeft;
   ret.y -= parent.scrollTop;
   if (parent.parentNode)
    parent = parent.parentNode;
   else
    parent = null;
return ret;
Spry.Widget.MenuBar.stopPropagation = function(ev)
if (ev.stopPropagation)
ev.stopPropagation();
else
ev.cancelBubble = true;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
   continue;
obj[optionName] = optionsObj[optionName];

I have not seen your error in either my IE or my chrome. I do note that you are using a "strict" Document Type Declaration.
You might try a transitional DTD, which should be more forgiving than the strict:
<!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">
Other than that, I don't see anything particular (because I don't see the error, either) that would cause the menu to drop vertically instead of horizontally.
Beth

How do I keep the body background-image centered?

I have a body background-image that does not fill up the
entire window on the tops and bottoms of most monitors (it
strectches to the left and right just fine) and so I would like to
have it centered vertically with equal amounts of the
background-color #ECE5C8.
I assumed using background-position: 50% 50% would do the
trick and it does until switching to full screen mode and all the
content jumps upwards and messes up the whole site layout (IE
only-in friefox, the background-image still doesn't center) so
instead I have the background-position set to: 50% 0%.
Thanks a million to anyone who can help me get it centered, I
know there has to be an easy fix but I sure can't figure it out!
The site can be found here:
http://www.lightspacewebdesign.com/sacredsolas

There would be only two ways to make this layout 'work'.
1. Just make everything on that page a graphic. Then there is
no
possibility that resizing the text in the browser will blow
the layout.
This is a very bad idea for obvious reasons.
2. Have the text containing 'graphical box' built in pieces
so that as the
text expands, it can cause the box to expand as well. The
easiest way to do
this is with a top a middle and a bottom image of the box,
using each as the
background image of three stacked containers. Place the text
in the middle
container and as it expands, it will tile the middle
background image
vertically to give the impression of the box expanding. This
approach
doesn't lend itself to your background image, since there is
no way to tile
the background image to fill the newly created space.
Beyond that, I think you are a dead duck. The problem is not
that this is
what you were given to work with - it's that you didn't
understand how
unusable the design was when you accepted it. I think your
best option now
is to go back to the designer and explain to them how this
lovely layout
only works well in print, and not on the web. Show them how
it fails.
Solicit suggestions from them for how to make it work in a
medium where
there is no way to control the size of the text.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"afriendofcheese" <[email protected]> wrote
in message
news:[email protected]...
> By "a rigid layout scheme that cannot allow flexibility"
I assume you mean
> that
> everything shouldn't be bound inside the position of the
background-image,
> but
> this is what the designer and client gave me to work
with.and so I have to
> make
> due.
>
> With that in mind, I hope someone out there can help me
out with this!
>

Centering vertically

Similar Messages

Maybe you are looking for