Onmouseover and IE6

Discussion in 'Javascript' started by Thomas Jansen, Nov 24, 2004.

  1. Hi,

    I have trouble with <DIV> tags and IE6. I use several <DIV> tags in a
    table to create a menu (see code below) The first cell works like
    expected, when the mouse enters the box the background color is
    changed. In cell 2-4 however, this only happens when I move the mouse
    over the text!. Firefox seems to handle the code correctly. Can the
    code be changed to work in both IE as FF?

    Thanks in advance,

    Thomas

    ___ Code ___

    <html>
    <head>

    <style type="text/css">
    div
    {
    border-style: solid;
    border-width: 1px
    }
    </style>

    </head>

    <body>
    <table width=100%>
    <tr>
    <td>
    <div onmouseover="style.background='steelblue'"
    onmouseout="style.background='white'">111</div>
    </td>
    <td>
    <div onmouseover="style.background='steelblue'"
    onmouseout="style.background='white'">111</div>
    </td>
    <td>
    <div onmouseover="style.background='steelblue'"
    onmouseout="style.background='white'">111</div>
    </td>
    <td>
    <div onmouseover="style.background='steelblue'"
    onmouseout="style.background='white'">111</div>
    </td>
    </tr>
    </table>
    </body>
    </html>
     
    Thomas Jansen, Nov 24, 2004
    #1
    1. Advertising

  2. Thomas Jansen

    Guest

    So Thomas you're just about there there's just a snitch of code that
    can get you what you are looking for. add the following code to each
    <DIV> tag:

    style="width:100%;"

    so your first div tag should look like:
    <div style="width:100%;"
    onmouseover="this.style.background='steelblue';"
    onmouseout="this.style.background='white';">111</div>

    the problem was that the div was only occupying the space in the column
    that the text needed. So with the width command you can set this to
    always be the entire width of the column. blah .. blah . . . blah . .
    ..
    I hope this helps

    -terriblecow
     
    , Nov 24, 2004
    #2
    1. Advertising

  3. Thomas Jansen

    Thomas Guest

    Thanks, this seems to work. A bit strange though that the borders were
    correct ... Well I guess is it just one of those IE features :)

    Thomas


    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
     
    Thomas, Nov 24, 2004
    #3
  4. Thomas Jansen

    SimonFx Guest

    Thomas Jansen wrote:
    > I have trouble with <DIV> tags and IE6. I use several <DIV> tags in a
    > table to create a menu (see code below) The first cell works like
    > expected, when the mouse enters the box the background color is
    > changed. In cell 2-4 however, this only happens when I move the mouse
    > over the text!. Firefox seems to handle the code correctly. Can the
    > code be changed to work in both IE as FF?


    This isn't a specific answer and I may be showing you something you
    can't use, but I found it really interesting, you make the same effect
    with only styles!

    http://www.alistapart.com/articles/taminglists/

    Tested with IE / Mozilla / Firebird / Opera / Safari. Look ma! No
    JavaScript:

    ---

    <html>
    <head>

    <style type="text/css">
    #TAB3 {
    position: relative;
    font: bold 12px Verdana, Helvetica, Arial, sans-serif;
    height: 14px;
    margin: 0px;
    padding: 1px;
    text-align: left; }
    #TAB3 a {
    border-style: solid;
    border-width: 1px;
    color: #000000;
    background: #ffffff;
    margin: 0px 5px;
    padding: 0px 5px;
    text-decoration: none; }
    #TAB3 a:hover {
    background: #339977; }
    #TAB3 li {
    display: inline; }
    </style>

    </head>
    <body>

    <UL ID=TAB3>
    <LI><a href="">111</a></LI>
    <LI><a href="">222</a></LI>
    <LI><a href="">333</a></LI>
    </UL>

    </body>
    </html>
     
    SimonFx, Nov 24, 2004
    #4
  5. On Wed, 24 Nov 2004 13:17:55 +0000, SimonFx <>
    wrote:

    [snip]

    > This isn't a specific answer and I may be showing you something you
    > can't use, but I found it really interesting, you make the same effect
    > with only styles!


    With browsers that implement CSS properly, you can apply that effect to
    any element. However, IE only implements the :hover pseudo-class on A
    elements, something I think ALA neglect to mention.

    [snip]

    > #TAB3 {
    > position: relative;
    > font: bold 12px Verdana, Helvetica, Arial, sans-serif;


    Font sizes should be specified relative to the default font size,
    preferably using percentages with body text at 100%. They should not be
    fixed.

    > height: 14px;


    Again, fixed sizes should be avoided. What if someone overrides the font
    setting so they can see the text better? The text will be clipped inside
    the box. Use em units, where 1em is the height of the text.

    height: 1.2em;

    > margin: 0px;


    margin: 0;

    would do as zero in any unit is zero. This is the only occasion where a
    length may have its unit omitted.

    [snip]

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Nov 24, 2004
    #5
  6. Thomas Jansen

    Rob B Guest

    Similarly:

    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <style type="text/css">

    body {
    font-size: 100%;
    margin: 0;
    }
    table {
    margin: 0 auto;
    border-collapse: collapse;
    }
    td {
    margin: 0;
    padding: 0;
    }
    td a.roll:link,
    td a.roll:visited,
    td a.roll:active {
    display: block;
    width: 140px;
    height: 100%;
    font: bolder 80% tahoma;
    color: #4682b4;
    text-decoration: none;
    text-align: center;
    border: 1px #000 solid;
    background: #fff;
    }
    td a.roll:hover {
    color: #fff;
    background: #4682b4;
    }

    </style>
    </head>
    <body>
    <table>
    <tbody>
    <tr>
    <td><a class="roll" href="#">selection 1</a></td>
    <td><a class="roll" href="#">selection 2</a></td>
    <td><a class="roll" href="#">selection 3</a></td>
    <td><a class="roll" href="#">selection 4</a></td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>

    More: http://css.maxdesign.com.au/listamatic/index.htm

    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
     
    Rob B, Nov 24, 2004
    #6
  7. Thomas Jansen

    SimonFx Guest

    Michael Winter wrote:
    > With browsers that implement CSS properly, you can apply that effect to
    > any element. However, IE only implements the :hover pseudo-class on A
    > elements, something I think ALA neglect to mention.


    Thanks for you tips again. I was finding it brutal with the various
    browsers giving different results with em settings, when I used px then
    all results seemed to settle down. I guess I will have to work a little
    harder with em I think.

    The a:hover works fine in all the browsers I had access to (downstairs)
    = IE / Mozilla / Firebird / Opera / Safari. Oh! I see, :hover only works
    on "A" elements in IE, but other browsers allow it only more than that.
    Gotcha.

    Again, Michael, thanks for the tips.

    ---

    <html>
    <head>

    <style type="text/css">
    #TAB3 {
    position: relative;
    font: bold 1em Verdana, Helvetica, Arial, sans-serif;
    height: 1.2em;
    margin: 0;
    padding: 1px;
    text-align: left; }
    #TAB3 a {
    border-style: solid;
    border-width: 1px;
    color: #000000;
    background: #ffffff;
    margin: 0px 5px;
    padding: 0px 5px;
    text-decoration: none; }
    #TAB3 a:hover {
    background: #339977; }
    #TAB3 li {
    display: inline; }
    </style>

    </head>
    <body>

    <UL ID=TAB3>
    <LI><a href="">111</a></LI>
    <LI><a href="">222</a></LI>
    <LI><a href="">333</a></LI>
    </UL>

    </body>
    </html>
     
    SimonFx, Nov 24, 2004
    #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. Ivor O'Connor
    Replies:
    4
    Views:
    851
    Isofarro
    Nov 25, 2003
  2. Peter Mount
    Replies:
    4
    Views:
    957
    Peter Mount
    Jan 31, 2006
  3. Jeroni Paul

    onmouseover/out: bug in IE6 ?

    Jeroni Paul, Sep 9, 2003, in forum: Javascript
    Replies:
    0
    Views:
    94
    Jeroni Paul
    Sep 9, 2003
  4. Pugi!
    Replies:
    0
    Views:
    240
    Pugi!
    Feb 5, 2007
  5. timothytoe
    Replies:
    4
    Views:
    157
Loading...

Share This Page