Rollover Images in IE and Firefox

chubster2003 · 12-06-2007, 09:31 AM

ok here's my problem

off my computer here my web page works fine in both IE and Firefox, but when posted to the server, ie works fine, but firefox has a hiccup.

when you put the mouse over the rollover images in firefox it changes the picture before, and..... kinda like the order of the pictures is out of wack..

anyway its getting really frustrating. and i can make it work for firefox (by changing the index numbers of all the rollover images) but then ie goes out of wack by changing the picture ahead.....

here's the code

Code:


<script language="JavaScript" type="text/JavaScript">
if (document.images) {
     var ImgOver=new Array();
         ImgOver[0]=new Image();
         ImgOver[1]=new Image();
         ImgOver[2]=new Image();
         ImgOver[3]=new Image();
         ImgOver[4]=new Image();
         ImgOver[5]=new Image();
         ImgOver[6]=new Image();
         ImgOver[7]=new Image();
         ImgOver[8]=new Image();
         ImgOver[9]=new Image();
         ImgOver[2].src="images/btns/home_grn.png";
         ImgOver[3].src="images/btns/about_grn.png";
         ImgOver[4].src="images/btns/products_grn.png";
         ImgOver[5].src="images/btns/technology_grn.png";
         ImgOver[6].src="images/btns/service_grn.png";
         ImgOver[7].src="images/btns/contact_grn.png";

}
if (document.images) {
     var ImgOut=new Array();
         ImgOut[0]=new Image();
         ImgOut[1]=new Image();
         ImgOut[2]=new Image();
         ImgOut[3]=new Image();
         ImgOut[4]=new Image();
         ImgOut[5]=new Image();
         ImgOut[6]=new Image();
         ImgOut[7]=new Image();
         ImgOut[8]=new Image();
         ImgOut[9]=new Image();
         ImgOut[2].src="images/btns/home_blue.png";
         ImgOut[3].src="images/btns/about_blue.png";
         ImgOut[4].src="images/btns/products_blue.png";
         ImgOut[5].src="images/btns/technology_blue.png";
         ImgOut[6].src="images/btns/service_red.png";
         ImgOut[7].src="images/btns/contact_blue.png";
}
function RollOver(i) {
     if (document.images) document.images[i].src=ImgOver[i].src
}
function RollOut(i) {
     if (document.images) document.images[i].src=ImgOut[i].src
}
</script></head>

<body>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="900px">
<tr>
    <td class="logo" colspan="3" width="100%" height="175px" background="images/bg/white_marble.gif">&nbsp;<a href="index.html"><img border="0" width="340" height="170" src="images/logo2.gif"></a><img border="0" src="images/precision.gif">

    </td>
</tr>
<tr>
    <td class="nav" colspan="3" width="100%" height="50px" background="images/bg/white_marble.gif">
        <a href="index.html" onMouseOver="RollOver(2)" onMouseOut="RollOut(2)"><img border="0" valign="bottom" src="images/btns/home_blue.png"></a>
        <a href="about.htm" onMouseOver="RollOver(3)" onMouseOut="RollOut(3)"><img border="0" valign="bottom" src="images/btns/about_blue.png"></a>
        <a href="products.htm" onMouseOver="RollOver(4)" onMouseOut="RollOut(4)"><img border="0" valign="bottom" src="images/btns/products_blue.png"></a>
        <a href="technology.htm" onMouseOver="RollOver(5)" onMouseOut="RollOut(5)"><img border="0" valign="bottom" src="images/btns/technology_blue.png"></a>
        <a href="service.htm" onMouseOver="RollOver(6)" onMouseOut="RollOut(6)"><img border="0" valign="bottom" src="images/btns/service_red.png"></a>
        <a href="contact.htm" onMouseOver="RollOver(7)" onMouseOut="RollOut(7)"><img border="0" valign="bottom" src="images/btns/contact_blue.png"></a>
    </td>
</tr>

hopefully it almost seems like the firefox reads the page in a different order when posted to the site... but dont know how to fix or change code to work...

to test the site for yourself go to here

thanks for your help in advance!

Clinton

