Re: [WSG] IE issues: display none vs absolute position for show/hide effect

2011-06-17 Thread tee 
David,

Thanks! 

On Jun 16, 2011, at 9:47 AM, David Hucklesby wrote:
 
 But that's the reason it shows up momentarily on slow connections. I
 suspect it only shows in IE due to longer latency in those old browsers
 - JavaScript takes a whole bunch longer to kick in.

 
 Using jQuery hide comes too late in those browsers. Which is precisely
 the problem that the solution I offered is designed to address.
 

Well, I didn't know this because the is the first time I face this issue and 
yet i have used 'hide' very often. So I didn't really understand why you 
suggested to use extra JS in the head section and use display none (something I 
really wanted to avoid) until you explained it .


 Some folks sure are stubborn! ;)
 


Stubborn is a must quality you need to survive in the dog eats dog jungle if 
you haven't already knew that :-)



 -- 
 Cordially,
 David


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

RE: [WSG] IE issues: display none vs absolute position for show/hide effect

2011-06-16 Thread Thierry Koblentz 
Hi Tee,

 #mini-cart {position:absolute; width:300px; overflow: hidden}

I didn't follow the whole thread, but seeing the above I have a suggestion:
Try an explicit left value (i.e. left:0;) as IE is known to need that in
many cases.

--
Regards,
Thierry
@thierrykoblentz
www.tjkdesign.com | www.ez-css.org | www.css-101.org 






***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] IE issues: display none vs absolute position for show/hide effect

2011-06-16 Thread David Hucklesby 

On 6/15/11 10:24 PM, tee wrote:

Repost, change subject line.

David and Jon,

I am not trying to hide the texts from desktop screen and has screen
reader able to read it - I want the content be available at all time
for search engines, browsers, CSS enabled/disabled and JS
enabled/disabled.

I am simply using a simple show/hide script to achieve a visual
effect - a show/hide effect like this:
http://www.learningjquery.com/2006/09/slicker-show-and-hide


[...]


But IE appears to have issue when no display:none is used.


jQuery('#mini-cart').hide(); jQuery('#mini-cart-a').click(function()
{ jQuery('#mini-cart').toggle(400); return false; });




But that's the reason it shows up momentarily on slow connections. I
suspect it only shows in IE due to longer latency in those old browsers
- JavaScript takes a whole bunch longer to kick in.

Using jQuery hide comes too late in those browsers. Which is precisely
the problem that the solution I offered is designed to address.

Some folks sure are stubborn! ;)
--
Cordially,
David


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

[WSG] IE issues: display none vs absolute position for show/hide effect

2011-06-15 Thread tee 
Repost, change subject line.

David and Jon,

I am not trying to hide the texts from desktop screen and has screen reader 
able to read it - I want the content be available at all time for search 
engines, browsers, CSS enabled/disabled and JS enabled/disabled. 

I am simply using a simple show/hide script to achieve a visual effect - a 
show/hide effect like this:
http://www.learningjquery.com/2006/09/slicker-show-and-hide

The difference is, I use absolute position for hidden div so that when it gets 
clicked, the surrounding content, notably, the content below the content from 
the hidden div, does not get shifted like the above example show.

I need to move on from this issue so right now I'm forced to declare an inline 
display:none for the hidden #mini-cart ID, and this finally prevents the 
hidden layer show through behavior in IE browsers. Theorically, it's very 
unlikely this site will be used by Screen Reader's user or anyone using the 
site would disabled the CSS, so the display:none does the trick. But I am 
trying to take the accessibility into account, and the display:none will 
prevent screen reader from accessing content in the hidden div. 

But IE appears to have issue when no display:none is used. 


jQuery('#mini-cart').hide();
 jQuery('#mini-cart-a').click(function() {
   jQuery('#mini-cart').toggle(400);
  return false;
 });


#mini-cart {position:absolute; width:300px; overflow: hidden}

In advanced browsers and no problem. The dropdown at the left top somtimes 
does show through if the connection is very slow and the page takes more than 
10 seconds to load.

http://www.youtube.com/watch?v=Z11rqWBLLuc


In this movie taken from IE7, between 17 to 18 seconds you can see the hidden 
layers (choose your tea and tea bag (2) ) shown through while the page is still 
loading. 
http://www.youtube.com/watch?v=dI9QvAFKoSM
tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***