Problem with IE Vertical Menu Bar Widths

I currently have a Vertical Menu Bar with the width set to
auto. IE shows all of the top-level menu items as a single
word-wrapped line.
When you hover over any submenu item, the border that appears
on hover only spans the width of that submenu item's text rather
than the width of the actual submenu.
Is there a way to use auto widths in IE or will I just have
to use predetermined widths?
My URL is
http://www.plpimports.com/
Thanks!!

I changed the layout so that the menu is fixed width. I think
I like it better this way anyway.

Similar Messages

Problems with my spry menu bar, need help

i made a spry menu bar, and it works on my computers at my house and my computers at school, but on other computers the home page menu bar is in the middle of the page (not on the left side) and on the other pages the menu bar submenus dont go out to the side of that button, its hard to explain but the "designs" button has a sub menu that is supposed to go out to the side of it but it goes out to the side at the top!.. please look at it for me...?
www.branchoutadvertising.com
Linda

i made a spry menu bar, and it works on my computers at my house and my computers at school, but on other computers the home page menu bar is in the middle of the page (not on the left side) and on the other pages the menu bar submenus dont go out to the side of that button, its hard to explain but the "designs" button has a sub menu that is supposed to go out to the side of it but it goes out to the side at the top!.. please look at it for me...?
www.branchoutadvertising.com
Linda

Spry vertical menu bar positioning issue in IE

I have been trying to fix a problem with my spry menu bar and have been looking for answers at several spry forums. I have modified my vertical spry menu to open submenus above and to the right of the main menu. It works in Opera, Firefox and Safari and opens below in IE. I tried changing the positioning from absolute to relative and that made it position itself below in all browsers. So, by deductive reasoning there seems to be something going on with IE when it reads the absolute positioning, is there a fix for this? You can see my website at raydlett.com the menubar is called STUDIO.
Here is my vertical menubar CSS:
@charset "UTF-8";
/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* 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: 6.75em;
/* 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: 6.75em;
/* 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: 0 0 0 95%;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 9.2em;
    left: -1000em;
    bottom:-1%;
/* 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: 9.2em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
    border: 0px solid #fff;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
    border: 0px solid #fff;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    background-color: #fff;
    padding: 0.5em 0.75em;
    color: #666;
    text-decoration: none;
/* Menu items that have mouse over or focus have a white background and orange text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    background-color: #fff;
    color: #FF4C00;
/* Menu items that are open with submenus are set to MenuBarItemHover with a white background and orange text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
    background-color: #fff;
    color: #FF4C00;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarVertical li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;
Here are the associated global.css components:
body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 76%;
    padding: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    margin: 0;
    background: #fff;
    color: #666;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    line-height: 1em;
#container {
    width: 880px;
    text-align: left;/* this overrides the text-align: center on the body element. */
    margin-right: auto;/* the auto margins (in conjunction with a width) center the page */
    margin-left: auto;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    font-family: Verdana, Geneva, sans-serif;
#header {
    font-size: 1em;
    padding-left: 17px;
    height: 26px;
    position: relative;