Boogle · 12-06-2007, 01:33 PM

In my opinion, it's the CSS that's doing you wrong here, my friend. I don't think there's uch wrong with the code, although if there is i'm sure someone better with javascript, than i, will point it out.

FF renders margins/paddings/ and some other CSS commands differently to IE and i think this is where your problem lies... maybe search that area of your code or post the HTML and CSS here and we could take a look...

Boog's

chubster2003 · 12-06-2007, 04:32 PM

CSS Code

Code:

body {
     font-size:12pt;
     font-family:tahoma, arial, sans-serif;
}
body.main {
     background-image: url(images\bg\white_marble.gif);
     background-repeat: repeat;
     background-color: none;
     background-attachment: fixed;
}
body.nav {
     background-image: url(images\bg\nav.jpg);
     background-repeat: repeat;
     background-color: none;
     background-attachment: fixed;
}
h2 {
     font-family:tahoma, arial, sans-serif;
     letter-spacing:3pt;
     word-spacing:1pt;
}
h3.links {
     font-family:tahoma, arial, sans-serif;
     text-decoration::underline;
}
a.links{
     font-family:tahoma, arial, sans-serif;
     font-weight:bold;
     color:black;
}
p.headsm {
     font-family:tahoma, arial, sans-serif;
     font-weight:normal;
     font-variant:small-caps;
     font-size:10pt;
     color:blue;
}
p.head {
     font-family:tahoma, arial, sans-serif;
     font-weight:normal;
     font-variant:small-caps;
     font-size:12pt;
     color:blue;
}
p.headbig {
     font-family:tahoma, arial, sans-serif;
     font-weight:normal;
     font-variant:small-caps;
     font-size:16pt;
     color:blue;
}
p.body {
     font-family:tahoma, arial, sans-serif;
     text-indent:25px;
     text-align:left;
     padding-left: 25pt;
}
p.bodysm {
     font-family:tahoma, arial, sans-serif;
     text-align:left;
     font-size:10pt;
     padding-left:25pt;
}
td.main {
     font-family:tahoma, arial, sans-serif;
}
td.info{
     padding-left:25pt;
}
#bigorange {
     font-family:tahoma, arial, sans-serif;
     font-weight:normal;
     font-size:14pt;
     color:orange;
}
#body {
     font-family:tahoma, arial, sans-serif;
     text-align:left;
     padding-left: 25pt;
     font-size:10pt;
}
#note {
     padding-left:150pt;
     font-family:tahoma, arial, sans-serif;
     text-align:left;
     font-size:7pt;
}
#white {
     color:white;
}
#small{
     font-size:8pt;
}
#head {
     font-family:tahoma, arial, sans-serif;
     font-weight:normal;
     font-size:10pt;
     color:blue;
}
#blue {
     font-weight:bold;
     color:blue;
}
div.contact {

}

Page code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Car-May LLC - Home</title>
<meta name="description" content="More than a metering pump, a Travcyl system pumps, controls, and measures fluid all at once.  Achieve exceptional accuracy in fluid metering and dispensing with Car-May's valveless systems.">
<meta name="keywords" content="metering pump, metering pumps, dispensing pumps, dosing, chemical, automated, syringe pump positive displacement, Travcyl, NovaSpense, laboratory, fluid, milliliters, microliters, nanoliters, low flow, Encynova, Car-May">
<link rel=StyleSheet type="text/css" href="style.css">
<script language="JavaScript" type="text/JavaScript">
if (document.images) {
     var ImgOver=new Array();
         ImgOver[2]=new Image();
         ImgOver[3]=new Image();
         ImgOver[4]=new Image();
         ImgOver[5]=new Image();
         ImgOver[6]=new Image();
         ImgOver[7]=new Image();
         ImgOver[2].src="images/btns/home_grn.png";
         ImgOver[3].src="images/btns/about_grn.png";
         ImgOver[4].src="images/btns/products_grn.png";
         ImgOver[5].src="images/btns/technology_grn.png";
         ImgOver[6].src="images/btns/service_grn.png";
         ImgOver[7].src="images/btns/contact_grn.png";

}
if (document.images) {
     var ImgOut=new Array();
         ImgOut[2]=new Image();
         ImgOut[3]=new Image();
         ImgOut[4]=new Image();
         ImgOut[5]=new Image();
         ImgOut[6]=new Image();
         ImgOut[7]=new Image();
         ImgOut[2].src="images/btns/home_blue.png";
         ImgOut[3].src="images/btns/about_blue.png";
         ImgOut[4].src="images/btns/products_blue.png";
         ImgOut[5].src="images/btns/technology_blue.png";
         ImgOut[6].src="images/btns/service_blue.png";
         ImgOut[7].src="images/btns/contact_red.png";
}
function RollOver(i) {
     if (document.images) document.images[i].src=ImgOver[i].src
}
function RollOut(i) {
     if (document.images) document.images[i].src=ImgOut[i].src
}
</script>
</head>

