Re: Javascript + CSS + IE

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

http://e-numera.com/
http://ajax-web2.com/

--- In [email protected], "Adam Griffis" <adam.griffis@...> wrote:
>
> Thank you John and Ryan for your responses. I am playing around with
some
> of the things you suggested, and I will let you know how it turns out.
> Some comments right now:
>
> Ryan: I have played with the position: relative thing in the past,
knowing
> that it causes many issues *not* having it (in IE). In the past it
made no
> difference - maybe I just didn't go up enough levels with it. I will
> continue to look into it.
>
> For now I have changed the doctype from HTML 4.01 to XHTML 1.0. It did
> indeed solve the problem of the scrollbar jumping in and out - but it
> caused a bunch of other ones in the process. I'm trying to rework the
page
> so that 1) I can elimnate the table layout (XHTML doesn't like height
/
> width stuff on tables), and 2) I can fix the problems that appeared by
> changing the doctype.
>
> John: The XHTML namespace in the HTML tag - I'm not completely sure
where
> that came from. I wasn't really intending for it to force the page
into
> strict mode. Thanks for the input that it may be worse in strict mode
- I
> will continue looking into this.
>
> 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.
>
> Thanks again guys - I'll let you know if I make any progress, and as
> always, I would appreciate any more input anyone may have!
>
> Adam
>
> > Hey Adam,
> >
> > Ryan may be right about the relative positioning.  I don't know
> > exactly why, but it seems that IE more correctly honors its box
model
> > when it is using relative or absolute positioning.  This trick has
> > worked for me several times in the past for similar misbehaving with
> > both IE6 and IE7.
> >
> > Make sure that all of the parent nodes are also in one of these
> > positioning settings, too.  Well, try the direct parent first.  I
> > can't remember if I needed to go beyond that.
> >
> > If I remember correctly, though, this problem is worse when using
one
> > of the strict modes.  I see an XHTML namespace in the HTML tag, but
I
> > am not sure if this is enough to trigger IE to enter "Standards
Mode".
> >
> > Don't get me wrong on this: standards mode is the way to go for
> > cross-browser development.  It at least gets rid of many quirks you
> > would otherwise have to handle.  This just happens to be one of the
> > few unfortunate side-effects from putting IE in strict mode.
> >
> > Also, to get rid of IE's default selection behavior when dragging
the
> > widgetHandle element, be sure to have the document's "selectstart"
> > event return false (well, "onselectstart" in IE).
> >
> > Regards,
> >
> > -- John
> >
> > http://e-numera.com/
> > http://ajax-web2.com/
> >
> >
> > --- In [email protected], "Ryan Hicks" ryan.c.hicks@ wrote:
> >>
> >> I've only just looked at your sample, but I have two thoughts based
> > on your
> >> description:
> >>
> >>
> >>
> >> 1) The box model for IE and Gecko are significantly different.  If
> > you put
> >> IE into standards-compliant mode, it will behave a bit better.  Try
> > putting
> >> a doctype like: "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
> >> Transitional//EN"
> >> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" or
> > similar at
> >> the beginning of your document.  If that fails to address the
> > problem, then
> >> it still may be an issue with the box model, in which case all you
> > can do is
> >> monkey with the CSS until you find something that works.
> >>
> >>
> >>
> >> 2) Try putting position: relative on some of the elements.  If your
> > design
> >> allows for that to be okay, it may help IE's rendering engine know
> > what to
> >> do with the elements.
> >>
> >>
> >>
> >> -ryan
> >>
> >>
> >>
> >>   _____
> >>
> >> From: [email protected] [mailto:[email protected]] On
> > Behalf Of
> >> Adam Griffis
> >> Sent: Monday, November 13, 2006 4:29 AM
> >> To: [email protected]
> >> Subject: [wdf-dom] Javascript + CSS + IE
> >>
> >>
> >>
> >> Hello All,
> >>
> >> I have run into a JS / CSS layout issue in IE, and I can't for the
> > life of
> >> me figure out what's going on. Basically, I have one DIV that is
> > expanding
> >> beyond the bounds of the containing DIV, and I've literally spent
hours
> >> trying to find the problem. It appears to be somehow tied to the
> >> scrollbars, but again, I'm not sure.
> >>
> >> The container is resizable height-wise by grabbing the bottom of
the
> >> container, and the left and right columns within the container are
> >> resizable by grabbing the divider between them. If you play around
with
> >> resizing it in various ways, the problem described above will come
> > and go.
> >>
> >> I have pulled a portion of the site and simplified it to show only
the
> >> problem, as I knew there would be no way to describe it...
> >>
> >> http://www.griffisw <http://www.griffisweb.com/resize>
eb.com/resize
> >>
> >> Of course, it works just fine in Firefox. I was hoping the problem
would
> >> disappear with IE7, but no such luck.
> >>
> >> ANY help would be greatly appreciated, and I figure this is one of
the
> >> better places to ask.
> >>
> >> Thanks, everyone!
> >> Adam Griffis
> >>
> >>
> >>
> >>
> >>
> >> [Non-text portions of this message have been removed]
> >>
> >
> >
> >
> >
>



[Non-text portions of this message have been removed]