Sidebar menu drift

**Inky1231** · Nov 22, 2011 14:43

Hi folks,
I have got a bit of an issue here that I am not sure how to fix. I work at a community college that contracted out to have the bulk of the site built a couple of years ago. Well there is an issue were the sidebar navigation menu drifts downward when there is a lot of text on the page. My colleague and I have been trying to fix this problem now for a couple of months. We "fixed" the problem in FF and Chrome by removing some div tags, but the drift is still there in IE. I have also been able to "fix" it in FF and Chrome by defining a rowspan in the table but it is still bad in IE. I am thinking it ahs something to do with a float or position tag somewhere but I can not for the life of me figure it out.

Here is an example of a minor drift http://www.dacc.edu/depts/
Here is one that is "fixed" in FF and Chrome but not IE http://www.dacc.edu/student-handbook/clubs.php
Here is one with no drift (built by another 3rd party http://www.dacc.edu/finaid/

**Victorinox** · Nov 25, 2011 13:54

It's a while since I've worked with table based layouts but maybe this'll help.

Ideally you'd switch to a CSS layout but if circumstances are restricting you to tweaking tables here's a suggestion for simplifying the structure.

In the source code, the sidebar currently resides in a tr below the tr containing the main content area. When working with tables for layout it tends to be easier to mark up elements in the order in which they are intended to be rendered, so the sidebar td could be in the same tr as the main content and preceding it. This would make the sidebar and content a simple two cell structure with no rowspan jiggery-pokery required. In brief:

Code HTML:

<tr>
    <td>sidebar (with shadow image at top)</td>
    <td> Main content</td>
</tr>

Here's code for the Departments page. Some validation errors for missing or superfluous closing tags have been fixed but there are various other errors still present such as missing alt attributes on images and self closed tags that are suitable for XHTML but not for HTML4 e.g. <br />.

Code HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!-- #BeginTemplate "depts.dwt" -->
<head>
<!-- #BeginEditable "doctitle" -->
<title>Danville Area Community College | Departments and Offices</title>
<!-- #EndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
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_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_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>
 
<style type="text/css">
.style1 {
    text-align: center;
}
.style2 {
    text-align: left;
}
td {border:1px red solid;}
</style>
 
</head> 
 
<body bgcolor="#003300" link="#666666" vlink="#CC9900" onLoad="MM_preloadImages('current2.jpg','departments2.jpg','foundation2.jpg','cce2.jpg','working2.jpg','about2.jpg','courses2.jpg','tuition2.jpg','athletics2.jpg','online2.jpg','future2.jpg','alumni2.jpg')">
 
<table width="747" border="0" align="center" cellpadding="0" cellspacing="0">
 
<tr> 
    <td width="213" height="105"><div align="right"><img src="../main1.jpg" width="212" height="176" border="0" usemap="#Map"></div></td>
    <td colspan="3"><img src="../working.jpg" width="533" height="176"></td>
  </tr>
 
<tr> 
    <td valign="top" bgcolor="#66FF99"> 
      <img src="../shadow.jpg" width="212" height="26" align="top">
        <p align="left"><font color="#006633" size="-2" face="Verdana, Arial, Helvetica, sans-serif"><strong><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image14','','../working2.jpg',1)"> 
          </a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','../cce2.jpg',1)"> 
          </a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','../foundation2.jpg',1)"> 
          </a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','../departments2.jpg',1)"> 
          </a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','../current2.jpg',1)"> 
          </a>
        <a href="../about/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','../about2.jpg',1)"><img src="../about1.jpg" name="Image6" width="212" height="21" border="0" align="top"></a><a href="/about/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','../about2.jpg',1)"><br>
          </a>
        <a href="../programs/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','../courses2.jpg',1)"><img src="../courses1.jpg" name="Image5" width="212" height="21" border="0" align="top"></a><br>
          <a href="../tuition/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image61','','../tuition2.jpg',1)"><img src="../tuition1.jpg" name="Image61" width="212" height="21" border="0" align="top" id="Image61"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image61','','../tuition2.jpg',1)"><br>
          </a><a href="../athletics" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image16','','../athletics2.jpg',1)"><img src="../athletics/athletics1.jpg" name="Image16" width="212" height="21" border="0" align="top"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','../athletics2.jpg',1)"><br>
          </a>
        <a href="../online/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','../online2.jpg',1)"><img src="../online1.jpg" name="Image8" width="212" height="21" border="0" align="top"></a><br>
          <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image14','','../working2.jpg',1)"> 
          </a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','../cce2.jpg',1)"> 
          </a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','../foundation2.jpg',1)"> 
          </a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','../departments2.jpg',1)"> 
          </a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','../current2.jpg',1)"> 
          </a>
        <a href="../futurestudents/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','../future2.jpg',1)"><img src="../future1.jpg" name="Image9" width="212" height="21" border="0" align="top"></a><a href="../futurestudents.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','../future2.jpg',1)"><br>
          </a>
        <a href="../currentstudents/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','../current2.jpg',1)"><img src="../current1.jpg" name="Image10" width="212" height="21" border="0" align="top"></a><a href="../currentstudents.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','../current2.jpg',1)"><br>
          </a>
        <a href="../depts/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','../departments2.jpg',1)"><img src="../departments1.jpg" name="Image11" width="212" height="21" border="0" align="middle"><br>
          </a>
        <a href="../foundation/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','../foundation2.jpg',1)"><img src="../foundation1.jpg" name="Image12" width="212" height="21" border="0" align="top"></a><a href="/foundation/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','../foundation2.jpg',1)"><br>
          </a>
        <a href="../cce/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','../cce2.jpg',1)"><img src="../cce1.jpg" name="Image13" width="212" height="21" border="0" align="top"></a><a href="/cce/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','../cce2.jpg',1)"><br>
          </a>
        <a href="../hr/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image14','','../working2.jpg',1)"><img src="../working1.jpg" name="Image14" width="212" height="21" border="0" align="top"></a><a href="../working.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image14','','../working2.jpg',1)"><br>
          </a>
        <a href="../alumni/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image15','','../alumni2.jpg',1)"><img src="../alumni1.jpg" name="Image15" width="212" height="21" border="0" align="top"></a></strong></font></p>
 
                  <p align="center"><a href="../jaguarspot/index.html">
          <img src="../jagspot.jpg" width="127" height="118" border="0" alt="The Jaguar Spot"></a><br>
          <font size="-1" face="Arial, Helvetica, sans-serif"><em>Click on the Spot to access<br>the Student Portal to Online Technology!</em></font></p>
 