ul {
    padding:0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 10px; /* used for both menubar 1 and 2 */
    margin-left: 20px;/* used for both menubar 1 and 2 */
li {
    margin:0;
    padding:0 0 0 5px;/* used for both menubar 1 and 2 */
I have also attached the index.html file that uses the modified "STUDIO" Spry MenuBar2
Any help on this would be greatly appreciated. Thanks in advance.
ribit10

That makes sense, tooltips are tooltips, and appear at the tip of the mouse...But those "submenu triggers" can be simply styled links (as they are in a spry menu)...don't need to be swaps or images or image maps.
What about a using show/hide behavior? Click the STUDIO and the menu pops up adjacent in an apDiv. Click a link. Or click the x to close the apDiv.
You know this is just an exercise to run through all the Javascript and Spry that is in Dreamweaver, eh?
By the way, just providing a link to your page is quite all you need to do. You don't need to attach your files or show pictures of them...by providing a link, I can save a web page in its entirety and open it in Dreamweaver.
Beth

Vertical Menu Bar with custom positioning

I am working on a site that uses the very old mm_menu script. It is a PITA to maintain and modify. However, it allows on thing I have been unable to accomplish with Spry Vertical Menu -- the second level menus appear in the same vertical space as the first level menu. The normal operation for such menus is for the second level to start more or less with the vertical position of the first level button. But this means the second level often drops far below the bottom of the lowest first level button.
Does anyone know of a way to customize where each second level appears (third and fourth are not needed)? Or some other UL/LI based menu code that can do this?

Hi Bob,
My first suggestion would be to re-order your navigation list to avoid the problem in the first place or figure out a different design altogether. By re-ordering, I mean place menu items with the largest submenu at the top, and those with the smallest at the bottom. Of course I understand there may be reasons not to do this, so here is what you can do to control where the menu positions itself. The vertical positioning is controlled by "position: absolute;" style in all <ul>s contained within a <ul class='MenuBarVertical'>. When you position something with absolute, it looks for its nearest parent that is positioned relatively (in this case the <li> items within <ul class='MenuBarVertical'>). from there you can designate pixels or ems to offset from the top or bottom of the parent. so an example of a way to do this is below.
to give your menu the most control, you can assign each submenu its own class and decide its vertical positioning.
     your current html/css is something like:
    <style>
     ul.MenuBarVertical ul
          margin: -5% 0 0 95%;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          position: absolute;
          z-index: 1020;
          cursor: default;
          width: 8.2em;
          left: -1000em;
          top: 0;   /* <-------this is what you will change for each submenu */
     </style>
so to change this you could assign a class name to each submenu to look something like this
<ul class='MenuBarVertical'>
     <li>
          <a href='#' class='MenuBarItemSubmenu'>Item 1</a>
          <ul class='item_1'>
               <li>sub1</li>
               <li>sub2</li>
               <li>sub3</li>
          </ul>
     </li>
     <li>
          <a href='#' class='MenuBarItemSubmenu'>Item 2</a>
          <ul class='item_2'>
               <li>sub1</li>
               <li>sub2</li>
               <li>sub3</li>
          </ul>
     </li>
     <li>
          <a href='#' class='MenuBarItemSubmenu'>Item 3</a>
          <ul class='item_3'>
               <li>sub1</li>
               <li>sub2</li>
               <li>sub3</li>
          </ul>
     </li>
     <li>
          <a href='#' class='MenuBarItemSubmenu'>Item 4</a>
          <ul class='item_4'>
               <li>sub1</li>
               <li>sub2</li>
               <li>sub3</li>
          </ul>
     </li>
</ul>
and extend the class styling to control each menu's vertical position. "top:0;" is what is default and aligns the top of the submenu with the top of its parent <li>. Giving it a negative number would move the submenu up and a positive number would move it down (can be in pixels, ems, etc.). You can also use "bottom:0;" to align the bottom of the submenu with the bottom of its parent <li>. Giving it a negative number would move the submenu down, and a positive number would move it up. So using the above menu/list format you could position each submenu exactly where you want to:
<style>
     ul.MenuBarVertical ul
          margin: -5% 0 0 95%;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          position: absolute;
          z-index: 1020;
          cursor: default;
          width: 8.2em;
          left: -1000em;
          /* top: 0; <-------comment this out or remove it. we will set the position for each menu*/
     ul.MenuBarVertical ul.item_1
          top: 0;
     ul.MenuBarVertical ul.item_2
          top: -30px;
     ul.MenuBarVertical ul.item_3
          bottom: -2em;
     ul.MenuBarVertical ul.item_4
          bottom: 0;
     </style>
Of course there are other ways to do this, but the lesson to remember is how absolute positioning works. It looks for its nearest relatively positioned element and positions itself from that using top/bottom/left/right. I hope this gives you a workable solution or at least gets you moving in the right direction.
Dan

T43p with one vertical white bar 1/2" in width 3" from right side of screen

I have a T43p with this vertical white bar that is new as of an hour ago. Not sure where it came from or how to fix it. I don't think anytihng is loose because I wiggled and pushed on every part on and around the monitor to see if it would change color or flicker at least a little. No change was noted. I also restarted and no change. External monitor shows no signs of this bar so it is not due to programming. I believe is is all due to hardware. Any ideas on an easy cost free fix? any help woud be awesome.

Welcome to the forum!
I don't believe that there's a cheap fix for an expensive machine such as T43p. Do you have any warranty left?
Have you run PC-Doctor on all video aspects of the system?
Good luck and let us know.
Cheers,
George
In daily use: R60F, R500F, T61, T410
Collecting dust: T60
Enjoying retirement: A31p, T42p,
Non-ThinkPads: Panasonic CF-31 & CF-52, HP 8760W
Starting Thursday, 08/14/2014 I'll be away from the forums until further notice. Please do NOT send private messages since I won't be able to read them. Thank you.

Spry Vertical Menu Bar Styling Issues

Hello all,
I'm having CSS issues with a spry vertical menu bar. The Menu
is fairly basic but, it has some odd sizing requirements specified
by it's designer. The designer would like the sub menu items to all
have different widths that correspond to the actual content within
them. Here is sample.
http://staging.rm306.com/cycle/
The menu seen at the page above was not build with Spry. It
was build with another tool and has considerable problems with
consistent browser display.
Can anyone give me a short list of styles and where they
should be applied that might help me achieve this reletively simple
effect?
I've tried to use Spy menu bars in my projects in the past
but, there was always some sticking point. I'd like this time to be
the winner if possible.
Thanks for your time and patience in advance,
Kevin

The sample page I posted came after searching for an easy
"how to do it". The closest I found to a tutorial was this:
http://www.adobe.com/devnet/dreamweaver/articles/spryte_menu.html
The author designs and implements a spry menu with Fire Works
graphics. The last section describes how to modify the existing CSS
for multiple levels. Yet I found the sample page easier to follow.
I hope this helps though.

Help with a Spry Menu Bar

I'm having trouble with a Spry Menu Bar not displaying
correctly in Internet Explorer, while it displays fine in every
other browser I have available. I've done some searching on these
boards, but the queries I've found with the same type of problem
each has a knowledgeable person editing the code for the
poster...and I can't seem to make heads or tails of it.
So, below is my link. What you'll see if viewed in Explorer
is that the "Clinics" listing and the "Services & Specialties"
listing are each on the same horizontal line, rather than vertical
like the rest of the menu. If anyone can help me in correcting this
problem, I'd be very appreciative.
Thanks in advance.
http://www.chambershospital.com/temp/about.html

Hello,
You might try removing all of the <div> tags you
inserted in the menu.
This can happen if you select text in design view and use the
"align" icons
in the properties window instead of using CSS to align
things.
For example:
<li>
<div align="left"><<****REMOVE THIS
<a href="clinics.html"
class="MenuBarItemSubmenu">Clinics</a>
<ul>
<li><a href="clinic.html">Chambers
Clinic</a></li>
<li><a href="clinic7.html">Scenic 7
Clinic</a></li>
</ul>
</div><<*** REMOVE THIS
</li>
So it looks like this:
<li><a href="clinics.html"
class="MenuBarItemSubmenu">Clinics</a>
<ul>
<li><a href="clinic.html">Chambers
Clinic</a></li>
<li><a href="clinic7.html">Scenic 7
Clinic</a></li>
</ul>
</li>
Repeat for all the other <div align="left"> and
</div> tags in the menu.
Take care,
Tim
"Zim74" <[email protected]> wrote in message
news:fv4vc0$r0t$[email protected]..
> I'm having trouble with a Spry Menu Bar not displaying
correctly in
> Internet
> Explorer, while it displays fine in every other browser
I have available.
> I've
> done some searching on these boards, but the queries
I've found with the
> same
> type of problem each has a knowledgeable person editing
the code for the
> poster...and I can't seem to make heads or tails of it.
>
> So, below is my link. What you'll see if viewed in
Explorer is that the
> "Clinics" listing and the "Services & Specialties"
listing are each on the
> same
> horizontal line, rather than vertical like the rest of
the menu. If
> anyone can
> help me in correcting this problem, I'd be very
appreciative.
>
> Thanks in advance.
>
>
http://www.chambershospital.com/temp/about.html
>
>

Problems with Spry vertical menubar in IE

Help needed! I am creating a template page using a Spry
vertical menu bar. It works fine in all my browsers except for IE,
which places a white space on the right-hand side of the menu bar.
Some of my templates are working fine with similar bars, but I
can't correct the problem even after re-saving the template using a
working page. Example page can be viewed at
http://www.opportunityresources.org/support/index.html
Thanks for any ideas!

That worked, but now IE is using the wrong color for the
vertical menu bar hyperlinks (sitewide) - it should be white,
rollover to blue, visited white. I suspect it is reading the CSS
set up for my general page where links are set to gray. Maybe a
hierarchy issue? Not sure how to force it to separate the two...?
Thank you!
http://www.opportunityresources.org/about%20us/index.html

Question on spry vertical menu bar backgrounds

I have a spry vertical menu bar. The menu branches off to 3 or 4 levels in some cases. When you mouse over the menu structure the menu path that you have selected turns a different color. I acheived this by giving
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
a different text color and also a different background color using CSS. The thing I want to acheive now is to somehow make listings within my menu structure that are clickable links a slightly different color. This is to signal that a menu selection that is currently being hovered over is indeed clickable (and linked to another page). For example, most of my clickable menu listings are at the end of a menu branches. That is to say the menu listing at the 1st and 2nd level are not clickable (linked to another page) but the listing that falls at the end of the menu branch is clickable.
How can I make the menu listings that link to other pages a different color then the other menu listings that do not link anywhere but are instead just the preceding struture to get you to the end of the menu structure?
Currently menu listings which merely branches off and do not link to a clickable page have a reference of "#" as shown below.
<li><a href="#">Menu_1</a>
This "#" was put there by Dreamweaver so I just followed the pattern. Clickable menu listings reference another HTML page as you would expect.

Nancy,
Thanks for the reply (it helped me know how to approach it). It looks like editing
ul.MenuBarVertical a.MenuBarItemSubmenuHover
will give me the behavior I was looking for. I don't know if that is what I want to do now that I look at it though. Using different colored backgrounds when hovering over links seems to contrast too much (even though some are clickable and others are not). Perhaps I didn't have the right color choice.
Instead I thought about emphasizing links that are clickable (with some type of visual variation) as opposed to making the hovering background color path to those clickable links different. I experimented with placing a 1 inch border around links in the menu that can be clicked but I am not sure if I like it or not.
I am using a background color of #7D120C for the hover. Any suggestions are welcome and appreciated.
http://www.indiana.edu/~iutreas/index.html
Thanks,
JTB

Force vertical menu bar to stay open on loaded pages

I am creating a new site using Dreamweaver CS3, temporarily uploaded at:
http://www.sharpeacademy.co.uk/nick-jackson.co.uk/sharpeacademy/theatrearts/
I have a navigation bar with the usual main tabs and sub tabs. Is it possible to configure this so that each section of the nav menu stays open when any of the pages linked to the sub-menus are selected?
Hope that makes sense!

OK just managed to resolve the ftp issue. Bit tricky as our
old (average) website is still on the same server.
Anyway please check this link.
http://www.klanntools.co.uk/Contact%20Us%20pagehtm.htm
As you can see it works fine in FF but not in IE7. The child
sub menus keep appearing at the top of the vertical menu
bar.

Vertical Menu Bar difficulties

Hi, I'm using the spry menu bar to create a vertical menu bar
on our new website. I'm new to all this but I've been playing with
pc's for years and have got the promise of a payrise if I can get a
neat looking website up and running.
Anyway, my sub menu bars appear at the top of the section
when I preview my template and move the mouse over the menu bar.
I've put a few screen print pics on photobucket so you can see what
I'm talking about.
http://i199.photobucket.com/albums/aa13/ewanvx/Klannweb1.jpg
http://i199.photobucket.com/albums/aa13/ewanvx/Klannweb2.jpg
What I'd like is to have each sub menu "linked" to its parent
item in the main menu so it appears alongside the parent item
rather than at the top.
How can I make it do this? Or this something to do with the
IE7 glitch I keep reading about?
Also can I just check that when I publish the website, the
flash buttons at the top of the page will actually work as I've got
them all set as links to other pages, but in preview mode these
links don't seem to work.
Its annoying me this as I was unable to get a book on
dreamweaver cs3, so bought a book on dreamweaver 8 which of course
doesn't use the spry system. Everything else seems very similar
though. As I want the same basic layout at the sides and top I'm
using a template which is the page I'm editing in the above pics.
Please help!
E.

OK just managed to resolve the ftp issue. Bit tricky as our
old (average) website is still on the same server.
Anyway please check this link.
http://www.klanntools.co.uk/Contact%20Us%20pagehtm.htm
As you can see it works fine in FF but not in IE7. The child
sub menus keep appearing at the top of the vertical menu
bar.

How can I widen the vertical scroll bar width in Firefox and Thunderbird?

How can I widen the vertical scroll bar width in Firefox and Thunderbird?

Hello,
Try disabling graphics hardware acceleration. Since this feature was added to Firefox, it has gradually improved, but there still are a few glitches.
You might need to restart Firefox in order for this to take effect, so save all work first (e.g., mail you are composing, online documents you're editing, etc.).
Then perform these steps:
*Click the orange Firefox button at the top left, then select the "Options" button, or, if there is no Firefox button at the top, go to Tools > Options.
*In the Firefox options window click the ''Advanced'' tab, then select "General".
*In the settings list, you should find the ''Use hardware acceleration when available'' checkbox. Uncheck this checkbox.
*Now, restart Firefox and see if the problems persist.
Additionally, please check for updates for your graphics driver by following the steps mentioned in the following Knowledge base articles:
* [[Troubleshoot extensions, themes and hardware acceleration issues to solve common Firefox problems]]
* [[Upgrade your graphics drivers to use hardware acceleration and WebGL]]
Did this fix your problems? Please report back to us!
Thank you.

How do i customize the states in a vertical menu bar?

i see that it is possible to change the states for a horizontal venu bar, but i can't get it to work for the vertical one. please tell me we can edit the states in a vertical menu bar.
valerie

Yes, you've hit a bug in Muse, that will be fixed in the next release.
The bug happens when you have a gradient fill for the default state, but no gradient fill for your other state. The vertical menu has this look by default. You can work around it by removing the gradient in the default state, or adding a gradient for the other states.

Spry Vertical Menu Bar OK in Safari?

I'm revising the menu and using Spry in order to make the
menu friendlier to all generations of Safari. Has anyone had issues
with the Spry menu bar in Safari?
Thanks for any help.

I am told by Safari users (no mention of which Safari
release) that the site as it stands (using Xara rather than Spry)
does not allow hover to work correctly. The submenus appear until
the Safari user hovers over them, at which point they disappear. My
mockup page menu seems to work fine with Safari for Windows Beta,
but I just want to make sure that Mac users can get into the page.
Thanks.

Artifacts between Logo and Vertical Menu Bar

See http://www.ottawapatentagency.com
Artifact #1: a light grey dot at the joint between the logo and the vertical menu bar, on the right hand side.
Artifact #2: on mouse over 'Home' - the top menu item of the vertical menu bar - there appears a light-colored, 1-pixel separation between the logo and the vertical menu bar.
The logo is a standard gif and the vertical menu bar is a standard spry menu bar, I am puzzled.
Anyone has a solution?

You could try adding the following code above your closing </head> tag:

Also, it looks like you need to add closing brackets to the following two lines:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"
<link rel="icon" href="/favicon.ico" type="image/x-icon"

Problem with IE Vertical Menu Bar Widths

Similar Messages

Maybe you are looking for