Results 1 to 3 of 3

Thread: Bug in your Glossy Acordion Menu

  1. #1
    Join Date
    Aug 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Bug in your Glossy Acordion Menu

    Hello.. Sorry for my bad english.

    Yesterday i've tried this menu

    http://www.dynamicdrive.com/dynamici...enu-glossy.htm

    Firefox and IE has no bug but Chrome has a bug.

    Try to click "CSS EXAMPLES" (open and close this menu) continuously.

    You will see PLUS icon of CSS DRIVE menu is shifting down pixel by pixel when CSS EXAMPLES menu is each opening.

    This menu is very important for me.

    Can someone help me?

    Notice: Bug in happening when try with CHROME

    Best regards.
    Last edited by skygamer; 08-02-2013 at 06:37 AM.

  2. #2
    Join Date
    Aug 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    i found a solution myself.

    in style change this

    Code:
    .glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
    position: absolute;
    top: 5px;
    right: 5px;
    border: none;
    }
    with this one

    Code:
    .glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
    border: none;
    float:right;
    margin: 3px 5px; }
    After his change IE will give bug.

    and define new style for fix IE bug

    Code:
    <!--[if IE]>
    	<style>
    		.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
    			position: absolute;
    			top: 5px;
    			right: 5px;
    			border: none;
    		}
    	</style>
    <![endif]-->
    and go to hell
    Last edited by skygamer; 08-02-2013 at 07:53 AM.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    IE 10 and later will not use that conditional style, but might not have to, have you tested your fix in IE 10? Can you post a link to it?

    I just tested it myself. It fixes the problem and is OK in IE 10. But in all browsers the icons are lower they should be. So I ended up with:

    Code:
    .glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
    border-width: 0;
    float:right;
    margin: 1px 5px 0 0;
    }
    Which makes me wonder if your page has something different about it that makes your margin preferable. Does it? Could we have a link to it?

    Oh, and that added style for IE 9 and less needs to cancel the float and margin:

    Code:
    <!--[if IE]>
    	<style>
    		.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
    			position: absolute;
    			float: none;
    			margin: 0;
    			top: 5px;
    			right: 5px;
    			border-width: 0;
    		}
    	</style>
    <![endif]-->
    Something unrelated that I noticed is that the script calls for a loading2.gif that's not available for download on the demo page. The examples on that page don't use it, but the script creates an image with it as its src, so there's a get error in browsers that report that.
    Last edited by jscheuer1; 08-02-2013 at 07:51 PM. Reason: detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Replies: 1
    Last Post: 02-23-2011, 05:54 PM
  2. Replies: 0
    Last Post: 03-21-2009, 05:30 AM
  3. glossy accordion menu: how to highlight current menu item on target page?
    By gargiulo in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 02-18-2009, 01:31 PM
  4. Glossy Accordion Menu -Just want menu to start as expanded
    By Memet in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 12-06-2008, 06:35 PM
  5. Replies: 2
    Last Post: 11-13-2007, 08:15 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
  •