Bug in your Glossy Acordion Menu

[skygamer]

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.

[skygamer]

i found a solution myself.

in style change this

.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

.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

<!--[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

[jscheuer1]

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:

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

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