Accessibility

CSS Advisor

Website has fallen apart

by MrsJJ06 on December 9, 2012 Avg Rating 5.0 (1)   |   Log in to rate post.

Tagged with Position , Chrome , Padding , Float , Firefox 3.5

Problem

When i put my website together this summer (2012) using CS5 Dreamweaver and it was working fine in Chrome, Firefox and Opera. A few months later, I was made aware that the site had 'fallen apart', and it was not displaying properly. Images have moved and the structure had changed. I have included code for the home page below.

Solution

Can I have any suggestions on how to fix/debug?

Detailed description

<!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>Welcome to Melchizedek Ministries</title>
<link href="css/maincss.css" rel="stylesheet" type="text/css" />
<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>
</head>

<body><div id="wrapper">

  <div id="header">
 
  <div id="logo">
  <a href="index.html"><img src="images_all/logo.png" alt="Logo"  width="200" height="200" border="none"/></a>
  </div><!-- end #logo -->

<div id="logoname">
<img src="images_all/title.png" class="headername"/>

</div><!-- end #logoname-->
<div id="navi">
<a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_home','','images_all/navlinks/home_down.png',1)"><img src="images_all/navlinks/home_up.png" alt="Home" name="nav_home" width="125" height="30" border="0" id="nav_home" /></a>
<a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_about','','images_all/navlinks/about_down.png',1)"><img src="images_all/navlinks/about_up.png" alt="About" name="nav_about" width="125" height="30" border="0" id="nav_about" /></a>
<a href="mission.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_missions','','images_all/navlinks/missions_down.png',1)"><img src="images_all/navlinks/missions_up.png" alt="Our Mission" name="nav_missions" width="125" height="30" border="0" id="nav_missions" /></a>
<a href="downloads.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_downloads','','images_all/navlinks/downloads_down.png',1)"><img src="images_all/navlinks/downloads_up.png" alt="Downloads" name="nav_downloads" width="125" height="30" border="0" id="nav_downloads" /></a>
<a href="prayer.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_prayer','','images_all/navlinks/prayer_down.png',1)"><img src="images_all/navlinks/prayer_up.png" alt="Need prayer?" name="nav_prayer" width="125" height="30" border="0" id="nav_prayer" /></a>
<a href="donations.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_donations','','images_all/navlinks/donations_down.png',1)"><img src="images_all/navlinks/donations_up.png" alt="Donations" name="nav_donations" width="125" height="30" border="0" id="nav_donations" /></a>
<a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_contact','','images_all/navlinks/contact_down.png',1)"><img src="images_all/navlinks/contact_up.png" alt="Contact Us" name="nav_contact" width="125" height="30" border="0" id="nav_contact" /></a>
<a href="talitha-cumi_v2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_talitha','','images_all/navlinks/talithacumi_down.png',1)"><img src="images_all/navlinks/talithacumi_up.png" alt="Talitha Cumi" name="nav_talitha" width="125" height="30" border="0" id="nav_talitha" /></a>
<a href="store.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_store','','images_all/navlinks/onlinestore_down.png',1)"><img src="images_all/navlinks/onlinestore_up.png" alt="Online store" name="nav_store" width="125" height="30" border="0" id="nav_store" /></a>
<!--
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="mission.html">Missions</a></li>
<li><a href="downloads.html">Downloads</a></li>
<li><a href="prayer.html">Need Prayer?</a></li>
<li><a href="donations.html">Donations</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="store.html">Online Store</a></li>
</ul>
-->
</div><!-- end #navi -->
    </div><!-- end #header -->

