Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Wrong MouseOver area in Mozilla Firefox and Opera

Reply
Thread Tools

Wrong MouseOver area in Mozilla Firefox and Opera

 
 
Stefan Mueller
Guest
Posts: n/a
 
      12-26-2009
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.
 
Reply With Quote
 
 
 
 
Doug Miller
Guest
Posts: n/a
 
      12-26-2009
In article <(E-Mail Removed)>, Stefan Mueller <(E-Mail Removed)> 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.
 
Reply With Quote
 
 
 
 
Stefan Mueller
Guest
Posts: n/a
 
      12-26-2009
> 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
 
Reply With Quote
 
Doug Miller
Guest
Posts: n/a
 
      12-27-2009
In article <(E-Mail Removed)>, Stefan Mueller <(E-Mail Removed)> 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>
 
Reply With Quote
 
Stefan Mueller
Guest
Posts: n/a
 
      12-27-2009
On Dec 27, 2:21*am, (E-Mail Removed) (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?
 
Reply With Quote
 
Doug Miller
Guest
Posts: n/a
 
      12-27-2009
In article <(E-Mail Removed)>, Stefan Mueller <(E-Mail Removed)> 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?
 
Reply With Quote
 
Stefan Mueller
Guest
Posts: n/a
 
      01-07-2010
On Dec 27 2009, 3:36*am, (E-Mail Removed) (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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Mozilla is better than firefox. Hail to Mozilla. Death to firefox. Radium Firefox 29 03-27-2007 02:51 AM
Mozilla Suite vs Firefox vs Opera 9 measekite Firefox 10 07-16-2006 05:49 PM
Comparisons of IE, Opera and Firefox on DOM (Javascript/CSS) support(Opera wins) Bob HTML 24 05-21-2006 05:31 PM
Change foreground/layer color on AREA mouseover?? spamforsteve@hotmail.com Javascript 2 01-08-2006 04:40 AM
Internet Explorer vs. Mozilla, Firefox, Opera security...what's thetruth ? steve h. Computer Support 4 07-03-2004 06:43 AM



Advertisments