JavaScript Fade Images

Question

Hey all, I'm trying to get an image to fade into another image AND also to get them to display:inline and in the center...How should I go about doing this??

Answer 1

OK so I thought everything was going smooth and i got everything working how i wanted BUT for some reason Firefox is the only browser where the links at the top get shifted to the right and I have no clue how to fix it for Firefox only?? every other browser besides Firefox works fine, Safari, Opera, Chrome they all work even Internet Explorer to an extent
my HTML is
        <div id="cf1">
            <p style="text-align:center"><a href="index.html"><img class="bottom" src="images/png/Reel-Over.png"><img class="top" src="images/png/Reel.png"></a></p>
        </div>
        <div id="cf2">
            <p style="text-align:center"><a href="media.html"><img class="bottom" src="images/png/Media-Over.png"><img class="top" src="images/png/Media.png"></a></p>
        </div>
        <div id="cf3">
            <p style="text-align:center"><a href="contact.html"><img class="bottom" src="images/png/Contact-Over.png"><img class="top" src="images/png/Contact.png"></a></p>
        </div>
        <div id="cf4">
            <p style="text-align:center"><a href="about.html"><img class="bottom" src="images/png/About-Over.png"><img class="top" src="images/png/About.png"></a></p>
        </div>
my CSS is
#cf1 { margin-top:-12px;
    clear:both;
    position:relative;
    float:left;
    left:0%;
    height:90px;
    width:200px;
#cf2 { margin-top:-12px;
    position:relative;
    float:left;
    left:1%;
    height:90px;
    width:200px;
#cf3 { margin-top:-12px;
    position:relative;
    float:left;
    left:6%;
    height:90px;
    width:200px;
#cf4 { margin-top:-12px;
    position:relative;
    float:left;
    left:10%;
    height:90px;
    width:200px;
#cf1 img, #cf2 img, #cf3 img, #cf4 img {
    position:absolute;
    -webkit-transition: opacity .35s ease-in-out;
    -moz-transition: opacity .35s ease-in-out;
    -o-transition: opacity .35s ease-in-out;
    -ms-transition: opacity .35s ease-in-out;  
    transition: opacity .35s ease-in-out;
#cf1 a:hover img.top, #cf2 a:hover img.top, #cf3 a:hover img.top, #cf4 a:hover img.top {
    opacity:0;
Nevermind I guess I figured it out i added left:5%; right below position:absolute;
I read Firefox does not use position:absolute; accordingly with the other browsers...
Message was edited by: Keldoun