<!-- **********************************************************************************************************************--> 
 
  <div id="content">
  <div id="content_1">
 
 <div id="frameholder" >
 <iframe src="carousel.html" width="510" height="340" scrolling="no" frameborder="0" class="fltlft">
 </iframe> <!-- end iframe-->
   
  </div> <!-- end #frameholder-->
 
  <a href="about.html"><img src="home/cta1.png" class="ctabutton" /></a>
  <a href="prayer.php"><img src="home/cta2.png" class="ctabutton"/></a>
  <a href="downloads.html"><img src="home/cta3.png" class="ctabutton"/></a>
 
  </div><!-- end #content_1-->
 
  <div id="content_2"> <a href="talitha-cumi_v2.html"><img name="book_image" src="home/book_image.gif" width="518" height="297" border="0" id="book_image" alt="" /></a>
  <img src="home/evans.jpg" class="evanspic"/>
  <a href="about.html"><img src="home/hearfromfounders.png" class="foundertext"/></a>
  </div>
  <!-- end #content_2 -->
   
  <!-- end #content --></div>
   
 <!-- **********************************************************************************************************************-->
 <!--
 <div id="sidebar1">
    <ul class="nav">
      <li><a href="#">Link one</a></li>
      <li><a href="#">Link two</a></li>
      <li><a href="#">Link three</a></li>
      <li><a href="#">Link four</a></li>
    </ul>
    <p> The above links demonstrate a basic navigational structure using an unordered list styled with CSS. Use this as a starting point and modify the properties to produce your own unique look. If you require flyout menus, create your own using a Spry menu, a menu widget from Adobe's Exchange or a variety of other javascript or CSS solutions.</p>
    <p>If you would like the navigation along the top, simply move the ul.nav to the top of the page and recreate the styling.</p>
    <!-- end #sidebar1 --><!--</div>
   
 
<!-- **********************************************************************************************************************-->       
  <div id="footer">
  <ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="mission.html">Missions</a></li>
<li><a href="downloads.html">Downloads</a></li>
<li><a href="prayer.html">Need Prayer?</a></li>
<li><a href="donations.html">Donations</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="talitha-cumi_v2.html">Talitha Cumi</a></li>
<li><a href="store.html">Online Store</a></li>
</ul>
    <p>Copyright 2012 Melchizedek Ministries</p>
    </div><!-- end #footer -->
  </div><!-- end wrapper div -->
 
<!-- **********************************************************************************************************************-->   
</body>
</html>




Tagged with Position , Chrome , Padding , Float , Firefox 3.5

Tag it on del.icio.us or Digg

Text ID: WEBSITE_HAS_FALLEN_APART



Comments (3)

To add a comment, please Log in.




Use the WC3 button to check your code

This is an easy way to validate your code and uncover specific issues. This button (at top of code view) will check with WC3 site and list issued. You can click each one and DW will take you to the place in the code where the issue is.

Are the images too large?

If an image is too large, it will cause other site items to move out of position.  Try the easy solutions first.

Maybe This will Help

Well, I would first move your javascript and any js rel links down to the bottom of your page, so that your css and html completely loads before your js events fire.  I would say that if it's firefox then check to see if the latest version works and compare it to an earlier version. I know that Firefox doesn't support some js -> html tags, and that could cause some functions not to fire and css, html to be essentially missing. You could use your chrome dev or firebug and check the event listeners for errors and see if the tags are associated with the event listeners not firing. I would also check W3C for issues with your script and descriptions ( or  run the active code issue highlighter in dw) Both options will check your pages for errors and give you details on what and how your code will be effected. I would also check to see that your browser is firing the event listeners correctly and make sure that everything in your script is loading in the correct order. If you are on a server that has recently decreased bandwidth then your page might load differently - if the events are not correctly fired at the appropriate load times. One more thing.... take a look and double check your DOCTYPE and also your FTP upload settings for transfer mode -  it should be uploaded in Binary format.





CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (103)
Mozilla/Firefox (52)
Opera (18)
Safari (38)
CSS Properties
Background (25)
Border (10)
Color (10)
Float (23)
Font (6)
Margin (11)
Padding (9)
Position (40)
Text (30)
Width/Height (27)