Sucker Tree Vertical Menu

[Perfect S.]

Edit: Fixed... IE 7 needs a specific width value in my case (percents may mess it up)


1) Script Title: Sucker Tree Vertical Menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...u-vertical/P0/

3) Describe problem:
Here's a picture of the problem:



The border Should end at where the yellow is. The menu works fine in ie 6 and firefox... but when I open it up in IE 7 the sub menus cannot be accessed properly. The <a> tag does not span the full width of the <li> so you cannot move your mouse onto the other links that pop up at the side. I read in a comment to fix it for ie 7 just add

width: 100%;

I added that to the css.The problem is that even though the sub menus can be accessed they push out further than the 125px I've set them at and create white space. From what I can see it's the padding and borders that push it over.

/* menu links style */
.suckerdiv ul li a{
display: block;
color: black;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 1px solid #ccc;border-bottom: 0;
}

The problem is that I don't want to put neither of those to zero or it will look bad on all browsers.

Making the width of the <a> 125 px (which is the width of the <ul>) does something similar.

I can't seem to find any way to fix this.

This is a school website and a majority of the traffic is by IE users... so making sure it works in more up to date IE browsers is important. Any ideas on how I can fix the problem for IE 7? Any help is GREATLY appreciated.

[ddadmin]

I'm going to start combing through the codes in the CSS library for any issues with IE7, including this one. It may take a few days, though I'll post an update here with any progress.

[Perfect S.]

Anyways... I actually don't need this answered anymore... I figured out what was going on and how to fix it to fit my needs. When I set the <a> tag to being 100% it was taking 100% of the parent element (the width of the list was 125px, so it would be 125px) and it added the padding and borders of the <a>. The padding was 5px and the border was 1px...

/* menu links style */
.suckerdiv ul li a{
display: block;
color: black;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

and since they go on both sides I gave my <a> tag a value of 113 (125px total - 10px total padding - 2px total border = 113px).

Now it looks like:

/* menu links style */
.suckerdiv ul li a{
display: block;
color: black;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
width: 113px;
}

The only real important part of this post was that .suckerdiv ul li a needs a width value that is:

width = ul width - (padding-left + padding right + border-left + border-right)

to work properly so that things don't get oversized. I don't know if that helps anyone at all. At least that worked for me =)

[ddadmin]

You could perform the calculations manually to take into account the CSS box model, though in this case you shouldn't have to. The issue has to do with IE7 and how position:relative doesn't trigger the hasLayout property. Anyhow, one workaround is just to explicitly trigger it, by editing the CSS:

/* menu links style */
.suckerdiv ul li a{
display: block;
width: auto;
overflow: auto;
"
"

The line in red is new. This should fix the issue without any further changes to the CSS. I'll have to do some more research to see if there are other issues before updating the code officially.

[ddadmin]

Just fyi, I've updated Suckertree vertical menu now for this issue, plus added the ability to auto detect sub menus widths for easier customization.

[Perfect S.]

Thanks for the help!

I just noticed it was updated. =)