<body>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="900px">
<tr>
    <td class="logo" colspan="3" width="100%" height="175px" background="images/bg/white_marble.gif">&nbsp;<a href="index.html"><img border="0" width="340" height="170" src="images/logo2.gif"></a><img border="0" src="images/precision.gif">

    </td>
</tr>
<tr>
    <td class="nav" colspan="3" width="100%" height="50px" background="images/bg/white_marble.gif">
        <a href="index.html" onMouseOver="RollOver(2)" onMouseOut="RollOut(2)"><img border="0" valign="bottom" src="images/btns/home_blue.png"></a>
        <a href="about.htm" onMouseOver="RollOver(3)" onMouseOut="RollOut(3)"><img border="0" valign="bottom" src="images/btns/about_blue.png"></a>
        <a href="products.htm" onMouseOver="RollOver(4)" onMouseOut="RollOut(4)"><img border="0" valign="bottom" src="images/btns/products_blue.png"></a>
        <a href="technology.htm" onMouseOver="RollOver(5)" onMouseOut="RollOut(5)"><img border="0" valign="bottom" src="images/btns/technology_blue.png"></a>
        <a href="service.htm" onMouseOver="RollOver(6)" onMouseOut="RollOut(6)"><img border="0" valign="bottom" src="images/btns/service_blue.png"></a>
        <a href="contact.htm" onMouseOver="RollOver(7)" onMouseOut="RollOut(7)"><img border="0" valign="bottom" src="images/btns/contact_red.png"></a>
    </td>
</tr>
<tr>
    <td class="links" rowspan="2" width="150px" background="images/bg/rain.jpg" align="center" valign="top"><br><a href="products.htm"><img border="0" src="images/pump.gif"></a><br><h3 class="links">Links</h3></td>
    <td class="blank" rowspan="2" width="10px" background="images/bg/white_marble.gif">&nbsp;</td>

    <td class=main" width="740px" align="left" background="images/bg/white_marble.gif"><br><br>
            <div class="contact">
            <p class="head">Address</p>
            <p id="body">Car-May L.L.C.<br>
            2322 West 25th Street Road<br>
            Greeley, CO  80634<br>
            <a href="http://maps.google.com/maps?f=q&hl=en&time=&date=&ttype=&q=2322+W+25th+Street+Rd,+Greeley,+Weld,+Colorado+80634,+            United+States&sll=37.0625,-95.677068&sspn=28.196369,59.238281&ie=UTF8&cd=1&geocode=0,40.396623,-104.716996&ll=40.398104,-104.717002&spn=0.006602,0.014462&z=16&iwloc=addr&om=1">Map Link</a><br>
            Phone: (970) 330-4575<br>
            Fax: (970) 330-4576</p>
            <p class="head">Information</p>
            <p id="body">Click&nbsp;<a href="mailto:info@car-may.com?subject=Car-May Pump Information&body=I would like to receive more information about Car-May pumps.">Here</a>&nbsp;to email us for more information about pumps.</p>
            <p class="head">Technical Support and Service Return Process</p>
            <p id="body">Click&nbsp;<a href="mailto:service@car-may.com?subject=Car-May Pump Service Information&body=I would like to receive more information about support and servicing Car-May pumps.">Here</a>&nbsp;to email us for Technical Support or Service Return Processing</p>

            <p id="body">John Beard<br>
            President, Car-May L.L.C.<br>
            (720) 277-6576</p></div>


