Wrong MouseOver area in Mozilla Firefox and Opera

Discussion in 'HTML' started by Stefan Mueller, Dec 26, 2009.

  1. The following code works in Internet Explorer perfect. If you move the
    mouse pointer over the red header area the header text gets
    highlighted.
    But in Mozilla Firefox and Opera the header text gets already
    highlighted before the mouse pointer is over the red header area (it
    needs to be only close to the red header area).

    =====================================

    <html>
    <head>
    <style type="text/css">
    th {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: #ff0000;
    }

    div.header_inside {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 100%;
    height: 100%;
    }

    div.header_outside {
    color: #000000;
    position: relative;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 100%;
    height: 100%;
    }

    div.header_outside_mouseover {
    color: #ffffff;
    position: relative;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 100%;
    height: 100%;
    }

    td {
    background-color: #0000ff;
    }
    </style>
    </head>

    <body>
    <table width = "150px">
    <thead>
    <tr>
    <th>
    <div class = "header_outside"
    onMouseover = "className = 'header_outside_mouseover'"
    onMouseout = "className = 'header_outside'">
    Column 1
    <div class = "header_inside"></div>
    </div>
    </th>
    </tr>
    </thead>

    <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    </tbody>
    </table>
    </body>
    </html>

    =====================================

    I tried to modify the following lines
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 4px;
    padding-bottom: 4px;
    to
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;

    Then it works also in Mozilla Firefox and Opera but my header doesn't
    have the same formatting anymore.
    Stefan Mueller, Dec 26, 2009
    #1
    1. Advertising

  2. Stefan Mueller

    Doug Miller Guest

    In article <>, Stefan Mueller <> wrote:
    >The following code works in Internet Explorer perfect. If you move the
    >mouse pointer over the red header area the header text gets
    >highlighted.
    >But in Mozilla Firefox and Opera the header text gets already
    >highlighted before the mouse pointer is over the red header area (it
    >needs to be only close to the red header area).


    Develop for Firefox and Opera first, then modify as necessary to make it work
    in IE. In this case, ISTM that the problem is caused by IE's incorrect box
    model. It's easy enough to fix; change your padding and margin styles as
    needed to make it work properly in FF, and then use conditional comments to
    modify those styles for IE.
    Doug Miller, Dec 26, 2009
    #2
    1. Advertising

  3. > Doug Miller wrote:
    > Develop for Firefox and Opera first, then modify as necessary to make it work
    > in IE. In this case, ISTM that the problem is caused by IE's incorrect box
    > model. It's easy enough to fix; change your padding and margin styles as
    > needed to make it work properly in FF, and then use conditional comments to
    > modify those styles for IE.


    Ok, good to know.
    But if I really have to set
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    then I'm not able to format the table like in the example above.

    Stefan
    Stefan Mueller, Dec 26, 2009
    #3
  4. Stefan Mueller

    Doug Miller Guest

    In article <>, Stefan Mueller <> wrote:
    >The following code works in Internet Explorer perfect. If you move the
    >mouse pointer over the red header area the header text gets
    >highlighted.
    >But in Mozilla Firefox and Opera the header text gets already
    >highlighted before the mouse pointer is over the red header area (it
    >needs to be only close to the red header area).
    >
    >=====================================
    >
    ><html>
    > <head>
    > <style type="text/css">
    > th {
    > padding-left: 0px;
    > padding-right: 0px;
    > padding-top: 0px;
    > padding-bottom: 0px;
    > background-color: #ff0000;
    > }
    >
    > div.header_inside {
    > position: absolute;


    Why?

    > left: 0px;
    > right: 0px;
    > top: 0px;
    > bottom: 0px;
    > padding-left: 7px;
    > padding-right: 7px;
    > padding-top: 4px;
    > padding-bottom: 4px;
    > width: 100%;
    > height: 100%;
    > }
    >
    > div.header_outside {
    > color: #000000;
    > position: relative;


    Why?

    > left: 0px;
    > right: 0px;
    > top: 0px;
    > bottom: 0px;
    > padding-left: 7px;
    > padding-right: 7px;
    > padding-top: 4px;
    > padding-bottom: 4px;
    > width: 100%;
    > height: 100%;
    > }
    >
    > div.header_outside_mouseover {
    > color: #ffffff;
    > position: relative;


    Why?

    > left: 0px;
    > right: 0px;
    > top: 0px;
    > bottom: 0px;
    > padding-left: 7px;
    > padding-right: 7px;
    > padding-top: 4px;
    > padding-bottom: 4px;
    > width: 100%;
    > height: 100%;
    > }
    >
    > td {
    > background-color: #0000ff;
    > }
    > </style>

    [snip]
    >


    Replace your style sheet with the following:

    <style type="text/css">
    th {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: #ff0000;
    }

    div.header_outside {
    color: #000000;
    padding-top: 4px;
    padding-bottom: 4px;
    }

    div.header_outside_mouseover {
    color: #ffffff;
    padding-top: 4px;
    padding-bottom: 4px;
    }

    td {
    background-color: #0000ff;
    }
    </style>
    Doug Miller, Dec 27, 2009
    #4
  5. On Dec 27, 2:21 am, (Doug Miller) wrote:
    > Replace your style sheet with the following:
    >
    >     <style type="text/css">
    >       th {
    >         padding-left:     0px;
    >         padding-right:    0px;
    >         padding-top:      0px;
    >         padding-bottom:   0px;
    >         background-color: #ff0000;
    >       }
    >
    >       div.header_outside {
    >         color:            #000000;
    >         padding-top:      4px;
    >         padding-bottom:   4px;
    >       }
    >
    >       div.header_outside_mouseover {
    >         color:            #ffffff;
    >         padding-top:      4px;
    >         padding-bottom:   4px;
    >       }
    >
    >       td {
    >         background-color: #0000ff;
    >       }
    >     </style>-


    With your style sheet it's not the same anymore. I'm able to select
    the text in the header (e.g. with a double click) in IE and FF.
    With which browser have you tested your style sheet?
    Stefan Mueller, Dec 27, 2009
    #5
  6. Stefan Mueller

    Doug Miller Guest

    In article <>, Stefan Mueller <> wrote:

    >With your style sheet it's not the same anymore. I'm able to select
    >the text in the header (e.g. with a double click) in IE and FF.


    I'm able to select it with your style sheet too, just not with a double-click.
    Try clicking outside the red box and dragging the mouse pointer across the
    text.

    >With which browser have you tested your style sheet?


    FF.

    I didn't intend that to be the final form; you'll need to do some tweaking, of
    course -- but I got rid of the stuff that was causing your mouseover problems.
    Why did you have absolute and relative positioning on those divs? What was
    that supposed to accomplish?
    Doug Miller, Dec 27, 2009
    #6
  7. On Dec 27 2009, 3:36 am, (Doug Miller) wrote:

    > I'm able to select it with your style sheet too, just not with a double-click.
    > Try clicking outside the red box and dragging the mouse pointer across the
    > text.


    You're absolutely right. You're able to select it even with my style
    sheet but not with a double click. That's exactly how it should be.
    I'm programming a function which allows a user to sort a html table by
    clicking on its column headers. The annoying feature in this case is
    that if you click quite fast on a column header to sort the table
    ascending and then descending the text gets selected. With my style
    sheet I can avoid this. That's also the reason why I have absolute and
    relative positionings on the DIVs. In IE it works fine but like
    mentioned in this post - what is the cause for this post - in Mozilla
    Firefox and Opera the header text gets already highlighted before the
    mouse pointer is over the red header area.

    If someone has an idea how to do it without absolute and relative
    positionings please let me know. However I think I do need absolute
    and relative positionings to achieve this and therefore I need to
    solve the problem that in Mozilla Firefox and Opera the header text
    gets already highlighted before the mouse pointer is over the red
    header area.

    Stefan
    Stefan Mueller, Jan 7, 2010
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. zorhel
    Replies:
    0
    Views:
    322
    zorhel
    Aug 24, 2004
  2. Bob
    Replies:
    24
    Views:
    1,529
  3. zorhel
    Replies:
    0
    Views:
    117
    zorhel
    Aug 24, 2004
  4. zorhel
    Replies:
    0
    Views:
    119
    zorhel
    Aug 24, 2004
  5. Replies:
    2
    Views:
    178
    Danny
    Jan 8, 2006
Loading...

Share This Page