Button renders fine in IE but with a very small active area inFirefox - Mozilla

This is a discussion on Button renders fine in IE but with a very small active area inFirefox - Mozilla ; Hi all [Firefox 3.5.1/Windows XP] I have a case of several buttons that work fine in IE but are displayed with a very narrow 'active area' in Firefox. With the 'active area' I am referring to the area where my ...

+ Reply to Thread
Results 1 to 3 of 3

Thread: Button renders fine in IE but with a very small active area inFirefox

  1. Button renders fine in IE but with a very small active area inFirefox

    Hi all

    [Firefox 3.5.1/Windows XP]

    I have a case of several buttons that work fine in IE but are
    displayed with a very narrow 'active area' in Firefox.

    With the 'active area' I am referring to the area where my mouse
    pointer changes from an arrow to a pointing index finger - in other
    words the area where this button becomes 'clickable'.

    Besides that this active area is very narrow it is also along the
    right edge of the actual button images. The buttons are displayed in
    its entirety.

    I have the Firebug developer tools installed and if I right-click on
    one of the buttons and select "Inspect Element", Firebug displays
    below code for it:

    title="Clear this and related fields" href="javascript:tpzDrillTable
    ('instance/problem.type', 'CONNECTIVITY ISSUE', '9012', 'listdetail')"
    buttonid="9012">
    title="Clear this and related fields" alt="Clear this and related
    fields" src="images/obj16/tclear.gif" widgettype="linklabel"
    onmouseout="if(top.is_ie)this.className='HoverImage'" onmouseover="if
    (top.is_ie)this.className='HoverImageHover'"/>


    Any tips on where to look for a solution for this would be
    appreciated.

    cheers

  2. Re: Button renders fine in IE but with a very small active area inFirefox

    On Aug 20, 3:10*am, S Claus wrote:
    > Hi all
    >
    > [Firefox 3.5.1/Windows XP]
    >
    > I have a case of several buttons that work fine in IE but are
    > displayed with a very narrow 'active area' in Firefox.
    >
    > With the 'active area' I am referring to the area where my mouse
    > pointer changes from an arrow to a pointing index finger - in other
    > words the area where this button becomes 'clickable'.
    >
    > Besides that this active area is very narrow it is also along the
    > right edge of the actual button images. The buttons are displayed in
    > its entirety.
    >
    > I have the Firebug developer tools installed and if I right-click on
    > one of the buttons and select "Inspect Element", Firebug displays
    > below code for it:
    >
    > > title="Clear this and related fields" href="javascript:tpzDrillTable
    > ('instance/problem.type', 'CONNECTIVITY ISSUE', '9012', 'listdetail')"
    > buttonid="9012">
    > > title="Clear this and related fields" alt="Clear this and related
    > fields" src="images/obj16/tclear.gif" widgettype="linklabel"
    > onmouseout="if(top.is_ie)this.className='HoverImage'" onmouseover="if
    > (top.is_ie)this.className='HoverImageHover'"/>
    >

    >
    > Any tips on where to look for a solution for this would be
    > appreciated.
    >
    > cheers


    This may be completely unrelated, but I ran into a similar issue and
    spent quite a bit of time trying to locate a solution. A lot of
    spaghetti code didn't help much, but I finally came up with this:

    The document type in the page I had problems with was declared as
    "strict" rather than "transitional". The button's active area for IE7
    and IE8 both seem to encompass most of the displayed button area.

    However, testing with FireFox and Chrome only showed a small area at
    the very left side of the button which was active.

    I need to explore this in more detail when time permits, but for now,
    it works for our supported browsers (it is an intranet page), so I'm
    going home.

    Good luck.

  3. Re: Button renders fine in IE but with a very small active area inFirefox

    Had exactly the same problem and struggled with it for a long time. Finally, I just used the process of elimination - started removing elements one at a time to figure out which one was causing the problem. Turned out it was related to some style elements for a div tag.

    When I removed "position:relative" for a couple of elements on my page, all of a sudden the clickable area for the button was the correct size on both FF and Chrome.

    Can't explain why this is the case, but thought I would post this in case it's helpful to anyone else.

+ Reply to Thread