<br><br>
    </td>
</tr>


</body>
</html>

it may look a bit messy but im having to "re-learn" everything... its not like a bike... you cant just jump right back in.

thanks

Clinton

Boogle · 12-07-2007, 12:57 AM

OK try changing this:

Code:

<td class="nav" colspan="3" width="100%" height="50px" background="http://www.v7n.com/forums/images/bg/white_marble.gif">
        <a href="index.html" onMouseOver="RollOver(2)" onMouseOut="RollOut(2)"><img border="0" valign="bottom" src="http://www.v7n.com/forums/images/btns/home_blue.png"></a>
        <a href="about.htm" onMouseOver="RollOver(3)" onMouseOut="RollOut(3)"><img border="0" valign="bottom" src="http://www.v7n.com/forums/images/btns/about_blue.png"></a>
        <a href="products.htm" onMouseOver="RollOver(4)" onMouseOut="RollOut(4)"><img border="0" valign="bottom" src="http://www.v7n.com/forums/images/btns/products_blue.png"></a>
        <a href="technology.htm" onMouseOver="RollOver(5)" onMouseOut="RollOut(5)"><img border="0" valign="bottom" src="http://www.v7n.com/forums/images/btns/technology_blue.png"></a>
        <a href="service.htm" onMouseOver="RollOver(6)" onMouseOut="RollOut(6)"><img border="0" valign="bottom" src="http://www.v7n.com/forums/images/btns/service_blue.png"></a>
        <a href="contact.htm" onMouseOver="RollOver(7)" onMouseOut="RollOut(7)"><img border="0" valign="bottom" src="http://www.v7n.com/forums/images/btns/contact_red.png"></a>
    </td>

into this

Code:

<tr style="width:100%">
<td><a href="index.html" onMouseOver="RollOver(2)" onMouseOut="RollOut(2)"><img border="0" valign="bottom" src="http://www.v7n.com/forums/images/btns/home_blue.png"></a>
</td>
<td><a href="about.htm" onMouseOver="RollOver(3)" onMouseOut="RollOut(3)"><img border="0" valign="bottom" src="http://www.v7n.com/forums/images/btns/about_blue.png"></a>
</td>
<td><a href="products.htm" onMouseOver="RollOver(4)" onMouseOut="RollOut(4)"><img border="0" valign="bottom" src="http://www.v7n.com/forums/images/btns/products_blue.png"></a></td>
<td><a href="technology.htm" onMouseOver="RollOver(5)" onMouseOut="RollOut(5)"><img border="0" valign="bottom" src="http://www.v7n.com/forums/images/btns/technology_blue.png"></a></td>
<td><a href="service.htm" onMouseOver="RollOver(6)" onMouseOut="RollOut(6)"><img border="0" valign="bottom" src="http://www.v7n.com/forums/images/btns/service_blue.png"></a></td>
<td><a href="contact.htm" onMouseOver="RollOver(7)" onMouseOut="RollOut(7)"><img border="0" valign="bottom" src="http://www.v7n.com/forums/images/btns/contact_red.png"></a>
</td>
</tr>

That might help make em both render it the same. And for what it's worth i think you should be using Div's to create this layout, my friend. Just my

Boog's

chubster2003 · 12-07-2007, 01:03 PM

not to complain too much, i do appreciate your help, but all that does it split it into different cells, and make the page that more complicated....

**edit** i changed it and uploaded it, same thing...

are you talking about using <div> tags and using absolute positioning with css? if so it may or may not work... i dont believe you can have the page centered on the browser on all resolutions, with the table's i can.. if its possible, that may be what i have to do to make firefox render the same as IE,...

i still cant figure out why it render's fine off my computer but when i post it to the server its jacked... that boggles my mind.. idk

any other idea's? haha ive tried everything i can think of

Boogle · 12-07-2007, 01:13 PM

OK, first of all you can center CSS for all browsers, i'll show you how if yo decide to use it.

