Results 1 to 6 of 6

Thread: Sucker Tree Vertical Menu

  1. #1
    Join Date
    Nov 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Sucker Tree Vertical Menu

    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
    Code:
    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.

    Code:
    /* 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.
    Last edited by Perfect S.; 11-08-2006 at 11:19 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.

  3. #3
    Join Date
    Nov 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default heheh....

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

    Code:
    /* 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:
    Code:
    /* 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 =)

  4. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    /* 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.

  5. #5
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.

  6. #6
    Join Date
    Nov 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the help!

    I just noticed it was updated. =)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •