#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    6
    Rep Power
    0

    SOLVED: Some CSS rollovers stop working when site is uploaded to host


    **UPDATE**

    I would of just deleted the post but it wont let me so I will post my own answer.

    After staring at my code forever I realized I had some lower case letters in CSS when the files had caps. So that was the issue.

    I guess this is an issue on linux based servers which godaddy uses.

    It wasn't an issue on my windows server.

    So in case anyone runs into a similar problem. Here you go.

    ***********

    Help! I haven't worked on websites in a long time. My wife asked me to make one for her small business. It was done and we were running it from a personal server. After hurricane Sandy we decided to go with a dedicated host.

    We currently use godaddy for our dotcom so we just purchased a hosting plan as well.

    I uploaded our working website from the personal server to godaddy's hosting site and now my rollovers don't work.

    I have no clue how to even trouble shoot why they aren't working.

    The only thing I can think of is its a CSS issue. But it was working before I uploaded it. It also works when I just view it on my computer.

    So could it possibly be something on godaddys end? I called and asked and they just told me to go pack sand.

    Basically I have five linked images that roll over. Three images link and two don't. One of the images, the home image, mouses over correctly. The other four do not.

    Any help or advice would be greatly appreciated.

    I'm not allowed to link to the website as a new user. So I guess I can send anyone interested in helping a private message.

    But if you just search gemsdevine in google its on the first page.

    Here is the code involved.


    CSS

    Code:
    <style type="text/css">
    html, body {
      height:100%;
    }
    body {
           	margin-left:auto;
    		margin-right:auto;
    		height:100%;
    		width:100%;
      		position:relative;
            font-family: Arial, Helvetica, sans-serif;
    		background-image: url(images/Canvas.jpg);
    	    background-repeat: no-repeat;
        	background-size:100% 100%;
    		background-origin:content-box;
    	    
    }
    #GDV {
           	margin-left:auto;
    		margin-right:auto;
      		width:874px;
    		position:relative;
    		font-family: Arial, Helvetica, sans-serif;
    }
    
    a {
        text-decoration:none;
        font-family:helvetica, arial, sans-serif;
        color:#4f2918;
    	border: 0 none;
    	
    }
    .tdback1 { background-image: url(images/bracelet-test2.jpg);}
    .tdback2 { background-image: url(images/home2.gif);}
    .tdback3 { background-image: url(images/shop2.gif);}
    .tdback4 { background-image: url(images/about2.gif);}
    .tdback5 { background-image: url(images/contact2.gif);}
    
    .fade{opacity:1;transition:opacity .25s ease-in-out;-moz-transition:opacity .25s ease-in-out;-webkit-transition:opacity .25s ease-in-out;}.fade:hover{opacity:0;}.nav-fade{padding:0;}.nav-fade li{background:#fff;padding:3px 8px;display:inline-block;transition:background .25s ease-in-out;-moz-transition:background .25s ease-in-out;-webkit-transition:background .25s ease-in-out;cursor:pointer;}.nav-fade li:hover{background:#000;}.hyphen {
            color: #666;
    }
    
    img
    {  border-style: none;
    }
    
    a.image-border {
    	text-decoration: none;
    	border: 0 none;
    	}
     iframe.c1 {border:none; width:150px; height:30px}
    </style>
    HTML
    Code:
    <table id="Table_01" width="874" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td colspan="5"><img src="images/index_01.png" width="792" height="104" alt=""></td>
    <td rowspan="9"><img src="images/index_02.png" width="81" height="522" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="104" alt=""></td>
    </tr>
    <tr>
    <td rowspan="9"><img src="images/index_03.png" width="80" height="504" alt=""></td>
    <td colspan="4"><img src="images/index_04.gif" width="712" height="94" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="94" alt=""></td>
    </tr>
    <tr>
    <td rowspan="7"><img src="images/index_05.gif" width="88" height="324" alt=""></td>
    <td rowspan="6" class="tdback1"><img src="images/Bracelet-test.jpg" width="369" height="252" class="group, fade" alt="Gems de Vine jewelry"></td>
    <td class="tdback2"><img src="images/home.gif" width="215" height="63" alt="Gems de Vine Home Page" class="group, fade"></td>
    <td rowspan="7"><img src="images/index_08.gif" width="40" height="324" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="63" alt=""></td>
    </tr>
    <tr>
    <td><img src="images/index_09.gif" width="215" height="3" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="3" alt=""></td>
    </tr>
    <tr>
    <td class="tdback3"><a href="shop.html" class="fancybox"><img src="images/shop.gif" width="215" height="56" alt="Gems de Vine Etsy Store" class="group, fade"></a></td>
    <td><img src="images/spacer.gif" width="1" height="56" alt=""></td>
    </tr>
    <tr>
    <td class="tdback4"><a href="about.html" class="fancybox"><img src="images/About.gif" width="215" height="57" alt="About Gems de Vine" class="group, fade"></a></td>
    <td><img src="images/spacer.gif" width="1" height="57" alt=""></td>
    </tr>
    <tr>
    <td class="tdback5"><a href="http://gemsdevine.wufoo.com/forms/z7x3p9/" class="fancybox"><img src="images/contact.gif" width="215" height="66" alt="Gems de Vine Contact page" class="group, fade"></a></td>
    <td><img src="images/spacer.gif" width="1" height="66" alt=""></td>
    </tr>
    <tr>
    <td rowspan="2"><img src="images/index_13.gif" width="215" height="79" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="7" alt=""></td>
    </tr>
    <tr>
    <td><img src="images/index_14.gif" width="369" height="72" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="72" alt=""></td>
    </tr>
    <tr>
    <td colspan="5"><img src="images/index_15.png" width="793" height="86" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="86" alt=""></td>
    </tr>
    </table>
    Sincerely,

    Richard Brahm
    Last edited by rwbrahm; December 24th, 2012 at 11:24 PM. Reason: SOLVED
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Yes, file and directory names are case-sensitive in Linux and Unix, whereas they are not in Windows. You can use Apache's "mod_speling" to deal with that, however, its use is intended for when users mistype URLs, therefore it's best to make sure that the URLs in your files are correct.

    As you found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam. Additionally, new members have an initial probation period where they aren't allowed to send PMs (until they have made 10 posts).

    I could say a lot more, but you may not want to hear my criticisms.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    6
    Rep Power
    0
    By all means good sir! I am in the military and am used to criticism. I find it rather constructive!

    Sigh I just went back and checked and apparently fancybox isn't working. uh oh. Time to figure this out.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    6
    Rep Power
    0
    Fixed fancybox. More caps issues. Fun times.

IMN logo majestic logo threadwatch logo seochat tools logo