<script language="JavaScript" type="text/javascript">
function goPage (newURL) {
       if (newURL != "") {
           if (newURL == "-" ) {
            resetMenu();            
        } else {  
               document.location.href = newURL;
           }
       }
}
</script>
 
<form name="quicklinks" action="">
<p align="center"><select name="quicklinks-list" size="1" id="quicklinks-list" onchange="goPage(this.options[this.selectedIndex].value)">
<option value="." selected="selected">Quicklinks</option>
<option value="/aac/">Advisement</option>
<option value="https://dacc.blackboard.com">Blackboard</option>
<option value="/catalog/">Catalog</option>
<option value="/courses">Course Descriptions</option>
<option value="https://webui.dacc.edu/wIntJava">Datatel Colleague</option>
<option value="http://mail.dacc.edu">Employee Email</option>
<option value="/finaid">Financial Aid</option>
<option value="/employees/?page=main">For Employees</option>
<option value="/jaguarspot">Jaguar Spot</option>
<option value="/library">Library</option>
<option value="/finaid/shortloan.html">NBS (formerly FACTS)</option>
<option value="http://partnerpage.google.com/students.dacc.edu">Student Gmail</option>
<option value="https://webadv.dacc.edu:8443/WebAdvisor/WebAdvisor">WebAdvisor</option>
</select></p>
</form>
 
       <form action="search_results.asp" method=post>
        <div class="style1">
        <font color="#006633" size="-1" face="Arial, Helvetica, sans-serif"><strong>
        <br />
        Search DACC</strong></font><br />
        <input type=text name="searchTerm" value="" /><br />
        <input type=submit value="Search" />
      </div>
      </form>
      </td>
 
