Results 1 to 7 of 7
  1. #1
    Join Date
    Aug 2006
    Location
    Australia
    Posts
    240

    Far out... CSS problem not loading on page load!

    This is really frustrating me. I have to do my navigation in CSS and not Java now. I'm used to doing it in java but now when I do it in CSS i can't get the "rollover" images to load when the page loads. So now when you rollover the links it has to load the image which shows a white blankspot for a second or so.

    This really frustrates me as well yer...

    Here is my CSS document:

    /* CSS Document EX002 */

    /* Home */

    .homeon {
    background-image: url(images/template/home-roll.jpg);
    background-repeat: no-repeat;
    height: 28px;
    width: 72px;
    }

    An
    .homeoff {
    background-image: url(images/template/home.jpg);
    height: 28px;
    width: 72px;
    background-repeat: no-repeat;
    }

    /* Services */

    .serviceson {
    background-image: url(images/template/services-roll.jpg);
    background-repeat: no-repeat;
    height: 28px;
    width: 104px;
    }
    .servicesoff {
    background-image: url(images/template/services.jpg);
    height: 28px;
    width: 104px;
    background-repeat: no-repeat;
    }

    /* Hosting */

    .hostingon {
    background-image: url(images/template/hosting-roll.jpg);
    background-repeat: no-repeat;
    height: 28px;
    width: 100px;
    }
    .hostingoff {
    background-image: url(images/template/hosting.jpg);
    height: 28px;
    width: 100px;
    background-repeat: no-repeat;
    }

    /* Resellers */

    .resellerson {
    background-image: url(images/template/resellers-roll.jpg);
    background-repeat: no-repeat;
    height: 28px;
    width: 117px;
    }
    .resellersoff {
    background-image: url(images/template/resellers.jpg);
    height: 28px;
    width: 117px;
    background-repeat: no-repeat;
    }

    /* Domains */

    .domainson {
    background-image: url(images/template/domains-roll.jpg);
    background-repeat: no-repeat;
    height: 28px;
    width: 98px;
    }
    .domainsoff {
    background-image: url(images/template/domains.jpg);
    height: 28px;
    width: 98px;
    background-repeat: no-repeat;
    }

    /* Network */

    .networkon {
    background-image: url(images/template/network-roll.jpg);
    background-repeat: no-repeat;
    height: 28px;
    width: 108px;
    }
    .networkoff {
    background-image: url(images/template/network.jpg);
    height: 28px;
    width: 108px;
    background-repeat: no-repeat;
    }

    /* Contact */

    .contacton {
    background-image: url(images/template/contactus-roll.jpg);
    background-repeat: no-repeat;
    height: 28px;
    width: 123px;
    }
    .contactoff {
    background-image: url(images/template/contactus.jpg);
    height: 28px;
    width: 123px;
    background-repeat: no-repeat;
    }

    /* Support */

    .supporton {
    background-image: url(images/template/support-roll.jpg);
    background-repeat: no-repeat;
    height: 28px;
    width: 108px;
    }
    .supportoff {
    background-image: url(images/template/support.jpg);
    height: 28px;
    width: 108px;
    background-repeat: no-repeat;
    }
    /* End current - updated 15:30 EST - 12/21/2006 */
    Here are the tags I'm setting them to:

    <table width="844" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="73" valign="middle" class="homeoff"onmouseover="this.className='homeon'" onmouseout="this.className='homeoff'"><a href="#"><img src="images/template/spacer.gif" alt="Home" width="72" height="15" border="0" /></a></td>
    <td width="2"><img src="images/template/split1.jpg" alt="blank" width="2" height="28" /></td>
    <td width="105" valign="middle" class="servicesoff"onmouseover="this.className='serviceson'" onmouseout="this.className='servicesoff'"><a href="#"><img src="images/template/spacer.gif" alt="Services" width="104" height="15" border="0" /></a></td>
    <td width="2"><img src="images/template/split2.jpg" alt="blank" width="2" height="28" /></td>
    <td width="101" valign="middle" class="hostingoff"onmouseover="this.className='hostingon'" onmouseout="this.className='hostingoff'"><a href="#"><img src="images/template/spacer.gif" alt="Hosting" width="100" height="15" border="0" /></a></td>
    <td width="2"><img src="images/template/split3.jpg" alt="blank" width="2" height="28" /></td>
    <td width="120" valign="middle" class="resellersoff"onmouseover="this.className='resellerson'" onmouseout="this.className='resellersoff'"><a href="#"><img src="images/template/spacer.gif" alt="Resellers" width="117" height="15" border="0" /></a></td>
    <td width="2"><img src="images/template/split4.jpg" alt="blank" width="2" height="28" /></td>
    <td width="100" valign="middle" class="domainsoff"onmouseover="this.className='domainson'" onmouseout="this.className='domainsoff'"><a href="#"><img src="images/template/spacer.gif" alt="Domains" width="98" height="15" border="0" /></a></td>
    <td width="2"><img src="images/template/split5.jpg" alt="blank" width="2" height="28" /></td>
    <td width="108" valign="middle" class="networkoff"onmouseover="this.className='networkon'" onmouseout="this.className='networkoff'"><a href="#"><img src="images/template/spacer.gif" alt="Network" width="108" height="15" border="0" /></a></td>
    <td width="10"><img src="images/template/split6.jpg" alt="blank" width="2" height="28" /></td>
    <td width="126" valign="middle" class="contactoff"onmouseover="this.className='contacton'" onmouseout="this.className='contactoff'"><a href="#"><img src="images/template/spacer.gif" alt="Contact Us" width="123" height="15" border="0" /></a></td>
    <td width="23"><img src="images/template/split7.jpg" alt="blank" width="2" height="28" /></td>
    <td width="68" valign="middle" class="supportoff"onmouseover="this.className='supporton'" onmouseout="this.className='supportoff'"><a href="#"><img src="images/template/spacer.gif" alt="Support" width="108" height="15" border="0" /></a></td>
    </tr>
    <tr>
    <td colspan="15"><div align="center"><img src="images/template/spacer.gif" alt="blank" width="1" height="4" /></div></td>
    </tr>
    </table>
    Preferably It'd help if the onload part isn't inside the body tag i.e <body onload="this.className='lot" img.... >'

    Any Ideas?
    Your reading skill has increased by one point!
    computers are cool now OK!

  2. #2
    Join Date
    Dec 2002
    Location
    chica go go
    Posts
    11,858
    there needs to be a space between your ", and your onmouseover.

    use this:

    Code:
    <table width="844" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="73" valign="middle" class="homeoff" onmouseover="this.className='homeon'" onmouseout="this.className='homeoff'"><a href="#"><img src="images/template/spacer.gif" alt="Home" width="72" height="15" border="0" /></a></td>
    <td width="2"><img src="images/template/split1.jpg" alt="blank" width="2" height="28" /></td>
    <td width="105" valign="middle" class="servicesoff" onmouseover="this.className='serviceson'" onmouseout="this.className='servicesoff'"><a href="#"><img src="images/template/spacer.gif" alt="Services" width="104" height="15" border="0" /></a></td>
    <td width="2"><img src="images/template/split2.jpg" alt="blank" width="2" height="28" /></td>
    <td width="101" valign="middle" class="hostingoff" onmouseover="this.className='hostingon'" onmouseout="this.className='hostingoff'"><a href="#"><img src="images/template/spacer.gif" alt="Hosting" width="100" height="15" border="0" /></a></td>
    <td width="2"><img src="images/template/split3.jpg" alt="blank" width="2" height="28" /></td>
    <td width="120" valign="middle" class="resellersoff" onmouseover="this.className='resellerson'" onmouseout="this.className='resellersoff'"><a href="#"><img src="images/template/spacer.gif" alt="Resellers" width="117" height="15" border="0" /></a></td>
    <td width="2"><img src="images/template/split4.jpg" alt="blank" width="2" height="28" /></td>
    <td width="100" valign="middle" class="domainsoff" onmouseover="this.className='domainson'" onmouseout="this.className='domainsoff'"><a href="#"><img src="images/template/spacer.gif" alt="Domains" width="98" height="15" border="0" /></a></td>
    <td width="2"><img src="images/template/split5.jpg" alt="blank" width="2" height="28" /></td>
    <td width="108" valign="middle" class="networkoff" onmouseover="this.className='networkon'" onmouseout="this.className='networkoff'"><a href="#"><img src="images/template/spacer.gif" alt="Network" width="108" height="15" border="0" /></a></td>
    <td width="10"><img src="images/template/split6.jpg" alt="blank" width="2" height="28" /></td>
    <td width="126" valign="middle" class="contactoff" onmouseover="this.className='contacton'" onmouseout="this.className='contactoff'"><a href="#"><img src="images/template/spacer.gif" alt="Contact Us" width="123" height="15" border="0" /></a></td>
    <td width="23"><img src="images/template/split7.jpg" alt="blank" width="2" height="28" /></td>
    <td width="68" valign="middle" class="supportoff" onmouseover="this.className='supporton'" onmouseout="this.className='supportoff'"><a href="#"><img src="images/template/spacer.gif" alt="Support" width="108" height="15" border="0" /></a></td>
    </tr>
    <tr>
    <td colspan="15"><div align="center"><img src="images/template/spacer.gif" alt="blank" width="1" height="4" /></div></td>
    </tr>
    </table>
    Also, there is some "An" text up near your .homeoff in your css. You should probably remove that.

  3. #3
    Join Date
    Aug 2006
    Location
    Australia
    Posts
    240

    Hmm

    http://www.externomedia.com.au/updat...xternohosting/

    If you rollover the NAV it comes up white for the splint of a second.. i want to get it to be like the Java where it loads that green rollover image when the page loads rather than loading when the mouse goes over it
    Your reading skill has increased by one point!
    computers are cool now OK!

  4. #4
    Join Date
    Oct 2002
    Location
    Under Your Skin
    Posts
    5,875
    When I first visited the images took a while to load... reminded me of dialup -- not making a joke... letting you know it is not just the rollover you have an issue with....

    Then when I went over the image it took a couple of seconds for the green image to show (the second image). But once I went over them once, they came up fast (guess on my system ca).

    How big are your images? What is the "spacer.gif"?

    edit: I tried with IE 7 and FF 2.0... same issue in both... In opera the images did come up fast... lol... but did have a slight delay when switching to the green, but a lot less than IE and FF... with Opera, you never see white during the switch....
    Windows 10 to Linux and Mac OSX: I'm PARSECs better than you. Eat my dust!!!

  5. #5
    Join Date
    Oct 2002
    Location
    Under Your Skin
    Posts
    5,875
    This might help....

    http://www.maratz.com/blog/archives/...images-in-css/

    or http://wellstyled.com/css-nopreload-rollovers.html

    Those two sites also shows how you can cleanup your code....
    Windows 10 to Linux and Mac OSX: I'm PARSECs better than you. Eat my dust!!!

  6. #6
    Join Date
    Aug 2006
    Location
    Australia
    Posts
    240

    Lightbulb hekwu! ur my hero!

    Quote Originally Posted by hekwu
    When I first visited the images took a while to load... reminded me of dialup -- not making a joke... letting you know it is not just the rollover you have an issue with....

    Then when I went over the image it took a couple of seconds for the green image to show (the second image). But once I went over them once, they came up fast (guess on my system ca).
    The server its on is australian based... So many international people seem to get timed out visiting it... but aussies have no problem! I should put it on a more open server lol

    Quote Originally Posted by hekwu
    What is the "spacer.gif"?
    Because the original changes the background, this was the only style i knew of etc. I didn't wan't to use text because i like the shadows etc. The spacer is there as the content to link... there are other ways i could have done it but i was in a hurry

    Quote Originally Posted by hekwu
    This might help....

    http://www.maratz.com/blog/archives/...images-in-css/

    or http://wellstyled.com/css-nopreload-rollovers.html

    Those two sites also shows how you can cleanup your code....
    Thanks! Just what I'm after!
    Your reading skill has increased by one point!
    computers are cool now OK!

  7. #7
    Join Date
    Oct 2002
    Location
    Under Your Skin
    Posts
    5,875
    Quote Originally Posted by James-Fagan

    Thanks! Just what I'm after!
    That is good... a friend of mine uses the "one image" way... I don't use images like that, so I don't use either.
    Windows 10 to Linux and Mac OSX: I'm PARSECs better than you. Eat my dust!!!

Posting Permissions

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