|
Wrong MouseOver area in Mozilla Firefox and Opera
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. |
Re: Wrong MouseOver area in Mozilla Firefox and Opera
In article <55611bbc-b622-4fcb-934c-ee70d8647231@a21g2000yqc.googlegroups.com>, Stefan Mueller <seekware@yahoo.com> 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. |
Re: Wrong MouseOver area in Mozilla Firefox and Opera
> 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 |
Re: Wrong MouseOver area in Mozilla Firefox and Opera
In article <55611bbc-b622-4fcb-934c-ee70d8647231@a21g2000yqc.googlegroups.com>, Stefan Mueller <seekware@yahoo.com> 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> |
Re: Wrong MouseOver area in Mozilla Firefox and Opera
On Dec 27, 2:21*am, spamb...@milmac.com (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? |
Re: Wrong MouseOver area in Mozilla Firefox and Opera
In article <6ed0d17e-8969-4ea3-9e2e-364acfdd8c2f@p8g2000yqb.googlegroups.com>, Stefan Mueller <seekware@yahoo.com> 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? |
Re: Wrong MouseOver area in Mozilla Firefox and Opera
On Dec 27 2009, 3:36*am, spamb...@milmac.com (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 |
| All times are GMT. The time now is 06:44 PM. |
Powered by vBulletin®. Copyright ©2000 - 2013, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.