Secondly, I am going to take your code now and do it my way WITH the table and get back to you... This i am 99% sure is your problem.

Boog's

chubster2003 · 12-07-2007, 02:27 PM

I appreciate that.

Thanks. hopefully its just a stupid mistake, that IE just looks over,

chubster2003 · 12-19-2007, 08:35 AM

bump...

can anyone help me?

is there just a way to disable the rollover in firefox and only have it in IE....

Boogle · 12-19-2007, 09:22 AM

Apologies i never got back to you on this: gimme some time i will do right now

Boogle · 12-19-2007, 09:38 AM

OK replace your HTML with this:

Code:

<body>
<table style="margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" width="900px" id="TABLE1" onclick="return TABLE1_onclick()">
<tr style="width:30%;">
    <td class="logo" colspan="3" style="width: 768px">&nbsp;<a href="index.html"><img border="0" width="340" height="170" src="images/logo2.gif" /></a><img border="0" src="images/precision.gif" />
    </td>
</tr>
<tr style="width:30%;">
    <td class="nav" colspan="3" style="width: 768px">
        <a href="index.html" onmouseover="RollOver(2)" onmouseout="RollOut(2)"><img border="0" align="bottom" src="images/btns/home_blue.png" /></a>
        <a href="about.htm" onmouseover="RollOver(3)" onmouseout="RollOut(3)"><img border="0" align="bottom" src="images/btns/about_blue.png" /></a>
        <a href="products.htm" onmouseover="RollOver(4)" onmouseout="RollOut(4)"><img border="0" align="bottom" src="images/btns/products_blue.png" /></a>
        <a href="technology.htm" onmouseover="RollOver(5)" onmouseout="RollOut(5)"><img border="0" align="bottom" src="images/btns/technology_blue.png" /></a>
        <a href="service.htm" onmouseover="RollOver(6)" onmouseout="RollOut(6)"><img border="0" align="bottom" src="images/btns/service_blue.png" /></a>
        <a href="contact.htm" onmouseover="RollOver(7)" onmouseout="RollOut(7)"><img border="0" align="bottom" src="images/btns/contact_red.png" /></a>
    </td>
</tr>
<tr style="width:30%;">
    <td class="links" rowspan="2" width="150px" align="center" valign="top"><br /><a href="products.htm"><img border="0" src="images/pump.gif" /></a><br /><h3 class="links">Links</h3></td>
    <td class="blank" rowspan="2" style="width: 10px">&nbsp;</td>

    <td class="main" colspan="3" align="left" style="width: 768px"><br /><br />
            <div class="contact">
            <p class="head">Address</p>
            <p id="body">Car-May L.L.C.<br />
            2322 West 25th Street Road<br />
            Greeley, CO  80634<br />
            <a href="http://maps.google.com/maps?f=q&hl=en&time=&date=&ttype=&q=2322+W+25th+Street+Rd,+Greeley,+Weld,+Colorado+80634,+            United+States&sll=37.0625,-95.677068&sspn=28.196369,59.238281&ie=UTF8&cd=1&geocode=0,40.396623,-104.716996&ll=40.398104,-104.717002&spn=0.006602,0.014462&z=16&iwloc=addr&om=1">Map Link</a><br />
            Phone: (970) 330-4575<br />
            Fax: (970) 330-4576</p>
            <p class="head">Information</p>
            <p id="P1">Click&nbsp;<a href="mailto:info@car-may.com?subject=Car-May Pump Information&body=I would like to receive more information about Car-May pumps.">Here</a>&nbsp;to email us for more information about pumps.</p>
            <p class="head">Technical Support and Service Return Process</p>
            <p id="P2">Click&nbsp;<a href="mailto:service@car-may.com?subject=Car-May Pump Service Information&body=I would like to receive more information about support and servicing Car-May pumps.">Here</a>&nbsp;to email us for Technical Support or Service Return Processing</p>

            <p id="P3">John Beard<br />
            President, Car-May L.L.C.<br />
            (720) 277-6576</p></div>


<br /><br />
    </td>
</tr>
</table>

</body>

Costin Trifan · 12-19-2007, 04:15 PM

have you made that work yet, Chubster?