Forum Moderators: open
<HTML>
<HEAD>
<TITLE>nav</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #CCCCCC;
}
.style1 {
color: #000000;
font-style: italic;
font-weight: bold;
}
.style2 {color: #CCCCCC}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCCCCC;
}
a:hover {
text-decoration: underline;
}
a#home{
width:78px;
height: 53px;
background: url(images/nav_01-sel.jpg);
}
a#home:hover{
width:78px;
height: 53px;
background: url(images/nav_01-over.jpg);
}
a#about{
width:80px;
height: 53px;
background: url(images/sturgeonnavi.jpg);
}
a#about:hover{
width:80px;
height: 53px;
background: url(images/sturgeonnavi-over.jpg);
}
a#programs{
width:117px;
height: 53px;
background: url(images/nav_03.jpg);
}
a#programs:hover{
width:117px;
height: 53px;
background: url(images/nav_03-over.jpg);
}
a#research{
width:100px;
height: 53px;
background: url(images/nav_04.jpg);
}
a#research:hover{
width:100px;
height: 53px;
background: url(images/nav_04-over.jpg); }
a#events{
width:80px;
height: 53px;
background: url(images/nav_05.jpg);
}
a#events:hover{
width:80px;
height: 53px;
background: url(images/nav_05-over.jpg);}
a#media{
width:81px;
height: 53px;
background: url(images/nav_06.jpg);
}
a#media:hover{
width:81px;
height: 53px;
background: url(images/nav_06-over.jpg);}
a#donate{
width:94px;
height: 53px;
background: url(images/nav_07.jpg);
}
a#donate:hover{
width:95px;
height: 53px;
background: url(images/nav_07-over.jpg);
}
a#shop{
width:98px;
height: 53px;
background: url(images/nav_08.jpg);
}
a#shop:hover{
width:98px;
height: 53px;
background: url(images/nav_08-over.jpg);
}
.style4 {color: #000000; }
-->
</style>
<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 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();MM_preloadImages('images/sturgeonsongon.jpg')">
<table width="755" border="1" cellspacing="1" cellpadding="1" align="center" height="1027">
<tr>
<td height="129" align="left" valign="top" bordercolor="#666699" bgcolor="#5C88A1" background="images/autumnbkg.jpg"><div align="center"><img src="images/mastj.jpg" width="800" height="137" align="texttop"></div></td>
</tr>
<tr>
<td height="881" align="left" valign="top" bordercolor="#666699" bgcolor="#5C88A1" background="images/bluebkg.jpg"><table width="544" border="0" cellspacing="0" cellpadding="0" align="center" height="749">
<tr height="322">
<td height="43" align="left" valign="top"><TABLE ID="Table_01" WIDTH=630 HEIGHT=53 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD width="74"><a id="home" href="home.html" target="_self"></a></TD>
<TD width="60"><a id="about" href="about.html" target="_self"></a></TD>
<TD width="65"><a id="programs" href="programs.html" target="_self"></a></TD>
<TD width="77"><a id="research" href="research.html" target="_self"></a></TD>
<TD width="85"><a id="events" href="events.html" target="_self"></a></TD>
<TD width="94"><a id="media" href="media.html" target="_self"></a></TD>
<TD width="65"><a id="donate" href="donate.html" target="_self"></a></TD><br>
<TD><a id="shop" href="shop.html" target="_self"></a></TD>
<TD width="110"> </TD>
</TR>
[edited by: tedster at 7:20 am (utc) on Sep. 5, 2009]
[edit reason] removed identifying details [/edit]
1) Your markup will work, but a lot of the HTML is ancient and the table is using deprecated attributes, such as align, width, height.....
2) I would declare a current DTD (which will allow code validation - a very smart thing to do) and recode - which isn't to say that it can't be made to work as is. IF recoded, I would drop the table and probably use <ul> wrapped in <div> container.
3) Stripping all of the widths out of the <tds> should 'fix' Firefox and Opera and should answer the question that you have asked. Everything else here are 'bonus' comments (even if unsolicited.) Do you need the last <td> hack at all?
4) You may still have centering issues to resolve in IE if that is a goal.
4) Can't recommend designing in IE. Design in the good stuff - then fix for IE. Life will be a lot easier.
5) target is deprecated in HTML4 and is there any point to target="self"? This is an instruction to load the linked page in the same window and/or frame that the user is already on. Essentially, it equals not specifying target at all. This is old, old, markup - going back to when framing was a hot thing.
6) In the CSS, which is current and basically in pretty good shape:
A) I shorthand colors where possible and believe lowercase to be 'best practice' - but it will work just fine the way it is:
a:visited {
color: #ccc;
}
B) When you declare, for example, width: 78px; and height: 53px; on a#home, there is no need to repeat the declaration on a#homehover - it will carry through :visited, :hover, and :active
C) Looks like you are using images for :hovers. This is fine, if it loads fast - otherwise there could be blip between the hover, and the display of the image. One option is to preload the images. Another option is to use one image with both the default and hover states, and then reposition the image on :hover. Using one image and positioning is just another way of preloading the :hover image so that it will show immediately.
