Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Registered User
    Join Date
    Jan 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with syles on IE

    I have a menu system, using table cells, and wanted the cells to change bgcolor on mouseover and also be clickable on mouseover.

    I have written the following which works on FF, but not IE! Is there something simple I'm missing?


    <td class="btnav" onmouseover="style.backgroundColor='#C7C7C7';this.style.cursor='pointer'"
    onmouseout="style.backgroundColor='#E0E0E0'" align="right";"onclick="document.location='index.html'">
    <a href="index.html" style="text-decoration:none;"><strong>home</strong></a>
    </td>

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    clickable on mouseover.
    ? How's that? You mean the cursor: pointer?

    Anyway:
    onmouseover="this.style.backgroundColor='#C7C7C7'.....

    onmouseout="this.style.backgroundColor='#E0E0E0'".......
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Registered User
    Join Date
    Jan 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Didn't make the problem clear did I :-)

    On FF, the correct onmouseout action occurs and the cell reverts back to it normal colour, on IE this doesn't happen, in changes colour (onmouseover), but then it stays like that.
    I made the small mod you suggested and that didn't clear it, any other ideas ?

  • #4
    Regular Coder
    Join Date
    Mar 2005
    Posts
    195
    Thanks
    0
    Thanked 0 Times in 0 Posts
    .runtimeStyle. for IE instead of .style perhaps
    Information is not knowledge,Knowledge is not wisdom,Wisdom is not truth,Truth is not beauty,Beauty is not love,Love is not music and Music is THE BEST. Frank Zappa

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Kor told you what you needed to do to get this to work with JS but JS isn't needed. All you need is CSS
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    .btnav {
    width:100px;
    }
    .btnav a {
    display:block;
    width:100%;
    padding:3px 0;
    text-align:center;
    background:#E0E0E0;
    color:#FFF;
    }
    .btnav a:hover {
    background:#C7C7C7;
    color:#FFF;
    }
    </style>
    </head>
    
    <body>
    <table>
    <tr>
    <td class="btnav"><a href="index.html" style="text-decoration:none;"><strong>home</strong></a></td>
    </tr>
    </table>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Registered User
    Join Date
    Jan 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Mmmm, no ... that stopped FF running it correctly too!

  • #7
    Registered User
    Join Date
    Jan 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Aerospace ... that wouldn't make the cell clickable though would it!

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I just tested it in FF. It works fine. Unless you did something wrong. Yes it would make it clickable. You know you should try the suggestions people give you before you say they don't work. I rarely ever give solutions that don't work.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Registered User
    Join Date
    Jan 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Aerospace ... valid comment, I will make the amends and get back to you :-) Didn't mean to come across as an ungreatful b**tard

    btw, my original script works in FF, just not in IE properly!

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    If you make the changes that Kor told you to, then it will work in IE as well. The stuff in bold that Kor highlighted is what you need to change you don't have this.style on your onmouseout you have style. rather than this.style
    Last edited by _Aerospace_Eng_; 01-26-2006 at 07:17 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    Registered User
    Join Date
    Jan 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Man, it must be me, I can't get either way to work on IE!!!

    I've attached the page for your information as a text file.

    ps. This is a work in progress, I know the coding is sloppy ;-)
    Attached Files Attached Files
    Last edited by pyrrhus; 01-26-2006 at 07:27 PM.

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Compare this correct javascript way.
    Code:
      <td class="btnav" onmouseover="this.style.backgroundColor='#C7C7C7';this.style.cursor='pointer'" onmouseout="this.style.backgroundColor='#E0E0E0'" align="right" onclick="document.location='free.htm'">
    <a href="free.htm" style="text-decoration:none;"><strong>free advice</strong></a>
      </td>
    to your current javascript way
    Code:
      <td class="btnav" onmouseover="style.backgroundColor='#C7C7C7';this.style.cursor='pointer'"
    "onmouseout="style.backgroundColor='#E0E0E0'" align="right";"onclick="document.location='articles.htm'">
    <a href="articles.htm" style="text-decoration:none;"><strong>articles</strong></a>
      </td>
    Get rid of the CSS stuff I gave you since you don't seem like you are going to use it anyways. JS can be disabled you know. You have too many quotes in your code.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #13
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Man, it must be me, I can't get either way to work on IE!!!
    See an example of the same thing, but in a dynamic manner:
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    style type="text/css">
    <!--
    #mytab td{
        
    background#E0E0E0;
    }
    -->
    </
    style>
    <
    script type="text/javascript">
    function 
    rollCell(){
    var 
    myc document.getElementById('mytab').getElementsByTagName('td');
    for(var 
    i=0;i<myc.length;i++){
    myc[i].onmouseover=function(){
    this.style.background='#C7C7C7';
    this.style.cursor='pointer'
    }
    myc[i].onmouseout=function(){
    this.style.background='#E0E0E0';
    }
    }
    }
    onload rollCell
    </script>
    </head>
    <body>
    <table id="mytab" width="300" border="1" cellspacing="2" cellpadding="2">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>

    </body>
    </html> 
    Now maybe you can see what was wrong in that code...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #14
    Registered User
    Join Date
    Jan 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Guys, thanks.

    Aerospace, like I said in my last post, the page was under development so the coding was sloppy, and will all be converted to a proper CSS file when the functionality is sorted.

    Kor, thanks for the rewrite, I have used that, added a 'white border-bottom', and also an onlick function within the <TD> tag, and it works like a dream on both IE and FF :-) . Thanks

    Again, both of you many, many thanks, this looks like a great forum, and I'll hopefully stick around, and try to take your examples by helping others.

    http://www.codingforums.com/showthre...206#post402206
    Last edited by pyrrhus; 01-27-2006 at 10:17 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •