www.webdeveloper.com
Results 1 to 2 of 2

Thread: My site ONLY works on MY computer!!! HTML/CSS/WAMP Server

  1. #1
    Join Date
    Dec 2012
    Posts
    1

    My site ONLY works on MY computer!!! HTML/CSS/WAMP Server

    Hi all -

    I'm posting here to see if maybe I've violated some dark recessed rule of HTML or CSS.

    The website is my first built with a CSS Div layout. All my previous sites were made for fun using table-based layouts and I don't like that approach anymore. I'll post an image below, illustrating the div layout I used. I'll try to figure out how to attach the HTML and CSS files for remote view, but if I can't, then I'll have to put them inside code blocks.

    The situation:

    I've made this website, and used WAMP server 2.2 on Win XP Home SP2 32bit OS for the default testing server. I made the site with Adobe DW CS3, basically using only the code view to make changes. (I hate wysiwyg, it's never what you get...) DW Validates the code with no errors or warnings.

    When loaded on my WAMP server (http://localhost/site/) or (http://127.0.0.1/site/), the site works PERFECTLY. EVERYTHING works as it should. However, when uploaded first to my old tripod account, the site had minimal bits and pieces scattered all over the screen and virtually no content displayed. I then signed up for and used freehostingcloud.com and both servers put out the EXACT same messed up layout.

    I think I've violated some HTML div rule (or CSS div class(es) in the stylesheet) but that doesn't explain why it works so perfectly on my own machine with the self-contained server emulator.

    Another thing I've noticed is that packing my site into a .zip and uploading that to the server via the servers file manager often results in many of the files not being uploaded, I have to upload each tiny picture one at a time. (about 30 of them)

    Here is how the site is laid out:

    http://i7.photobucket.com/albums/y26...psa1da3e5c.jpg

    Here is the current live version of my site (both servers)

    http://bushmasterbob.tripod.com/
    http://lelp.freehostingcloud.com/

    Here is a screener of the site actually working on the WAMP server at home:

    http://i7.photobucket.com/albums/y26...ps1a016b17.jpg

    Here is the HTML Code from my site: (Warning - the servers I've uploaded to have polluted my original markup with more code of their own, making it difficult to tell what I wrote and what they wrote, so here is my "pure" code, so to speak)

    I do not have enough posts here yet to have the privilege of attaching files, so here goes:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Little Egypt Libertarian Party</title>
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <link rel="shortcut icon" href="favicon.ico">
    
    </head>
    
    <body onload="MM_preloadImages('Images/homeover.png','Images/aboutover.png','Images/mtgsover.png','Images/mediaover.png','Images/galleryover.png','Images/contactover.png')">
    
    
    <div id="bgheader"><!--Contains the background header repeat //-->
    <div id="pageheader"><table id="Table_01" width="800" height="213" border="0" cellpadding="0" cellspacing="0">
    	<tr>
    		<td colspan="7">
    			<img src="images/tophalf.png" width="800" height="148" alt="" /></td>
    	</tr>
    	<tr>
    		<td rowspan="2">
    			<img src="images/bottomleft.png" width="226" height="65" alt="" /></td>
    		<td><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','Images/homeover.png',1)"><img src="Images/home.png" name="Image11" width="72" height="64" border="0" id="Image11" /></a></td>
    		<td><a href="aboutlp.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','Images/aboutover.png',1)"><img src="Images/about.png" name="Image12" width="87" height="64" border="0" id="Image12" /></a></td>
    		<td rowspan="2"><a href="meetings.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','Images/mtgsover.png',1)"><img src="Images/mtgs.png" name="Image13" width="115" height="65" border="0" id="Image13" /></a></td>
    		<td rowspan="2"><a href="lelpmedia.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','Images/mediaover.png',1)"><img src="Images/media.png" name="Image14" width="84" height="65" border="0" id="Image14" /></a></td>
    		<td><a href="gallery.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','Images/galleryover.png',1)"><img src="Images/gallery.png" name="Image15" width="97" height="64" border="0" id="Image15" /></a></td>
    		<td rowspan="2"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','Images/contactover.png',1)"><img src="Images/contact.png" name="Image16" width="119" height="65" border="0" id="Image16" /></a></td>
    	</tr>
    	<tr>
    		<td colspan="2">
    			<img src="images/header_09.png" width="159" height="1" alt="" /></td>
    		<td>
    			<img src="images/header_10.png" width="97" height="1" alt="" /></td>
    	</tr>
    </table>
    <!-- Contains the header image and navbar for the site //--></div>
    <!-- Closes the pageheader div //-->
    </div><!-- Closes the bgheader div //-->
    
    <div id="contentsection">
    <div id="contentrules">
    <div id="contentleft">
    &nbsp; <!-- Knocks the table down a line to preserve content box tops //-->
    <table width="98%" border="0">
    <tr>
    	<td>
    <h3>Little Egypt Libertarian Party is Born!</h3>
          <img src="images/porcuflag.jpg" alt="The Libertarian Porcupine Banner" width="250" height="175" style="float: right; vertical-align: top;"/>
        		<p class="standard">Welcome to the Little Egypt Libertarian Party website.  Lorem Ipsum, mash, carbonation. draft (draught); lagering adjunct: conditioning tank rims-- ipa priming additive. brew top-fermenting yeast infusion pitching infusion, wit barley. yeast ester bright beer balthazar bittering hops double bock/dopplebock-- priming degrees plato lager. <br />
        		<br />
                priming abv finishing hops, yeast pint glass. keg bottle conditioning final gravity imperial trappist sparge rims. additive krausen grainy additive.
        		<br /><br />
                 <a href="http://il.lp.org">Read More</a></p>
        </td>
    </tr>
    <tr>
    	<td align="right"><h3>Why the Porcupine?</h3>
        <img src="images/porcupine.png" height="175" width="250" border="0" style="float: left; vertical-align: top;" />
        <p class="standard" >The libertarian porcupine was created by Kevin Breen in March, 2006 to help bring libertarianism to the mainstream with a mascot that the general public could easily understand and identify. This was an alternative to the Statue of Liberty, which was the Libertarian Party’s mascot and was generally disregarded or unnoticed by the general public, who just saw it as a generic patriotic icon. 
        <br />
        <br />
    <a href="http://www.libertarianporcupine.org"> Read More </a></p>
        </td></tr>
    </table>
    </div><!-- Closes the content left div //-->
    
    
    <div id="contentright">
    <table width="98%" border="0" cellpadding="5px" style="float:right;">
    <tr>
    	<td><a href="http://www.facebook.com"><img src="images/fb.png" height="32" width="32" border="0"/></a></td>
    	<br />
    	<td style="font-family: Verdana, Arial, Helvetica, sans-serif; color:#0033FF; font-size:14px;" align="left"><b><a href="http://www.facebook.com" style="text-decoration:none;">Follow us on Facebook!</a></b>    </td>
    </tr>
    <tr>
    	<td><a href="http://www.twitter.com/"><img src="images/twitter.png" border="0" height="32" width="32" /></a></td>
    	<br />
    	<td style="font-family: Verdana, Arial, Helvetica, sans-serif; color:#0033FF; font-size:14px;" align="left"><b><a href="http://www.twitter.com/" style="text-decoration:none;">Follow us on Twitter!</a></b>    </td>
    </tr>
    <tr>
    	<td><img src="images/rss.png" border="0" height="32" width="32" /></td><br />
    	<td style="font-family: Verdana, Arial, Helvetica, sans-serif; color:#0033FF; font-size:14px;" align="left"><b>Receive our Feed!</b>    </td>
    </tr>
    
    <tr>
    	<td colspan="2">&nbsp;</td>
    </tr>
    <tr>
    	<td colspan="2" align="center"><img src="images/donate.png" height="50" width="150"/></td>
    </tr>
    <tr>
    	<td colspan="2" align="center"><h3>Visit the Illinois Libertarian Party Website <br />
            <a href="http://il.lp.org/"><img src="images/ilp.png" height="105" width="70" border="0"/></a></h3></td>
    </tr>
    <tr>
    	<td colspan="2" align="center"><h3>Visit the National Libertarian Party Website <br />
            <a href="http://www.lp.org"><img src="images/lplogo.png" height="120" width="120" border="0"/></a></h3></td>
    </tr>
    
        </table>
    
    </div><!-- Closes the content right div //-->
    
    
    </div><!-- Closes the Content Rules div //-->
    </div><!-- Closes the content section div //-->
    
    </body>
    
    </html>

  2. #2
    Join Date
    Mar 2011
    Posts
    1,156
    One problem is that you used "Images/" instead of "images/" for the header image in your stylesheet file 'style.css'. That works on Windows computers that are case insensitive with filenames, but UNIX servers are case-sensitive so it fails online.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles