Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ HTML table warriors

Posted by: russ Jun 1 2007, 10:36 AM

I'm doing a website for a friend but I'm totally out of the mix in web design these days and have forgotten all of the basic stuff.

My problem at the moment is tables, for some reason the tr tags seem to be adding a small space on the table on IE, but it looks perfect in firefox. I have all cell paddings/borders/spacing set to zero. Anything I'm missing out?

I've thought about using CSS but I don't have the time to learn something new. Any help would be cool

I've just uploaded the site here for testing purposes whilst I'm getting it just right.

http://damnably.50webs.com/


Here's the code.

CODE
<html>
<head>
<title>DAMNABLY presents... news</title>
<style type="text/css">
body
{
        background-image: url('images/bg_pattern.gif');
        background-repeat: repeat;
        background-attachment: fixed;
    scrollbar-face-color:FFFFFF;
    scrollbar-highlight-color:FFFFFF;
    scrollbar-3dlight-color:6699cc;
    scrollbar-shadow-color:FFFFFF;
    scrollbar-darkshadow-color:6699cc;
    scrollbar-arrow-color:ffcc66;
    scrollbar-track-color:FFFFFF;
}
.title {
    font-family: Tahoma;
    font-size: 11px;
    color: 6699cc;
    font-weight: bold;
        text-transform: uppercase;
}
.text {
    font-family: Tahoma;
    font-size: 10px;
    color: 000000;
    font-weight: none;
    font-style: normal;
    text-decoration: none;
}
a {
    font-family: Tahoma;
    font-size: 10px;
    color: 6699cc;
    font-weight: bold;
    font-style: normal;
        text-decoration: none;

}
a:visited {
    font-family: Tahoma;
    font-size: 10px;
    color: 6699cc;
    font-weight: bold;
    font-style: normal;
        text-decoration: none;

}
a:hover {
    font-family: Tahoma;
    font-size: 10px;
    color: ffcc66;
    font-weight: bold;
    font-style: normal;
        text-decoration: none;
}
a.music {
    font-family: Tahoma;
    font-size: 10px;
    color: 6699cc;
    font-weight: none;
    font-style: normal;
        text-decoration: none;
}
a:visited.music {
    font-family: Tahoma;
    font-size: 10px;
    color: 6699cc;
    font-weight: none;
    font-style: normal;
        text-decoration: none;

}
a:hover.music {
    font-family: Tahoma;
    font-size: 10px;
    color: ffcc66;
    font-weight: none;
    font-style: normal;
        text-decoration: none;
}

</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>
<center>

<table width=650 valign=top cellpadding=0 border=0 cellspacing=0>

<tr cellpadding=0 border=0 cellspacing=0>
<td valign=top width=650 cellpadding=0 border=0 cellspacing=0>
<img src="images/top.jpg">

</td>
</tr>

<tr cellpadding=0 border=0 cellspacing=0>
<td cellpadding=0 border=0 cellspacing=0 valign=top>
<img src="images/top_02.jpg">
</td></tr>

<tr cellpadding=0 border=0 cellspacing=0>
<td valign=top cellpadding=0 border=0 cellspacing=0>

<table cellpadding=0 border=0 cellspacing=0 valign=top>
<tr valign=top cellpadding=0 border=0 cellspacing=0>
<td><img src="images/top_03.jpg"></td>

<td><a href="#" onMouseOut="MM_swapImgRestore()"

onMouseOver="MM_swapImage('news','','images/hover_04.jpg',1)"><img src="images/top_04.jpg"

border=0 name=news></a></td>

<td><a href="#" onMouseOut="MM_swapImgRestore()"

onMouseOver="MM_swapImage('shows','','images/hover_05.jpg',1)"><img src="images/top_05.jpg"

border=0 name=shows></a></td>

<td><a href="#" onMouseOut="MM_swapImgRestore()"

onMouseOver="MM_swapImage('releases','','images/hover_06.jpg',1)"><img

src="images/top_06.jpg" border=0 name=releases></a></td>

<td><a href="#" onMouseOut="MM_swapImgRestore()"

onMouseOver="MM_swapImage('media','','images/hover_07.jpg',1)"><img src="images/top_07.jpg"

border=0 name=media></a></td>

<td><a href="#" onMouseOut="MM_swapImgRestore()"

onMouseOver="MM_swapImage('forum','','images/hover_08.jpg',1)"><img src="images/top_08.jpg"

border=0 name=forum></a></td>

<td><a href="#" onMouseOut="MM_swapImgRestore()"

onMouseOver="MM_swapImage('links','','images/hover_09.jpg',1)"><img src="images/top_09.jpg"

border=0 name=links></a></td>

<td><a href="#" onMouseOut="MM_swapImgRestore()"

onMouseOver="MM_swapImage('contact','','images/hover_10.jpg',1)"><img

src="images/top_10.jpg" border=0 name=contact></a></td>

<td><img src="images/top_11.jpg"></td></tr></table>

</td></tr>

<table cellpadding=0 border=0 cellspacing=0>
<tr cellpadding=0 border=0 cellspacing=0><td width=40 bgcolor=6699cc cellpadding=0 border=0

cellspacing=0></td>

<td width=570 cellpadding=2>


<div align=right><a href="#" class=music>Launch Music Player</a></div>
<font class=title>Some news</font>
<br><font class=text>Today there was some news about some stuff. Awesome, eh? Yeah I thought

so ya prick.
<BR>In other news I blew up a baby with a firework, set fire to my nan and ate out Jordan.
<br>Posted by <a href="mailto:george@damnably.com">George</a></font>


<p><font class=title>Some News</font>
<br><font class=text>Today there was some news about some stuff. Awesome, eh? Yeah I thought

so ya prick.
<BR>In other news I blew up a baby with a firework, set fire to my nan and ate out Jordan.
<br>Posted by <a href="mailto:george@damnably.com">George</a></font>

<p><font class=title>Some news</font>
<br><font class=text>Today there was some news about some stuff. Awesome, eh? Yeah I thought

so ya prick.
<BR>In other news I blew up a baby with a firework, set fire to my nan and ate out Jordan.
<br>Posted by <a href="mailto:george@damnably.com">George</a></font></td>

<td width=40 bgcolor=6699cc cellpadding=0 border=0 cellspacing=0></td>
</tr></table>

<tr cellpadding=0 border=0 cellspacing=0>
<td width=650 cellpadding=0 border=0 cellspacing=0><img src="images/bottom.jpg">
</td></tr></table>


</center>
</body>
</html>

Posted by: russ Jun 1 2007, 10:59 AM

Actually, I managed to get it all done barring the bottom one. It just won't shift.

Posted by: Darin McGrew Jun 1 2007, 11:18 AM

I recommend that you start by fixing the http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A%2F%2Fdamnably.50webs.com%2F&warnings=yes and http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fdamnably.50webs.com%2F&warning=1&profile=css21&usermedium=all reported by the online tools. Among other things, you've omitted the number-sign character in front of a lot of hex color codes (e.g., 6699cc should be #6699cc) and your table structure is broken in places.

Posted by: russ Jun 1 2007, 12:38 PM

I've cleaned up some of the errors though I don't really know what to do in this case

"Error: required attribute ALT not specified"

Other than that I can't find any other errors.

Posted by: russ Jun 1 2007, 12:48 PM

Completely fixed now. Thanks for the help and advice.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)