HTML Forum

**DrSeuss** · 07-12-2007, 12:34 PM

Hi,

I found your site searching for help on google, and after reading several help posts, I believe you may be able to help me.

I am working on a new website for my company, and designing it in Dreamweaver 8 (also using Fireworks, and Photoshop for image work).

I have completed the index page, but when I try to preview it (or even upload it to my webserver and test) it displays as a blank page in IE (any version as I have tested it on several computers here).

It works great in Firefox.... so what gives??

The page itself is here: http://www.systemsnspace.com/new2007/index.html

You can view the source here:

Code:

<html>
<head>
<title>Systems&amp;Space, Inc.|High-Denisty Mobile Shelving|Compact Shelving|Rolling Files|Shelving Systems|Storage Systems|Modular Millwork|Casework|Pharmacy Casework|Law Enforcement Products|Evidence Lockers|Personnel Duty Lockers|Filing Services</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--Fireworks MX 2004 Dreamweaver MX 2004 target.  Created Wed Jun 20 17:19:40 GMT-0700 (Pacific Daylight Time) 2007-->
<script language="JavaScript">
<!--
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_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])?args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}

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 mmLoadMenus() {
  if (window.mm_menu_0615092146_4) return;
  window.mm_menu_0615092146_4 = new Menu("root",116,20,"tahoma, arail, verdana",10,"#000000","#ffffff","#cccccc","#666666","left","middle",5,0,1000,-5,7,true,false,true,0,true,true);
  mm_menu_0615092146_4.addMenuItem("Who&nbsp;We&nbsp;Are");
  mm_menu_0615092146_4.addMenuItem("Six-Phase&nbsp;Approach");
  mm_menu_0615092146_4.addMenuItem("Commitment&nbsp;to&nbsp;GREEN");
  mm_menu_0615092146_4.addMenuItem("Government");
  mm_menu_0615092146_4.addMenuItem("Healthcare GPOs");
  mm_menu_0615092146_4.addMenuItem("Project&nbsp;Studies");
  mm_menu_0615092146_4.addMenuItem("News&nbsp;Room");
  mm_menu_0615092146_4.addMenuItem("Careers&nbsp;@&nbsp;SSI");
   mm_menu_0615092146_4.hideOnMouseOut=true;
   mm_menu_0615092146_4.menuBorder=0;
   mm_menu_0615092146_4.menuLiteBgColor='#ffffff';
   mm_menu_0615092146_4.menuBorderBgColor='#555555';
   mm_menu_0615092146_4.bgColor='#555555';
  window.mm_menu_0615092635_3 = new Menu("root",169,20,"tahoma, Arial, helvetica",10,"#000000","#ffffff","#cccccc","#666666","left","middle",5,0,1000,-5,7,true,false,true,0,true,true);
  mm_menu_0615092635_3.addMenuItem("Spacesaver&nbsp;Mobile&nbsp;Storage");
  mm_menu_0615092635_3.addMenuItem("Shelving&nbsp;Systems");
  mm_menu_0615092635_3.addMenuItem("Library&nbsp;Bookstacks");
  mm_menu_0615092635_3.addMenuItem("Rotary&nbsp;Storage");
  mm_menu_0615092635_3.addMenuItem("QuickSpace&nbsp;Storage");
  mm_menu_0615092635_3.addMenuItem("Museum/Gallery&nbsp;Storage");
  mm_menu_0615092635_3.addMenuItem("Weapons&nbsp;Storage");
  mm_menu_0615092635_3.addMenuItem("Law&nbsp;Enforcement&nbsp;Lockers");
  mm_menu_0615092635_3.addMenuItem("Modular&nbsp;Millwork");
  mm_menu_0615092635_3.addMenuItem("Mailroom&nbsp;Furniture");
  mm_menu_0615092635_3.addMenuItem("Modular&nbsp;Medical&nbsp;Casework");
  mm_menu_0615092635_3.addMenuItem("Pharmacy&nbsp;&amp;&nbsp;Laboratory&nbsp;Casework");
  mm_menu_0615092635_3.addMenuItem("Professional&nbsp;Filing&nbsp;Services");
   mm_menu_0615092635_3.hideOnMouseOut=true;
   mm_menu_0615092635_3.menuBorder=0;
   mm_menu_0615092635_3.menuLiteBgColor='#ffffff';
   mm_menu_0615092635_3.menuBorderBgColor='#555555';
   mm_menu_0615092635_3.bgColor='#555555';
  window.mm_menu_0620150716_5 = new Menu("root",144,20,"tahoma, Arial, Helvetica, sans-serif",10,"#000000","#ffffff","#cccccc","#666666","left","middle",5,0,1000,-5,7,true,false,true,0,true,true);
  mm_menu_0620150716_5.addMenuItem("File&nbsp;Moves");
  mm_menu_0620150716_5.addMenuItem("File&nbsp;Conversions");
  mm_menu_0620150716_5.addMenuItem("File/Folder&nbsp;Supplies");
  mm_menu_0620150716_5.addMenuItem("On-Demand&nbsp;Label&nbsp;Printing");
  mm_menu_0620150716_5.addMenuItem("Record&nbsp;Managemant&nbsp;Systems");
   mm_menu_0620150716_5.hideOnMouseOut=true;
   mm_menu_0620150716_5.menuBorder=0;
   mm_menu_0620150716_5.menuLiteBgColor='#ffffff';
   mm_menu_0620150716_5.menuBorderBgColor='#555555';
   mm_menu_0620150716_5.bgColor='#555555';
  window.mm_menu_0615093043_2 = new Menu("root",116,20,"tahoma, Arial, Helvetica, sans-serif",10,"#000000","#ffffff","#cccccc","#666666","left","middle",5,0,1000,-5,7,true,false,true,0,true,true);
  mm_menu_0615093043_2.addMenuItem("Space&nbsp;Analysis");
  mm_menu_0615093043_2.addMenuItem("AIA&nbsp;Learning&nbsp;Seminars");
  mm_menu_0615093043_2.addMenuItem("Site&nbsp;Visits");
   mm_menu_0615093043_2.hideOnMouseOut=true;
   mm_menu_0615093043_2.menuBorder=0;
   mm_menu_0615093043_2.menuLiteBgColor='#ffffff';
   mm_menu_0615093043_2.menuBorderBgColor='#555555';
   mm_menu_0615093043_2.bgColor='#555555';
  window.mm_menu_0615093241_1 = new Menu("root",157,20,"tahoma, Arial, Helvetica, sans-serif",10,"#000000","#ffffff","#cccccc","#666666","left","middle",5,0,1000,-5,7,true,false,true,0,true,true);
  mm_menu_0615093241_1.addMenuItem("Business/Offices");
  mm_menu_0615093241_1.addMenuItem("Education");
  mm_menu_0615093241_1.addMenuItem("Libraries");
  mm_menu_0615093241_1.addMenuItem("Government");
  mm_menu_0615093241_1.addMenuItem("Health&nbsp;Care");
  mm_menu_0615093241_1.addMenuItem("Industrial");
  mm_menu_0615093241_1.addMenuItem("Justice");
  mm_menu_0615093241_1.addMenuItem("Legal");
  mm_menu_0615093241_1.addMenuItem("Museum/Gallery&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
   mm_menu_0615093241_1.hideOnMouseOut=true;
   mm_menu_0615093241_1.menuBorder=0;
   mm_menu_0615093241_1.menuLiteBgColor='#ffffff';
   mm_menu_0615093241_1.menuBorderBgColor='#555555';
   mm_menu_0615093241_1.bgColor='#555555';
  window.mm_menu_0615093406_0 = new Menu("root",119,20,"tahoma, Arial, Helvetica, sans-serif",10,"#000000","#ffffff","#cccccc","#666666","left","middle",5,0,1000,-5,7,true,false,true,0,true,true);
  mm_menu_0615093406_0.addMenuItem("Company&nbsp;Directory");
  mm_menu_0615093406_0.addMenuItem("Free&nbsp;Space&nbsp;Analysis");
  mm_menu_0615093406_0.addMenuItem("Request&nbsp;Information&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
   mm_menu_0615093406_0.hideOnMouseOut=true;
   mm_menu_0615093406_0.menuBorder=0;
   mm_menu_0615093406_0.menuLiteBgColor='#ffffff';
   mm_menu_0615093406_0.menuBorderBgColor='#555555';
   mm_menu_0615093406_0.bgColor='#555555';

  mm_menu_0615093406_0.writeMenus();
} // mmLoadMenus()

//-->
</script>
<script language="JavaScript1.2" src="mm_menu.js"></script>
<style type="text/css">
<!--
.style1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #FFFFFF;
    font-weight: bold;
}
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: 282828;
}
a:link {
    color: #282828;
    text-decoration: underline;
}
a:hover {
    color: #666666;
    text-decoration: none;
}
.style5 {
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}
.menu A:link {color: #ffffff; text-decoration: underline}
.menu A:visited {color: #ffffff; text-decoration: underline}
.menu A:active {color: #ffffff; text-decoration: underline}
.menu A:hover {color: #999999 ; text-decoration: none}

.pagelinks A:link {color: #000000; text-decoration: underline}
.pagelinks A:visited {color: #000000; text-decoration: underline}
.pagelinks A:active {color: #000000; text-decoration: underline}
.pagelinks A:hover {color: #666666 ; text-decoration: none}

a:visited {
    text-decoration: underline;
    color: #282828;
}
a:active {
    text-decoration: underline;
    color: #282828;
}
.style6 {
    color: #CC0000;
    font-weight: bold;
}
.style7 {color: #FFFFFF}
</style>
</head>
<body onLoad="MM_preloadImages('images/aboutslice_f2.gif','images/solslice_f3.gif','images/filingslice_f4.gif','images/servicesslice_f5.gif','images/spaceslice_f6.gif','images/contactslice_f7.gif');">
<script language="JavaScript1.2">mmLoadMenus();</script>
<table width="100%" height="100%" border="0">
  <tr>
    <td align="center" valign="middle" bgcolor="#333333"><table width="924" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- fwtable fwsrc="menubar.png" fwbase="menubar.gif" fwstyle="Dreamweaver" fwdocid = "184035470" fwnested="0" -->
    <tr>
    <td height="33" colspan="7" align="right" valign="top" background="images/topbar.jpg"><div align="right" class="topmenu"><span class="menu"><a href="spaceanalysis.html">Request a Space Analysis</a></span><span class="style7">  |  </span><span class="menu"><a href="brochurereq.html">Download our corporate brochure</a></span><span class="style7">  |  </span><span class="menu"><a href="http://store.systemsnspace.com" target="_blank">Online Store</a><img src="images/spacer.gif" width="30" height="20"></span></div></td>
    </tr>
  <tr>
    <td colspan="7"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="924" height="90">
      <param name="movie" value="imagescroller30.swf">
      <param name="quality" value="high">
      <embed src="imagescroller30.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="924" height="90"></embed>
    </object></td>
    </tr>
  <tr>
    <td colspan="7"><img src="images/partners_bar.jpg" width="924" height="32"></td>
    </tr>
  <tr>
   <td width="100"><img name="logoslice" src="images/logoslice.gif" width="100" height="26" border="0" alt=""></td>
   <td width="116"><img name="aboutslice" src="images/aboutslice.gif" width="116" height="26" border="0" usemap="#m_aboutslice" alt=""></td>
   <td width="170"><img name="solslice" src="images/solslice.gif" width="170" height="26" border="0" usemap="#m_solslice" alt=""></td>
   <td width="144"><img name="filingslice" src="images/filingslice.gif" width="144" height="26" border="0" usemap="#m_filingslice" alt=""></td>
   <td width="116"><img name="servicesslice" src="images/servicesslice.gif" width="116" height="26" border="0" usemap="#m_servicesslice" alt=""></td>
   <td width="159"><img name="spaceslice" src="images/spaceslice.gif" width="159" height="26" border="0" usemap="#m_spaceslice" alt=""></td>
   <td width="119"><img name="contactslice" src="images/contactslice.gif" width="119" height="26" border="0" usemap="#m_contactslice" alt=""></td>
   </tr>
<map name="m_aboutslice">
<area shape="rect" coords="0,0,116,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0615092146_4,0,26,null,'aboutslice');MM_nbGroup('over','aboutslice','images/aboutslice_f2.gif','',1);"  >
</map>
<map name="m_solslice">
<area shape="rect" coords="0,0,170,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0615092635_3,0,26,null,'solslice');MM_nbGroup('over','solslice','images/solslice_f3.gif','images/solslice_f3.gif',1);"  >
</map>
<map name="m_filingslice">
<area shape="rect" coords="0,0,144,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0620150716_5,1,26,null,'filingslice');MM_nbGroup('over','filingslice','images/filingslice_f4.gif','',1);"  >
</map>
<map name="m_servicesslice">
<area shape="rect" coords="0,0,116,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0615093043_2,1,26,null,'servicesslice');MM_nbGroup('over','servicesslice','images/servicesslice_f5.gif','',1);"  >
</map>
<map name="m_spaceslice">
<area shape="rect" coords="0,0,159,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0615093241_1,0,26,null,'spaceslice');MM_nbGroup('over','spaceslice','images/spaceslice_f6.gif','',1);"  >
</map>
<map name="m_contactslice">
<area shape="rect" coords="0,0,119,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0615093406_0,0,26,null,'contactslice');MM_nbGroup('over','contactslice','images/contactslice_f7.gif','',1);"  >
</map>
  <tr>
    <td colspan="7" valign="top"><table width="924" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
      <!--DWLayoutTable-->
      <tr>
        <td width="12" height="18">&nbsp;</td>
        <td colspan="2">&nbsp;</td>
        <td width="16">&nbsp;</td>
        <td width="356" rowspan="11" align="left" valign="top"><div align="right"><img src="images/index.ani.gif" width="355" height="374"></div></td>
      </tr>
      <tr>
        <td height="48">&nbsp;</td>
        <td colspan="2" valign="top"><img src="images/title-innovations.gif" width="282" height="38"></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="55" rowspan="2">&nbsp;</td>
        <td width="9" height="52" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
        <td width="531" valign="top"><span class="style5">Systems &amp; Space is a single source provider that analyzes, engineers, and implements space, 
          storage and filing solutions for every type of business need. Since 1988 we have been 
          developing storage and space solutions for <br>
all types of businesses, government facilities, 
          museums, healthcare facilities, colleges, retail firms and manufacturing companies through-out 
          Northern California.</span></td>
        <td height="52" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
      </tr>
      <tr>
        <td height="32" colspan="3" valign="top"><div align="right"><span class="pagelinks"><a href="whois.html">Click here to learn more</a> <img src="images/spacer.gif" width="20" height="10"></span></div></td>
      </tr>
      <tr>
        <td height="45">&nbsp;</td>
        <td colspan="2" valign="top"><img src="images/title-shop.gif" width="282" height="38"></td>
        <td valign="top">&nbsp;</td>
      </tr>
      <tr>
        <td height="42">&nbsp;</td>
        <td valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
        <td valign="top" class="style5">SSI makes it easy for you to save on all your filing supplies by providing an online store filled with 
          all the files, folders, filings supplies, and equipment you use on a daily basis. <br>
          <span class="style6">Register and recieve a coupon for 15% off your 1st order!</span></td>
        <td valign="top">&nbsp;</td>
      </tr>
      <tr>
        <td height="32"></td>
        <td colspan="3" valign="top"><div align="right"><span class="pagelinks"><a href="http://store.systemsnspace.com" target="_blank">Click here to start saving!</a> <img src="images/spacer.gif" width="20" height="10"></span></div></td>
        </tr>
      <tr>
        <td height="43"></td>
        <td colspan="2" valign="top"><img src="images/title-green.gif" width="282" height="38"></td>
        <td valign="top"></td>
      </tr>
      <tr>
        <td height="29"></td>
        <td valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
        <td valign="top" class="style5">Systems &amp; Space, Inc. and our manufacturers are committed to providing sustainable, 
          environmentally friendly products as an integral part of the storage solutions we develop 
          for our customers.</td>
        <td valign="top"></td>
      </tr>
      <tr>
        <td height="33"></td>
        <td colspan="3" valign="top"><div align="right"><span class="pagelinks"><a href="green.html">Click here to learn more</a> <img src="images/spacer.gif" width="20" height="10"></span></div></td>
        </tr>
      <tr>
        <td height="27" colspan="5" align="center" valign="middle" background="images/bottombar.gif" bgcolor="#000000"><center>
          <span class="style1">&copy; 2007 Systems &amp; Space, Inc  |  500 Boulder Court, Ste. B  |  Pleasanton, CA 94566  |  800.766.7612  | <span class="menu">  <a href="mailto:info@systemsnspace.com">info@systemsnspace.com</a></span>  |  CA License # 599899 </span>
        </center>        </td>
        </tr>
    </table></td>
    </tr>
</table></td>
  </tr>
</table>

</body>
</html>

I looked it over, and do not see any reason it would not work, but I am sure I am missing something very obvious...

Any help would be appreciated!

Thanks!

**LadynRed** · 07-12-2007, 01:42 PM

Wow, you really need to slow down that flash header, the movement is not only distracting, it's dizzying !

You really need to put in a proper Doctype if you want consistent results. I recommend HTML 4.01 Strict at the very least.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

That goes above your <html> tag.

You've got a TON of validation errors, some because you have no DOCTYPE, but others that are not. You need to clean that up too.

**DrSeuss** · 07-12-2007, 02:11 PM

Yeah, I know about the speed of the scrolling images... that is not the final swf file, it was just a test i did. Thanks for the info on the doctype, i thought that might be it, but have seen other site with no doctype that work.
I basically cleaned up some stuff and created a linked style sheet, and it works now

I would love to learn how to use css more, it seems very powerful, and the idea of not having to use tables sounds fantastic!

Thanks for your help!

**LadynRed** · 07-12-2007, 06:13 PM

Quote:

but have seen other site with no doctype that work.

They do work w/o a doctype, but it throws the browsers into Quirks mode. If you want more consistent rendering, you NEED a doctype.

Well.. if you want to move away from tables.. here's a very good book to start with

http://www.sitepoint.com/books/css2/

**DrSeuss** · 07-13-2007, 02:22 PM

Ok, so I have done some lernin of this kickass web design style of CSS, and I love it! I am going to recreate the whole site using CSS and NO TABLES

I have started on the index page, and have the layout pretty much set up. The weird thing is that when i do a browser test from DW, it looks great, but if I upload the files to the webserver, and check it out... there is this weird space at the top (between the "Partners in ....." bar, and the menu bar)

I don't understand what is causing it, but it is **** frustratiing!

Here is the page to see what I mean:
http://www.systemsnspace.com/new2007/css-test.html

and here is my style sheet:

Code:

.style1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #FFFFFF;
    font-weight: bold;
}
body,td,th {
    background: #666666
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #333333;
    margin: 0;
}
a:link {
    color: #282828;
    text-decoration: underline;
}
a:hover {
    color: #666666;
    text-decoration: none;
}
.style5 {
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}

.menu A:link {font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: underline}
.menu A:visited {font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: underline}
.menu A:active {font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: underline}
.menu A:hover {font-family: Arial, Helvetica, sans-serif; color: #999999 ; text-decoration: none}

.pagelinks A:link {color: #000000; text-decoration: underline}
.pagelinks A:visited {color: #000000; text-decoration: underline}
.pagelinks A:active {color: #000000; text-decoration: underline}
.pagelinks A:hover {color: #666666 ; text-decoration: none}

a:visited {
    text-decoration: underline;
    color: #282828;
}
a:active {
    text-decoration: underline;
    color: #282828;
}
.style6 {
    color: #CC0000;
    font-weight: bold;
}
.style7 {color: #FFFFFF}

#container {
    position: relative;
    background: #FFFFFF
    width: 930px; /* width + border for IE 5.x */
    w\idth: 924px; /* real width */
    border: hidden;
    border-width: 0;
    margin-bottom: auto;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto; 
}
#toplinks {
    position: absolute;
    top: 9px;
    right: 21px;
}
#header {    
    position: absolute;
    height: 33px;
    width: 924px;    
    top: 0px;
}
#topscroll {
    position: absolute;
    width: 924px;
    height: 90px;
    top: 33px;
}
#partnersbar {
    position: absolute;
    height: 32px;
    width: 924px;
    top: 123px;
}
#menubar {
    position: absolute;
    height: 26px;
    width: 924px;
    top: 155px;
}    
#rightimage {
    position: absolute;
    height: 374px;
    width:  355px;
    right: 0px;
    top: 181px;
}
#content {
    position: absolute;
    background: #FFFFFF;
    height: 374px;
    width: 569px;
    left: 0px;
    top: 181px;
}
#footer {
    position: absolute;
    backgound: #000000;
    height: 27px;
    width: 924px;
    right: 0px;
    top: 555px;
}
#emaillink {
    position: relative;
    width: 750px;
    left: 95px;
    bottom: 20px;    
}

and finally the html

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=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript">
<!--
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_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])?args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}

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 mmLoadMenus() {
  if (window.mm_menu_0615092146_4) return;
  window.mm_menu_0615092146_4 = new Menu("root",116,20,"tahoma, arail, verdana",10,"#000000","#ffffff","#cccccc","#666666","left","middle",5,0,1000,-5,7,true,false,true,0,true,true);
  mm_menu_0615092146_4.addMenuItem("Who&nbsp;We&nbsp;Are");
  mm_menu_0615092146_4.addMenuItem("Six-Phase&nbsp;Approach");
  mm_menu_0615092146_4.addMenuItem("Commitment&nbsp;to&nbsp;GREEN");
  mm_menu_0615092146_4.addMenuItem("Government");
  mm_menu_0615092146_4.addMenuItem("Healthcare GPOs");
  mm_menu_0615092146_4.addMenuItem("Project&nbsp;Studies");
  mm_menu_0615092146_4.addMenuItem("News&nbsp;Room");
  mm_menu_0615092146_4.addMenuItem("Careers&nbsp;@&nbsp;SSI");
   mm_menu_0615092146_4.hideOnMouseOut=true;
   mm_menu_0615092146_4.menuBorder=0;
   mm_menu_0615092146_4.menuLiteBgColor='#ffffff';
   mm_menu_0615092146_4.menuBorderBgColor='#555555';
   mm_menu_0615092146_4.bgColor='#555555';
  window.mm_menu_0615092635_3 = new Menu("root",169,20,"tahoma, Arial, helvetica",10,"#000000","#ffffff","#cccccc","#666666","left","middle",5,0,1000,-5,7,true,false,true,0,true,true);
  mm_menu_0615092635_3.addMenuItem("Spacesaver&nbsp;Mobile&nbsp;Storage");
  mm_menu_0615092635_3.addMenuItem("Shelving&nbsp;Systems");
  mm_menu_0615092635_3.addMenuItem("Library&nbsp;Bookstacks");
  mm_menu_0615092635_3.addMenuItem("Rotary&nbsp;Storage");
  mm_menu_0615092635_3.addMenuItem("QuickSpace&nbsp;Storage");
  mm_menu_0615092635_3.addMenuItem("Museum/Gallery&nbsp;Storage");
  mm_menu_0615092635_3.addMenuItem("Weapons&nbsp;Storage");
  mm_menu_0615092635_3.addMenuItem("Law&nbsp;Enforcement&nbsp;Lockers");
  mm_menu_0615092635_3.addMenuItem("Modular&nbsp;Millwork");
  mm_menu_0615092635_3.addMenuItem("Mailroom&nbsp;Furniture");
  mm_menu_0615092635_3.addMenuItem("Modular&nbsp;Medical&nbsp;Casework");
  mm_menu_0615092635_3.addMenuItem("Pharmacy&nbsp;&amp;&nbsp;Laboratory&nbsp;Casework");
  mm_menu_0615092635_3.addMenuItem("Professional&nbsp;Filing&nbsp;Services");
   mm_menu_0615092635_3.hideOnMouseOut=true;
   mm_menu_0615092635_3.menuBorder=0;
   mm_menu_0615092635_3.menuLiteBgColor='#ffffff';
   mm_menu_0615092635_3.menuBorderBgColor='#555555';
   mm_menu_0615092635_3.bgColor='#555555';
  window.mm_menu_0620150716_5 = new Menu("root",144,20,"tahoma, Arial, Helvetica, sans-serif",10,"#000000","#ffffff","#cccccc","#666666","left","middle",5,0,1000,-5,7,true,false,true,0,true,true);
  mm_menu_0620150716_5.addMenuItem("File&nbsp;Moves");
  mm_menu_0620150716_5.addMenuItem("File&nbsp;Conversions");
  mm_menu_0620150716_5.addMenuItem("File/Folder&nbsp;Supplies");
  mm_menu_0620150716_5.addMenuItem("On-Demand&nbsp;Label&nbsp;Printing");
  mm_menu_0620150716_5.addMenuItem("Record&nbsp;Managemant&nbsp;Systems");
   mm_menu_0620150716_5.hideOnMouseOut=true;
   mm_menu_0620150716_5.menuBorder=0;
   mm_menu_0620150716_5.menuLiteBgColor='#ffffff';
   mm_menu_0620150716_5.menuBorderBgColor='#555555';
   mm_menu_0620150716_5.bgColor='#555555';
  window.mm_menu_0615093043_2 = new Menu("root",116,20,"tahoma, Arial, Helvetica, sans-serif",10,"#000000","#ffffff","#cccccc","#666666","left","middle",5,0,1000,-5,7,true,false,true,0,true,true);
  mm_menu_0615093043_2.addMenuItem("Space&nbsp;Analysis");
  mm_menu_0615093043_2.addMenuItem("AIA&nbsp;Learning&nbsp;Seminars");
  mm_menu_0615093043_2.addMenuItem("Site&nbsp;Visits");
   mm_menu_0615093043_2.hideOnMouseOut=true;
   mm_menu_0615093043_2.menuBorder=0;
   mm_menu_0615093043_2.menuLiteBgColor='#ffffff';
   mm_menu_0615093043_2.menuBorderBgColor='#555555';
   mm_menu_0615093043_2.bgColor='#555555';
  window.mm_menu_0615093241_1 = new Menu("root",157,20,"tahoma, Arial, Helvetica, sans-serif",10,"#000000","#ffffff","#cccccc","#666666","left","middle",5,0,1000,-5,7,true,false,true,0,true,true);
  mm_menu_0615093241_1.addMenuItem("Business/Offices");
  mm_menu_0615093241_1.addMenuItem("Education");
  mm_menu_0615093241_1.addMenuItem("Libraries");
  mm_menu_0615093241_1.addMenuItem("Government");
  mm_menu_0615093241_1.addMenuItem("Health&nbsp;Care");
  mm_menu_0615093241_1.addMenuItem("Industrial");
  mm_menu_0615093241_1.addMenuItem("Justice");
  mm_menu_0615093241_1.addMenuItem("Legal");
  mm_menu_0615093241_1.addMenuItem("Museum/Gallery&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
   mm_menu_0615093241_1.hideOnMouseOut=true;
   mm_menu_0615093241_1.menuBorder=0;
   mm_menu_0615093241_1.menuLiteBgColor='#ffffff';
   mm_menu_0615093241_1.menuBorderBgColor='#555555';
   mm_menu_0615093241_1.bgColor='#555555';
  window.mm_menu_0615093406_0 = new Menu("root",119,20,"tahoma, Arial, Helvetica, sans-serif",10,"#000000","#ffffff","#cccccc","#666666","left","middle",5,0,1000,-5,7,true,false,true,0,true,true);
  mm_menu_0615093406_0.addMenuItem("Company&nbsp;Directory");
  mm_menu_0615093406_0.addMenuItem("Free&nbsp;Space&nbsp;Analysis");
  mm_menu_0615093406_0.addMenuItem("Request&nbsp;Information&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
   mm_menu_0615093406_0.hideOnMouseOut=true;
   mm_menu_0615093406_0.menuBorder=0;
   mm_menu_0615093406_0.menuLiteBgColor='#ffffff';
   mm_menu_0615093406_0.menuBorderBgColor='#555555';
   mm_menu_0615093406_0.bgColor='#555555';

  mm_menu_0615093406_0.writeMenus();
} // mmLoadMenus()

//-->
</script>
<script language="JavaScript1.2" src="mm_menu.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body onLoad="MM_preloadImages('images/aboutslice_f2.gif','images/solslice_f3.gif','images/filingslice_f4.gif','images/servicesslice_f5.gif','images/spaceslice_f6.gif','images/contactslice_f7.gif');">
<script language="JavaScript1.2">mmLoadMenus();</script>
<div id="container">
<div id="header">
<img src="images/topbar.jpg" />
<div id="toplinks" align="right"><span class="menu"><a href="spaceanalysis.html">Request a Space Analysis</a></span><span class="style7">  |  </span><span class="menu"><a href="brochurereq.html">Download our corporate brochure</a></span><span class="style7">  |  </span><span class="menu"><a href="http://store.systemsnspace.com" target="_blank">Online Store</a></span></div>
</div>
<div id="topscroll">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="924" height="90">
      <param name="movie" value="imagescroller30.swf">
      <param name="quality" value="high">
      <embed src="imagescroller30.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="924" height="90"></embed>
  </object></div>
<div id="partnersbar">
<img src="images/partners_bar.jpg" /></div>
<div id="menubar"><img name="logoslice" src="images/logoslice.gif" alt=""><img name="aboutslice" src="images/aboutslice.gif" width="116" height="26" border="0" usemap="#m_aboutslice" alt=""><img name="solslice" src="images/solslice.gif" width="170" height="26" border="0" usemap="#m_solslice" alt=""><img name="filingslice" src="images/filingslice.gif" width="144" height="26" border="0" usemap="#m_filingslice" alt=""><img name="servicesslice" src="images/servicesslice.gif" width="116" height="26" border="0" usemap="#m_servicesslice" alt=""><img name="spaceslice" src="images/spaceslice.gif" width="159" height="26" border="0" usemap="#m_spaceslice" alt=""><img name="contactslice" src="images/contactslice.gif" width="119" height="26" border="0" usemap="#m_contactslice" alt="">
<map name="m_aboutslice">
<area shape="rect" coords="0,0,116,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0615092146_4,0,26,null,'aboutslice');MM_nbGroup('over','aboutslice','images/aboutslice_f2.gif','',1);"  >
</map>
<map name="m_solslice">
<area shape="rect" coords="0,0,170,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0615092635_3,0,26,null,'solslice');MM_nbGroup('over','solslice','images/solslice_f3.gif','images/solslice_f3.gif',1);"  >
</map>
<map name="m_filingslice">
<area shape="rect" coords="0,0,144,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0620150716_5,1,26,null,'filingslice');MM_nbGroup('over','filingslice','images/filingslice_f4.gif','',1);"  >
</map>
<map name="m_servicesslice">
<area shape="rect" coords="0,0,116,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0615093043_2,1,26,null,'servicesslice');MM_nbGroup('over','servicesslice','images/servicesslice_f5.gif','',1);"  >
</map>
<map name="m_spaceslice">
<area shape="rect" coords="0,0,159,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0615093241_1,0,26,null,'spaceslice');MM_nbGroup('over','spaceslice','images/spaceslice_f6.gif','',1);"  >
</map>
<map name="m_contactslice">
<area shape="rect" coords="0,0,119,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0615093406_0,0,26,null,'contactslice');MM_nbGroup('over','contactslice','images/contactslice_f7.gif','',1);"  >
</map></div>
<div id="rightimage"><img src="images/index.ani.gif" /></div>
<div class="style5" id="content">this is a test of text</div>
<div id="footer"><img src="images/bottombar.gif" />
<div id="emaillink"><span class="style1">&copy; 2007 Systems &amp; Space, Inc  |  500 Boulder Court, Ste. B  |  Pleasanton, CA 94566  |  800.766.7612  | <span class="menu"><a href="mailto:info@systemsnspace.com">info@systemsnspace.com</a></span> |  CA License # 599899 </span></div>
</div>
</div>
</body>
</html>

Thanks again for your help!

**LadynRed** · 07-13-2007, 04:13 PM

Quote:

Ok, so I have done some lernin of this kickass web design style of CSS, and I love it!

WOO HOO !! Another convert

Glad you see the beauty of designing with CSS.
Ok.. now we have to get you away from using position:absolute on everything

It will actually cause you problems, especially in IE. Learn to use the normal document flow and floats to put things where you want them.

For now, you need to change the "top" property here:
#menubar {
position: absolute;
height: 26px;
width: 924px;
top: 153px;
}

That will close that gap.

**DrSeuss** · 07-13-2007, 04:33 PM

I will try that, but why would it show up fine when I preview it in a browser from DW, but when it is live on the webserver I have this issue?

Also, when I don't use absolutes, the pieces seem to go wherever they want, and not where i want them...

I guess this is turning more into a css issue, than html... any other problems I have I will post a new thread in the CSS section

Thanks!

**DrSeuss** · 07-13-2007, 05:25 PM

I have continued this thread in the appropriate forum (CSS) here:

http://www.webmaster-talk.com/css-fo...wing-page.html

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!