Re: Re: Javascript + CSS + IE

Hey John (and others),

I have fixed the issue, thanks to the input here! It ended up being tied
to 'hasLayout' as suggested by Martin (thank you!). Based on what he said
I found this page:
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp.
By adding "display: inline-block" to the widget class, the issue was
resolved.

I have updated the example page to reflect this - see the upper right
corner for a link to toggle between broken and fixed:
http://griffisweb.com/resize/

John, thank you for explaining selectstart a bit more for me! I do
actually handle that using stop event in my application, though not
specifically using selectstart...

The sample page I posted for you all is a very simplified version with
most of the functionality cut out. For instance, the sidebar doesn't open
(and is empty in the sample), you can't switch between tabs, add tabs,
cols, etc. Or, as you found out, drag the widget around the page. All that
functionality works in the real application, I just wanted to the example
to display the problem without all the extra stuff!

Anyhow, thanks again to everyone.

If anyone wants to take iedebugger.js and improve on it, I would love to
get a copy of your improvements. I put that together quickly as it was
frustrating debugging things in IE that worked in FF... In case you didn't
realize it, that is used when you click on "Show Debug Console (IE Only)"
in the upper right corner...

Adam

> Hey Adam,
>
> You wrote:
>> Could you explain a bit more about selectstart? I have never used that
> in
>> an event handler so I'm a bit confused about what it's supposed to do.
> I'm
>> not even sure what the default selection behavior is that you're
> talking
>> about! Please forgive my ignorance.
> I tried to drag the element with the widgetHandle class, which also has
> the 'move' cursor set in the style attribute.  If you try to drag it, IE
> starts selecting text (which is not what you intend, I imagine).  It may
> simply be that you have not added the code to allow it to move, yet.
>
> If you are using a third-party component, they will have probably
> handled IE's default select behavior.  If not, then (assuming you are
> not capturing the 'selectstart' event for any other purpose) you may do
> the following to stop IE from selecting text when you really want to
> drag an object.  Put one of these lines inside the 'mousedown' event on
> the element to act as the drag handle:
>
> // preferred method when using prototype
> Event.observe(document, 'selectstart', myFuncToStopSelection);
>
> // old way, but works well in this situation
> document.onselectstart = myFuncToStopSelection;
>
> To re-enable select behavior after dragging, do the corresponding one of
> these in the 'mouseup' event of the element to act as the drag handle:
>
> // preferred method when using prototype
> Event.stopObserving(document, 'selectstart', myFuncToStopSelection);
>
> // old way, but works well in this situation
> document.onselectstart = null;
>
> The myFuncToStopSelection function could be something like one of these:
>
> // preferred method when using prototype
> function myFuncToStopSelection (event) {
>      Event.stop(event || window.event);
> }
>
> // old way, but works well in this situation
> function myFuncToStopSelection (event) {
>      return false;
> }
>
> I hope this helps.
>
> -- John