Forum Moderators: open
<html>
<head>
<title>layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>
</head>
<body bgcolor="#89CEFF" background="images/bg4.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages()">
<table width="700" height="11%" border="0" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="2" rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','images/layout_over_01.gif',1)"><img src="images/layout_01.gif" alt="Home" name="home" width="147" height="171" border="0"></a> </td>
<td width="557" height="49" align="left" valign="top"> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('fishtourn','','images/layout_over_02.gif',1)"><img src="images/layout_02.gif" alt="Fishing Tournaments" name="fishtourn" width="298" height="49" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('howto','','images/layout_over_03.gif',1)"><img src="images/layout_03.gif" alt="How to Join?" name="howto" width="255" height="49" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('calendar','','images/layout_over_04.gif',1)"><img src="images/layout_04.gif" alt="Event Calendar" name="calendar" width="238" height="70" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('classifieds','','images/layout_over_05.gif',1)"><img src="images/layout_05.gif" alt="Classified Ads" name="classifieds" width="223" height="70" border="0"></a><img src="images/layout_06.gif" width="92" height="70"></td>
</tr>
<tr>
<td height="17"></td>
</tr>
</table>
<table id="Table_02" width="700" height="80%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="132" height="225" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('gallery','','images/layout_over_08.gif',1)"><img src="images/layout_08.gif" alt="Image Gallery" name="gallery" width="132" height="37" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('gentourn','','images/layout_over_10.gif',1)"><img src="images/layout_10.gif" alt="General Tournaments" name="gentourn" width="132" height="41" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('IBRAmem','','images/layout_over_11.gif',1)"><img src="images/layout_11.gif" alt="I.B.R.A. Membership" name="IBRAmem" width="132" height="47" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('bod','','images/layout_over_12.gif',1)"><img src="images/layout_12.gif" alt="Board of Directors" name="bod" width="132" height="45" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('bylaws','','images/layout_over_13.gif',1)"><img src="images/layout_13.gif" alt="By Laws" name="bylaws" width="132" height="29" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('about','','images/layout_over_14.gif',1)"><img src="images/layout_14.gif" alt="About Us" name="about" width="132" height="26" border="0"></a></td>
<td width="568" colspan="5" rowspan="2"><p><strong><font color="#FFFFFF" face="Arial, Helvetica, sans-serif">This
is a test of the area to see how this will be looking,<br>
Domain this </font></strong></p>
<p><strong><font color="#FFFFFF" face="Arial, Helvetica, sans-serif">This
is a test of the area to see how this will be looking,<br>
Domai</font></strong></p>
</td>
</tr>
<tr>
<td height="100%" valign="bottom" background="images/layout_15.gif"><img src="images/layout_16.gif" alt="" width="132" height="180" align="top"> </td>
</tr>
</table>
</body>
</html>
[edited by: encyclo at 12:35 am (utc) on Aug. 2, 2005]
[edit reason] Fixed sideways scroll [/edit]
<td>
it still has a space between the side of the image
Not seeing that - no spaces on either side of any image now. Maybe I'm not understanding where you see unwanted space?
Standards/Quirks issues can definitely mess with the space around images -- especially inside table cells.
does the DTD thing apply always like when I turn this all into php?
the gap is between the two colums on the top table, it leaves a small gap between the image 'layout_01; home' image (1st <td>) which is as tall as the 'layout_02; fishtourn' and 'layout_04; calendar' images stacked (2nd <td>).
Thansk
does the DTD thing apply always like when I turn this all into php?
Definitely. No matter what goes on to create an html document before it is served, the browsers will look to the DTD at the top of the final document for their rendering mode.
the gap is between the two colums on the top table
The problem seems to come from the colspan="2" attribute in the first <td> of Table_01. There is no second <td> in either table row, so there are not two columns to "span" -- but apparently IE is "saving" a 1 pixel space to account for the colspan attribute.