<td width="25" valign="top" background="../line.jpg" bgcolor="#FFFFFF">&nbsp;</td>
 
<td width="481" valign="top" bgcolor="#FFFFFF"> <p align="center">
    &nbsp;</p>
<!-- #BeginEditable "depts" -->
    <p class="style2">
    <font size="-1"><strong>
    <font size="+1" face="Arial, Helvetica, sans-serif">Departments and Offices</font></strong></font></p>
      <p><font size="+1" face="Arial, Helvetica, sans-serif"><em>Academics</em></font><font size="-1" face="Arial, Helvetica, sans-serif"><br>
        <a href="stuserv/adulted/">Adult Education</a><br>
        <font color="#FFFFFF">.....</font><a href="stuserv/adulted/readersroute.html">Reader's 
        Route</a><br>
        Alternative Delivery<br>
        <font color="#FFFFFF">.....</font><a href="../online/">Online (Internet) Courses</a><br>
        <a href="inst/bus/">Business Division</a><br>
        <a href="../deved/">Developmental Education</a><br>
        <a href="inst/la/">Liberal Arts Division</a><br>
        <a href="../library/">Library</a><br>
        <a href="inst/sci/">Sciences Division</a><br>
        <font color="#FFFFFF">.....</font><a href="http://www.dacc.edu/~kjenkins/engineering.php" target="_blank">Coordinated 
        Engineering Program</a><br>
        <font color="#FFFFFF">.....</font><a href="inst/sci/sono/">Diagnostic Medical 
        Sonography</a><br>
        <font color="#FFFFFF">.....</font><a href="inst/sci/echo/">Echocardiography</a><br>
        <font color="#FFFFFF">.....</font><a href="inst/sci/hit/">Health Information 
        Technology</a><br>
        <font color="#FFFFFF">.....</font><a href="inst/sci/radtech/">Radiologic Technology</a><br>
        <font color="#FFFFFF">.....</font><a href="inst/sci/nursing/">School of Nursing</a><br>
        <a href="../scholars/">Scholars Program</a><br>
        <a href="inst/tech/">Technology and Information Systems Division</a><br>
        <br>
        <font size="+1"><em>Athletics</em></font><br>
        <a href="../athletics/">Athletics Home</a><br>
        <font color="#FFFFFF">.....</font><a href="../athletics/bb/">Baseball</a><br>
        <font color="#FFFFFF">.....</font><a href="../athletics/mbb/">Basketball (men's)</a><br>
        <font color="#FFFFFF">.....</font><a href="../athletics/wbb/">Basketball (women's)</a><br>
        <font color="#FFFFFF">.....</font><a href="../athletics/cc/">Cross-Country</a><br>
        <font color="#FFFFFF">.....</font><a href="../athletics/golf/">Golf</a><br>
        <font color="#FFFFFF">.....</font><a href="../athletics/soccer/">Soccer</a><br>
        <font color="#FFFFFF">.....</font><a href="../athletics/sb/">Softball</a><br>
        <font color="#FFFFFF">.....</font><a href="../athletics/vb/">Volleyball</a><br>
        <a href="../njcaa/">NJCAA National Basketball Tournament</a><br>
        <br>
        <font size="+1"><em>Services</em></font><br>
        <a href="../aac/">Academic Advisement and Counseling</a><br>
        <a href="../ar/">Admissions and Records/Registration</a><br>
        <a href="../bookstore/">Bookstore</a><br>
        <a href="../cns/">Computer and Network Services</a><br>
        <a href="../cce/">Corporate and Community Education (CCE)</a> <em>(formerly 
        B&amp;EI)</em><br>
        <a href="../fitness/">Fitness Center</a><br>
        <a href="../imc/">Instructional Media Center</a><br>
        <a href="/wib/main_site/jtp.html" target="_blank">Job Training Partnership</a><br>
        <a href="inst/pccs/">Partnerships for College and Career Success (PCCS)</a> 
        <em>(formerly Tech Prep)</em><br>
        <a href="../sbdc/">Small Business Development Center (SBDC)</a><br>
        <a href="stuserv/">Student Services</a><br>
        <font color="#FFFFFF">.....</font><a href="../aac/">Academic Advisement and Counseling</a><br>
        <font color="#FFFFFF">.....</font><a href="../ar/">Admissions and Records/Registration</a><br>
        <font color="#FFFFFF">.....</font><a href="stuserv/assess/">Assessment Center/Placement Tests</a><br>
        <font color="#FFFFFF">.....</font><a href="../career/">Career & Employment Services Center</a><br>
        <font color="#FFFFFF">.....</font><a href="stuserv/cdc/">Child Development Center</a><br>
        <font color="#FFFFFF">.....</font><a href="../finaid/">Financial Aid & Veteran's Educational Benefits</a><br>
        <font color="#FFFFFF">.....</font><a href="../ar/records.html">Records</a><br>
        <font color="#FFFFFF">.....</font><a href="stuserv/sda/">Student Diversity Advocate</a><br>
        <font color="#FFFFFF">.....</font><a href="../ssc/">Student Success Center:</a><br>
         <font color="#FFFFFF">..........</font><a href="../ssc/tutoring.html">Tutoring</a><br>
          <font color="#FFFFFF">..........</font><a href="../ssc/oa.html">Academic Accommodations for Students with Disabilities</a><br>
           <font color="#FFFFFF">..........</font><a href="../ssc/trio.html">TRiO Student Support Services</a><br>
         <a href="../veterans/">Veterans Multipurpose Employment Center</a><br>
<br>
        <font size="+1"><em>Administration</em></font><br>
        <a href="pres/">President's Office</a><br>
        <a href="admin/">Administration and Finance, Office of</a><br>
        <font color="#FFFFFF">.....</font><a href="admin/ads/">Administrative Data 
        Systems</a><br>
        <font color="#FFFFFF">.....</font><a href="admin/busoff/">Business Office</a><br>
        <font color="#FFFFFF">.....</font><a href="admin/campserv/">Campus Services</a><br>
        <font color="#FFFFFF">.....</font><a href="admin/graphics/">Graphics / Photocopying 
        Center</a><br>
        <font color="#FFFFFF">.....</font><a href="admin/pp/">Physical Plant / Maintenance</a><br>
        <a href="../cqi/">Continuous Quality Improvement</a><span lang="en-us"> (CQI)</span><br>
        <a href="../foundation/">Foundation</a><br>
        <a href="gp/">Grants and Planning</a><br>
        <a href="../hr/">Human Resources</a><br>
        <a href="inst/ier/">Institutional Effectiveness and Research</a><br>
        <a href="inst/">Instruction, Office of</a><br>
        <a href="mcr/">Marketing and College Relations</a><br>
        <br>
        <font size="+1"><em>Organizations</em></font><br>
        International Center</font></p>
      <p>&nbsp;</p>
      <!-- #EndEditable -->
      </td>
    <td width="28" valign="top" bgcolor="#FFFFFF"><img src="../spacer.jpg" width="28" height="28"></td>
  </tr>
</table>
 
<hr align="center" width="747">
 
<div style="text-align: center;">
<font size="-1" color="white" face="Arial, Helvetica, sans-serif">© 2011 Danville Area Community College · 2000 East Main Street · Danville, IL 61832-5199 · (217) 443-3222</font><br>
<span style="color: white;"><font size="-1" face="Arial, Helvetica, sans-serif">
<a href="../copyright.php" style="color: white;"><u>Copyright, Credits, Disclaimer</u></a> · 
<a href="http://www.nexlan.com" style="color: white;"><u>Hosted by NexLAN</u></a>
</font></span>
<br>
<span style="color: white; font-size: xx-small;"><font face="Arial, Helvetica, sans-serif">
<a href="http://iccbdbsrv.iccb.org/salarysearch/home.cfm" style="color:white;" target="_blank"><u>Illinois Community College System Annual Administrator and Faculty Salary and Benefits Portal</u></a></font></span>
 </div>
 
<p>&nbsp;</p>
<map name="Map">
  <area shape="rect" coords="56,43,160,147" href="../index.html">
</map>
</body>
<!-- #EndTemplate -->
</html>

**deathshadow60** · Nov 25, 2011 15:27

This may seem a bit harsh, but keep in mind I'm trying to help. I'm going to give you some advice that you may not want to hear, but it's the truth.

You appear to be saddled with horrifically outdated code circa 1997... compounded by the typical "javascript for nothing" mm_ functions from the nube predators known as Adobe. Given the presence of tags and attributes that have ZERO BUSINESS in HTML any time after the turn of the LAST decade such as FONT, CENTER, ALIGN, etc, etc... My advice would be to throw it all away and drag it kicking and screaming into THIS century. There is nothing there even worth trying to save there in terms of the code as it is nothing short of a miracle it renders even close to the same in any browser. It most certainly /FAIL/s miserably in terms of accessibility with the total lack of images off graceful degradation, px metric fonts, fixed width, and host of other issues.

Pitch it and start over using techniques from THIS century.

To give you a kick start example, here's the markup I'd probably be using for the 'departments and offices' page.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Departments and Offices - Danville Area Community College
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		Danville Area Community College
		<span><!-- image replacement --></span>
	</h1>
	
	<div id="columnWrapper">
		
		<div id="contentWrapper"><div id="content" class="departmentsAndOffices">
			<!-- double wrapper allows for more reliable content first columns -->
			<h2>Departments and Offices</h2>
			
			<h3>Academics</h3>
			<ul>
				<li>
					<a href="stuserv/adulted/">Adult Education</a>
					<ul>
						<li><a href="stuserv/adulted/readersroute.html">Reader's Route</a></li>
					</ul>
				</li><li>
					Alternative Delivery
					<ul>
						<li><a href="../online/">Online (Internet) Courses</a></li>
					</ul>
				</li><li>
					<a href="inst/bus/">Business Division</a>
				</li><li>
					<a href="../deved/">Developmental Education</a>
				</li><li>
					<a href="inst/la/">Liberal Arts Division</a>
				</li><li>
					<a href="../library/">Library</a>
				</li><li>
					<a href="inst/sci/">Sciences Division</a>
					<ul>
						<li>
							<a href="http://www.dacc.edu/~kjenkins/engineering.php">Coordinated Engineering Program</a>
						</li><li>
							<a href="inst/sci/sono/">Diagnostic Medical Sonography</a>
						</li><li>
							<a href="inst/sci/echo/">Echocardiography</a>
						</li><li>
							<a href="inst/sci/hit/">Health Information Technology</a>
						</li><li>
							<a href="inst/sci/radtech/">Radiologic Technology</a>
						</li><li>
							<a href="inst/sci/nursing/">School of Nursing</a>
						</li>
					</ul>
				</li><li>
					<a href="../scholars/">Scholars Program</a><br>
				</li><li>
					<a href="inst/tech/">Technology and Information Systems Division</a>
				</li>
			</ul>
			
			<h3>Athletics</h3>
			<ul>
				<li>
					<a href="../athletics/">Athletics Home</a>
					<ul>
						<li>
							<a href="../athletics/bb/">Baseball</a><br>
						</li><li>
							<a href="../athletics/mbb/">Basketball (men's)</a><br>
						</li><li>
							<a href="../athletics/wbb/">Basketball (women's)</a><br>
						</li><li>
							<a href="../athletics/cc/">Cross-Country</a><br>
						</li><li>
							<a href="../athletics/golf/">Golf</a><br>
						</li><li>
							<a href="../athletics/soccer/">Soccer</a><br>
						</li><li>
							<a href="../athletics/sb/">Softball</a><br>
						</li><li>
							<a href="../athletics/vb/">Volleyball</a><br>
						</li>
					</ul>
				</li><li>
					<a href="../njcaa/">NJCAA National Basketball Tournament</a>
				</li>
			</ul>
			
			<h3>Services</h3>
			<ul>
				<li>
					<a href="../aac/">Academic Advisement and Counseling</a>
				</li><li>
					<a href="../ar/">Admissions and Records/Registration</a>
				</li><li>
					<a href="../bookstore/">Bookstore</a>
				</li><li>
					<a href="../cns/">Computer and Network Services</a>
				</li><li>
					<a href="../cce/">Corporate and Community Education (CCE)</a>
					<em>(formerly B&amp;EI)</em>
				</li><li>
					<a href="../fitness/">Fitness Center</a>
				</li><li>
					<a href="../imc/">Instructional Media Center</a>
				</li><li>
					<a href="/wib/main_site/jtp.html">Job Training Partnership</a>
				</li><li>
					<a href="inst/pccs/">Partnerships for College and Career Success (PCCS)</a>
					<em>(formerly Tech Prep)</em>
				</li><li>
					<a href="../sbdc/">Small Business Development Center (SBDC)</a>
				</li><li>
					<a href="stuserv/">Student Services</a>
					<ul>
						<li>
							<a href="../aac/">Academic Advisement and Counseling</a>
						</li><li>
							<a href="../ar/">Admissions and Records/Registration</a>
						</li><li>
							<a href="stuserv/assess/">Assessment Center/Placement Tests</a>
						</li><li>
							<a href="../career/">Career & Employment Services Center</a>
						</li><li>
							<a href="stuserv/cdc/">Child Development Center</a>
						</li><li>
							<a href="../finaid/">Financial Aid & Veteran's Educational Benefits</a>
						</li><li>
							<a href="../ar/records.html">Records</a>
						</li><li>
							<a href="stuserv/sda/">Student Diversity Advocate</a>
						</li><li>
							<a href="../ssc/">Student Success Center:</a>
							<ul>
								<li>
									<a href="../ssc/tutoring.html">Tutoring</a>
								</li><li>
									<a href="../ssc/oa.html">Academic Accommodations for Students with Disabilities</a>
								</li><li>
									<a href="../ssc/trio.html">TRiO Student Support Services</a>
								</li>
							</ul>
						</li>
					</ul>
				</li><li>
					<a href="../veterans/">Veterans Multipurpose Employment Center</a>
				</li>
			</ul>
			
			<h3>Administration</h3>
			<ul>
				<li>
					<a href="pres/">President's Office</a>
				</li><li>
					<a href="admin/">Administration and Finance, Office of</a>
					<ul>
						<li>
							<a href="admin/ads/">Administrative Data Systems</a>
						</li><li>
							<a href="admin/busoff/">Business Office</a>
						</li><li>
							<a href="admin/campserv/">Campus Services</a>
						</li><li>
							<a href="admin/graphics/">Graphics / Photocopying Center</a>
						</li><li>
							<a href="admin/pp/">Physical Plant / Maintenance</a>
						</li>
					</ul>
				</li><li>
					<a href="../cqi/">Continuous Quality Improvement</a><span lang="en-us"> (CQI)</span>
				</li><li>
					<a href="../foundation/">Foundation</a>
				</li><li>
					<a href="gp/">Grants and Planning</a>
				</li><li>
					<a href="../hr/">Human Resources</a>
				</li><li>
					<a href="inst/ier/">Institutional Effectiveness and Research</a>
				</li><li>
					<a href="inst/">Instruction, Office of</a>
				</li><li>
					<a href="mcr/">Marketing and College Relations</a>
				</li>
			</ul>
			
			<h3>Organizations</h3>
			<ul>
				<li>
					International Center
				</li>
			</ul>
			
		<!-- #content, #contentWrapper --></div></div>
		
		<div id="sideBar">
			
			<ul id="mainMenu">
				<li><a href="#">About DACC</a></li>
				<li><a href="#">Courses and Programs</a></li>
				<li><a href="#">Tuitions and Fees</a></li>
				<li><a href="#">Athletics</a></li>
				<li><a href="#">DACC Online</a></li>
				<li><a href="#">Future Students</a></li>
				<li><a href="#">Current Students</a></li>
				<li><a href="#">Departments and Offices</a></li>
				<li><a href="#">DACC Foundation</a></li>
				<li><a href="#">Corporate &amp; Community Education</a></li>
				<li><a href="#">Working at DACC</a></li>
				<li><a href="#">Alumni</a></li>
			</ul>
			
			<a href="/jaguarspot/index.html" class="spotLink">
				<img
					src="/images/jagspot.jpg"
					width="127" height="118"
					alt="The Jaguar Spot"
					class="plate"
				/>
				Click on the Spot to access<br>the Student Portal to Online Technology!
			</a>
			
			<!-- I would use CSS to make this a flyout menu instead of the select with .js -->
			
			<div id="quickLinks">
				QuickLinks
				<ul>
					<li>
						<a href="/aac/">Advisement</a>
					</li><li>
						<a href="https://dacc.blackboard.com">Blackboard</a>
					</li><li>
						<a href="/catalog/">Catalog</a>
					</li><li>
						<a href="/courses">Course Descriptions</a>
					</li><li>
						<a href="https://webui.dacc.edu/wIntJava">Datatel Colleague</a>
					</li><li>
						<a href="http://mail.dacc.edu">Employee Email</a>
					</li><li>
						<a href="/finaid">Financial Aid</a>
					</li><li>
						<a href="/employees/?page=main">For Employees</a>
					</li><li>
						<a href="/jaguarspot">Jaguar Spot</a>
					</li><li>
						<a href="/library">Library</a>
					</li><li>
						<a href="/finaid/shortloan.html">NBS (formerly FACTS)</a>
					</li><li>
						<a href="http://partnerpage.google.com/students.dacc.edu">Student Gmail</a>
					</li><li>
						<a href="https://webadv.dacc.edu:8443/WebAdvisor/WebAdvisor">WebAdvisor</a>
					</li>
				</ul>
			<!-- #quickLinks --></div>
			
			<form action="search_results.asp" method="post" id="searchDACC">
				<fieldset>
					<label for="searchTerm">Search DACC</label>
					<input type="text" name="searchTerm" id="searchTerm" value="" />
					<input type="submit" value="Search" class="submit" />
				</fieldset>
			</form>
			
		<!-- #sideBar --></div>
		
	<!-- #columnWrapper --></div>
	
	<div id="footer">
		&copy; 2011 Danville Area Community College &bull;
		2000 East Main Street &bull;
		Danville, IL 61832-5199 &bull;
		(217) 443-3222<br />
		
		<a href="../copyright.php">Copyright, Credits, Disclaimer</a> &bull;
		<a href="http://www.nexlan.com">Hosted by NexLAN</a><br />
		
		<a href="http://iccbdbsrv.iccb.org/salarysearch/home.cfm" class="benefits">
			Illinois Community College System Annual Administrator and Faculty Salary and Benefits Portal
		</a>
	<!-- #footer --></div>
	
<!-- #pageWrapper --></div>
	
</body></html>

Which throws about six k of your code away... EVERYTHING else you are doing there I'd be doing in the CSS; I don't even see a legitimate reason for that page to even have javascript, unless you still care about IE6 (and then I'd use a HTC file instead of abusing a form element)...

If I have time and the mood strikes me, I'll toss together the CSS I'd be pairing with that. No promises on that though, 'tis the long weekend.

**deathshadow60** · Nov 25, 2011 17:05

... and here's what I came up with:

http://www.cutcodedown.com/for_other.../template.html

The directory is open for easy access to the gooey bits and pieces:

http://www.cutcodedown.com/for_others/inky1231

Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for the inclusion of a couple IE specific properties... tested working in the latest iterations of every major browser, and every version of Internet Explorer all the way back to IE 5.5.

To compare:

Your original page:
17k HTML
0k external CSS
164k in Images
181k in 19 files total.

This rewrite:
9k HTML
4k external CSS
51k in Images
64k in 6 files total.

Functionally identical (or at least close enough for government work), one third the size.

The layout methods used to build that page lack any sort of cross browser differences... as opposed to the outdated table based train wreck you were trying to work with... and look ma, no javascript (unless you count the .htc that's sent to IE6 and lower).

**Inky1231** · Dec 12, 2011 12:36

Originally Posted by deathshadow60

This may seem a bit harsh, but keep in mind I'm trying to help. I'm going to give you some advice that you may not want to hear, but it's the truth.

You appear to be saddled with horrifically outdated code circa 1997... compounded by the typical "javascript for nothing" mm_ functions from the nube predators known as Adobe. Given the presence of tags and attributes that have ZERO BUSINESS in HTML any time after the turn of the LAST decade such as FONT, CENTER, ALIGN, etc, etc... My advice would be to throw it all away and drag it kicking and screaming into THIS century. There is nothing there even worth trying to save there in terms of the code as it is nothing short of a miracle it renders even close to the same in any browser. It most certainly /FAIL/s miserably in terms of accessibility with the total lack of images off graceful degradation, px metric fonts, fixed width, and host of other issues.

Pitch it and start over using techniques from THIS century.

Which throws about six k of your code away... EVERYTHING else you are doing there I'd be doing in the CSS; I don't even see a legitimate reason for that page to even have javascript, unless you still care about IE6 (and then I'd use a HTC file instead of abusing a form element)...

If I have time and the mood strikes me, I'll toss together the CSS I'd be pairing with that. No promises on that though, 'tis the long weekend.

I agree with you that the code is outdated, up until September there was only one person working on maintaining these pages which were created by a third party who was more about print design rather than web design. There is now the Sr. Person , myself and a student trying to play catch up. Eventually I hope to revamp the whole site completely, right now I am just trying for more user friendly. I agree with you about IE but unfortunately we HAVE to support IE, this is an order from on high, hence the Javascript.

**Inky1231** · Dec 12, 2011 12:39

Originally Posted by Victorinox

It's a while since I've worked with table based layouts but maybe this'll help.

Ideally you'd switch to a CSS layout but if circumstances are restricting you to tweaking tables here's a suggestion for simplifying the structure.

In the source code, the sidebar currently resides in a tr below the tr containing the main content area. When working with tables for layout it tends to be easier to mark up elements in the order in which they are intended to be rendered, so the sidebar td could be in the same tr as the main content and preceding it. This would make the sidebar and content a simple two cell structure with no rowspan jiggery-pokery required. In brief:

Sorry it took me so long to reply. I was on a trip when you posted and last week was playing catch up at work. I will try this fix as soon as possible. It is a complete annoyance to inherit such a piece of junk set-up.

User Tag List

Thread: Sidebar menu drift

Thread Tools

Display

Sidebar menu drift

Bookmarks

Bookmarks

Posting Permissions