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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question FireFox not Working right with Mouse Overs

    Hi All,
    This is my first time posting here but I might have more at time goes on...

    Making a Guild Web page (using Microsoft Expression Web) and as Always IE works fine but there are bugs in FireFox (I'm sure the bugs are because of EW)

    Anyway, what is happing is, the mouse overs are working but after clicking on one and going the directed page if I hit the "back button" in FF it dosent reload the Mouse over effect for the link I hit.

    For Ex: When I move my mouse over the Red "ABOUT" button it changes the word "ABOUT" from Red to Yellow and back when I move the mouse off it. But when I click the Red "ABOUT" button and follow the link, then hist the back button (in Firefox) to go back to the page the word "ABOUT" is not Yellow and will not update with mouse overs.

    Here is my Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Forces of Corruption</title>
    <style type="text/css">em{font-weight:bold;font-style:normal}
    .style1 {
    background-color: #000000;
    background-image: url('foc-header.jpg');
    text-align: center;
    }
    .style2 {
    text-align: center;
    background-color: #000000;
    background-image: url('foc-center.jpg');
    }
    .style3 {
    text-align: center;
    background-color: #000000;
    background-image: url('foc-bottem.jpg');
    }
    .style4 {
    background-color: #000000;
    }
    .style5 {
    margin-left: 40px;
    }
    .style6 {
    vertical-align: top;
    }
    .style9 {
    border-width: 0px;
    margin-top: 7px;
    margin-bottom: 7px;
    }
    .style10 {
    border-width: 0px;
    }
    :focus {
    outline: 0;
    }
    </style>
    <script type="text/javascript">
    <!--
    function FP_swapImgRestore() {//v1.0
    var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
    var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } }
    doc.$imgSwaps=null; }
    }

    function FP_swapImg() {//v1.0
    var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
    n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
    elm.$src=elm.src; elm.src=args[n+1]; } }
    }

    function FP_preloadImgs() {//v1.0
    var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
    for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
    }

    function FP_getObjectByID(id,o) {//v1.0
    var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
    else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
    if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
    for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
    f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
    for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
    return null;
    }
    // -->
    </script>
    </head>

    <body style="background-color: #000000" onload="FP_preloadImgs(/*url*/'about-gold.png',/*url*/'rules-gold.png',/*url*/'apply-gold.png',/*url*/'forum-gold.png')">

    <table style="width: 1200px; height: 850px" cellspacing="0" cellpadding="0" align="center" class="style4">
    <tr>
    <td style="width: 1200px; height: 170px" class="style1" valign="bottom">
    <a href="about.html">
    <img alt="" src="about-red.png" width="139" height="49" class="style9" id="img1" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'about-gold.png')" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="rules.html">
    <img src="rules-red.png" width="113" height="48" class="style9" id="img2" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img2',/*url*/'rules-gold.png')" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="apply.html">
    <img src="apply-red.png" width="133" height="57" class="style10" id="img3" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img3',/*url*/'apply-gold.png')" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="http://www.forcesofcorruption.com/forum/">
    <img src="forum-red.png" width="135" height="48" class="style9" id="img4" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img4',/*url*/'forum-gold.png')" /></a></td>
    </tr>
    <tr>
    <td style="width: 1200px; height: 580px" class="style2">&nbsp;</td>
    </tr>
    <tr>
    <td style="width: 1200px; height: 100px" class="style3" valign="top">
    <p class="style5"><a href="http://www.wowrealmstatus.net/">
    <img border=0 src="http://www.wowrealmstatus.net/status.php?s=arygos&r=1" alt="Wow server" style="float: left" class="style6"></a></p>
    </td>
    </tr>
    </table>

    </body>

    </html>
    I'll post my Web Site here so you can see what it is doing for yourself, but I'm going to remove it from my post after it is fixed.

    Forces of Corruption

    Thanks,

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,954
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Well, haven't really looked through your code but Firefox 3.6 does exactly what you say you want it to do. In IE7 the link doesn't show gold on page back but the mouseover works fine.

    as Always IE works fine but there are bugs in FireFox
    Not my experience in any way, shape or form.....

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Maybe I worded it wrong. I DON'T want to to be gold on Page Back. I want it to work just like IE dose.

  • #4
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So no one know's how to fix this? I would have asumed it was just a easy fix for some one that knows HTML (Not me).

  • #5
    Regular Coder
    Join Date
    Jan 2009
    Posts
    193
    Thanks
    0
    Thanked 20 Times in 20 Posts
    I would suggest not using javascript for the mouseover effects. You should just use css. Take a look at http://www.w3schools.com/CSS/css_pseudo_classes.asp. If you don't want to go that route then this should be moved to the javascript section.

  • #6
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Good idea. if some one can move this to the Java Section hat would be geat!

  • #7
    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
    You really shouldn't be using tables for page layout. Read the link in my sig. Also I agree with the comment about javascript, there is no need for it. I was bored. Here you go. I rewrote your code. Its not as messy and its a lot simpler to read/understand.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin:0;
    	padding:0;
    }
    body {
    	background:#000 url(foc-center.jpg) no-repeat center 170px;
    }
    #container {
    	width:1200px;
    	margin:auto;
    }
    #header {
    	height:170px;
    	background:url(foc-header.jpg) no-repeat;
    }
    #nav {
    	list-style:none;
    	height:57px;
    	width:680px;
    	margin:0 auto;
    	padding:115px 0 0 0;
    }
    #nav li {
    	float:left;
    	height:57px;
    	line-height:57px;
    	margin:0 20px;
    	display:inline;
    }
    #nav li img {
    	border:0;
    }
    #nav li a {
    	height:57px;
    	background-position:center;
    	display:block;
    	outline:0;
    }
    #nav li a img {
    	visibility:hidden;
    }
    #nav li a#about {
    	width:139px;
    	background-image:url(about-red.png);	
    }
    #nav li a#rules {
    	width:113px;
    	background-image:url(rules-red.png);	
    }
    #nav li a#apply {
    	width:133px;
    	background-image:url(apply-red.png);	
    }
    #nav li a#forum {
    	width:135px;
    	background-image:url(forum-red.png);	
    }
    #nav li a#about:hover {
    	background-image:url(about-gold.png);	
    }
    #nav li a#rules:hover {
    	background-image:url(rules-gold.png);	
    }
    #nav li a#apply:hover {
    	background-image:url(apply-gold.png);	
    }
    #nav li a#forum:hover {
    	background-image:url(forum-gold.png);	
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    	<div id="header">
    		<ul id="nav">
    			<li><a href="about.html" id="about"> <img alt="" src="about-gold.png" width="139" height="49"></a></li>
    			<li><a href="rules.html" id="rules"> <img src="rules-gold.png" width="113" height="48"></a></li>
    			<li><a href="apply.html" id="apply"> <img src="apply-gold.png" width="133" height="57"></a></li>
    			<li><a href="http://www.forcesofcorruption.com/forum/" id="forum"> <img src="forum-gold.png" width="135" height="48"></a></li>
    		</ul>
    	</div>
    	<div id="content"></div>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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