Results 1 to 5 of 5

Thread: AnyLink CSS Menu v2.2 IE y-pos

  1. #1
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default AnyLink CSS Menu v2.2 IE y-pos

    1) Script Title: AnyLink CSS Menu v2.2

    2) Script URL (on DD): Link

    3) Describe problem: My menu and the demo #3 on DD are both off by exactly +1 pixel on the y-axis when I view them in IE5-7. Could someone please help me with the JS code to reduce the y-pos by 1 pixel for IE?

    Thanks in advance.

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

    Default

    Is it just in IE5-7? What about IE8? Are the anchor links styled in some way that adds extra padding/margin to them?
    DD Admin

  3. #3
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    It works for IE8 and other recent browsers, but not for IE5-7. Other than that 1 pixel it's fine.

    Here's what it looks like (default settings):

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

    Default

    My hunch is the issue is due to something in the CSS used to create the demo vertical menu, and not an inherent positioning issue with the script itself. I'm on IE8 on this computer, so can't readily test this out, but I'd start by changing some of the padding/margin values in the demo menu's CSS:
    Code:
    <style type="text/css">
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    .urbangreymenu{
    width: 170px; /*width of menu*/
    }
    
    .urbangreymenu .headerbar{
    font: bold 13px Verdana;
    color: white;
    background: #606060;
    margin-bottom: 0; /*bottom spacing between header and rest of content*/
    text-transform: uppercase;
    text-indent: 10px;
    padding: 7px 0 7px 0; /*31px is left indentation of header text*/
    }
    
    .urbangreymenu ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
    }
    
    .urbangreymenu ul li{
    padding-bottom: 2px; /*bottom spacing between menu items*/
    }
    
    .urbangreymenu ul li a{
    font: normal 12px Arial;
    color: black;
    position: relative;
    background: #E9E9E9;
    display: block;
    padding: 5px 0;
    line-height: 17px;
    padding-left: 8px; /*link text is indented 8px*/
    text-decoration: none;
    }
    
    .urbangreymenu ul li a:visited{
    color: black;
    }
    
    .urbangreymenu ul li a:hover, .urbangreymenu ul li a.selectedanchor{ /*hover state CSS*/
    color: white;
    background: black;
    }
    
    
    </style>
    DD Admin

  5. #5
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for your efforts, but it didn't solve the problem. However, I think that it's a css related issue too.

    //As a temporary solution I added a top margin of 1px to the anylinkcss class for up to IE7. Is there a chance of getting it to work without browser specific hacks?
    Last edited by jkk; 01-30-2010 at 12:09 AM.

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
  •