simple toggle with css & jQuery giving jerk in IE

[neovantage]

Hey all,
I have integrated a simple toggle with css and jQuery in website but it gicving jerk in IE when it hide the content.

Here is the URL of the website.

And it is integrated in Right Link Menu in Body section. By default it show the Link Menu but when we click on the LINK it hide the content but after hiding it gives jerk in IE. Can comebody help me out to sort the problem. I will be very thankful to him/her.


kind regards,

[larztheloser]

Just so you know, my IE won't do your top menu either!

I'm probably going to be shot down for saying this but this would be my solution:
1) Test whether or not the user is using IE (test for document.all or something!)
2) If the user is using IE, disable the minimization animation and just make it disappear

OR

2) If the user is using IE, create a timeout whenever said animation is activated. After a few milliseconds, end the animation.

None of these options is idyllic, however. Sorry, this is about as much as I can think of!

[neovantage]

But the same script working fine in IE from where i got.
here is the link

[RamananKalirajan]

Hi, I checked in IE its look to be working good. What is the version of IE you are using? I viewed it in IE6. But header menu seems to be misaligned. For that Jerk problem. Just check for this two things

1) Just check for the Div or table width associated with the Toggle Element. If the width gets increased or decreased if we hide that element. The Jerk effect will come.
2) Check the Doc type you have used. If you are not sure about the doc type give "transitional" or "loose" and check it out.

Thanks and Regards
Ramanan Kalirajan

[larztheloser]

I'm using Internet Explorer v8. Oh and by the way, the script works away from the site, but not on themosaicdesigns.com.

[neovantage]

Thanks RamananKalirajan for feedback and fixing issue.

1. So far cocern as dropdown menu, It works in IE8 and but it is not working in IE6. i dont know as i also posted that problem too in CSS section but havent find any solution yet. if you can help me out to sort out this problem too then i will be very thankful to you.

2. Yes Thanks jerk is fix now in IE too. Reason behind My table width was 249 and div width was 250. But i made the width same and it is working perfectly fine.

[larztheloser]

Ah yes it does seem to work now.

[neovantage]

But can some one help me out to sort the dropdown meun too in IE6...?

I wil ber very grateful to him/her

[RamananKalirajan]

Hi,
For the Class in CSS "#nav li.top", or all the <li> in the header has the display "block". Please change it to "inline". Hope it will fix the issue.

Thanks and Regards
Ramanan Kalirajan

[neovantage]

Yeh Thanks it fixed now but i can not manage the indentation of text.
I mean when i a drop down menu is open. there come links
1. Menu
2. Photos | Plugins
...................etc
They are indent 15 pixels from left in IE by using property text-indent:15px but this property is not working in Firefox Mozilla. Is there any other way or there is a problem in syntaxt. Here is my new updated CSS

.preload1 {background: url(../images/img-04.png);}
.preload2 {background: url(../images/img-04.png);}
#nav {padding:0; margin:0; list-style:none; height:53px; background:url(../images/img-03.png) repeat-x; position:relative; z-index:500; font-family:arial; }
#nav li.top {display:inline; float:left; width:100px; height:53px; text-align:center;}
#nav li a.top_link {display:inline; width:100px; height:50px; line-height:48px; color:#00FFF6; text-decoration:none; font-size:12px; font-weight:normal; padding:0px; cursor:pointer; text-align:center;}
#nav li a.top_link span {float:left; display:inline; width:100px; padding:0 0px 0 0px; height:50px; text-align:center;}
#nav li a.top_link span.down {float:left; display:inline; width:100px; padding:0 0px 0 0px; height:50px; text-align:center;}
 
#nav li:hover a.top_link {width:100px; color:#fff; background: url(../images/img-04.png) no-repeat center top; text-align:center;}
#nav li:hover a.top_link span {width:100px; background:url(../images/img-04.png) no-repeat center top; text-align:center;}
#nav li:hover a.top_link span.down {width:100px; background:url(../images/img-04.png) no-repeat center top; text-align:center;}
 
/* Default list styling */
 
#nav li:hover {position:relative; z-index:200;}
 
#nav li:hover ul.sub{left:1px; top:51px; background: #030606; padding:0px; border:0px solid #FF0000; white-space:nowrap; width:180px; height:auto; z-index:300; text-align:left;}
#nav li:hover ul.sub li{display:inline; height:30px; position:relative; float:left; width:180px; font-weight:normal; text-align:left;}
#nav li:hover ul.sub li a{display:inline; font-size:12px; height:26px; width:178px; line-height:26px; text-align:left; text-indent:15px; color:#00FFF6; text-decoration:none;border-bottom:1px dashed #026A67;}
#nav li ul.sub li a.fly{ background:url(../images/arrow.gif) 150px 6px no-repeat;}
#nav li:hover ul.sub li a:hover {color:#fff; border-color:#fff; text-align:left;}
#nav li:hover ul.sub li a.fly:hover{background:url(../images/arrow_over.gif) 150px 6px no-repeat; color:#fff; text-align:left;}
 
 
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:153px; top:-4px; background: #030606; padding:3px; border:0px solid #FF0000; white-space:nowrap; width:150px; z-index:400; height:auto;}
 
#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
 
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#121313 url(arrow_over.gif) 140px 6px no-repeat; color:#fff; border-color:#fff;} 
 
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#030606 url(arrow.gif) 140px 6px no-repeat; color:#00FFF6; border-color:#000;}
 

Hope you will help me out to sort out this bug too

[RamananKalirajan]

Hi Neovantage,
For that particular class... instead of this "text-indent:15px" use "margin-left:15px". Hope this will solve your problem.

Thanks and Regards
Ramanan Kalirajan

[neovantage]

Greattttttttttt...........
Thanks a lot . It works. Awsome . Thanks again.

[RamananKalirajan]

Do you know why margin-left works.. where text-indent is not working. Text-indent is used to indent the text in a <p> or <div> or <span>. It will not be working in all the browser as same as expected. But margin-left will work in all the browser. Keep Moving Forward....


Thanks and Regards
Ramanan Kalirajan

[neovantage]

Thanks again for giving me the helpful knowledge. It's really appriciated.