Wrong MouseOver area in Mozilla Firefox and Opera

S

Stefan Mueller

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.
 
D

Doug Miller

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).
Click to expand...

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.
 
S

Stefan Mueller

Doug said:
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.
Click to expand...

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
 
D

Doug Miller

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]
Click to expand...

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>
 
S

Stefan Mueller

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>-
Click to expand...

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?
 
D

Doug Miller

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.
Click to expand...

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?
Click to expand...

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?
 
S

Stefan Mueller

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.
Click to expand...

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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

SendGrid email issue in responsive Gmail 1
Help with Visual Lightbox: Scripts 2
Interfering CSS 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Help with my responsive home page 2
Dropdown menu in a fixed navbar 2
Aligned to the left 3
Wrong Coding 3

Members online

No members online now.
Total: 33 (members: 0, guests: 33)
Robots: 213

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,042
Latest member
icassiem

Latest Threads

Top