PDA

View Full Version : Help with table coding.



ingeborgh
Dec 11th, 2008, 08:23 PM
I know the most of you are against tables for layouts, but I'm asking for your help on this anyway, and I hope some kind soul will spend some valuable four minutes on taking a look at my layout and explain WHY the green (right) area won't adjust to the height of the white area. :o Thank you so much in advance.

Website: http://ny.ingeborgh.com

View source

jerry62704
Dec 11th, 2008, 08:33 PM
Hopefully, you will spend four minutes of your time correcting the errors on your page.

#1 put in a DOCTYPE. Finding an error is much harder when the page isn't valide from the start.

#2 lacking a DOCTYPE, browsers must guess how they will present the page, and different ones use different guesses.

BoldUlysses
Dec 11th, 2008, 08:39 PM
Jerry is right. Regardless of whether or not you use tables for layout, add a DOCTYPE (http://www.alistapart.com/stories/doctype/) and validate that page (http://validator.w3.org/)!

oesxyl
Dec 11th, 2008, 08:44 PM
I know the most of you are against tables for layouts, but I'm asking for your help on this anyway, and I hope some kind soul will spend some valuable four minutes on taking a look at my layout and explain WHY the green (right) area won't adjust to the height of the white area. :o Thank you so much in advance.

Website: http://ny.ingeborgh.com

View source
missing doctype, as jerry62704 said and invalid markup as w3c validator said:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fny.ingeborgh.com%2F

is worst then using tables for layout, :)
I'm sorry but is hard to fix your problem if you don't fix this two.

sorry msuffern, I edit my post and don't know about yours
regards

jerry62704
Dec 11th, 2008, 08:52 PM
BTW, you code lacked several closing and at least one opening tag for the tables. If you don't know tables, don't use them. Learn to use div and css instead.

Your menu, for example, could be reduced from a formatted 46 lines of code to about 10 lines of code. I formatted your code here:


<html>
<head>
<!-- #BeginEditable "doctitle" -->
<title>ingeborgh.com</title>
<!-- #EndEditable -->
<META NAME="description" CONTENT=""><META NAME="keywords" CONTENT="">

<style type="text/css">
body {
background-color: #5c5c5c;
margin: 0;
border: 0;
}

.linkeffect {
text-decoration:none; color:#FF33FF
}
.linkeffect:hover {
text-decoration:underline; color:#0099FF
}
.headerlinx {
text-decoration:none; color:#0099FF
}
.headerlinx:hover {
text-decoration:none; color:#0099FF
}

a {
text-decoration: none;
}

a:hover {
color: #ffffff;
text-decoration: none;
}

a:visited {
color: #ffffff;
text-decoration: none;
}
</style>
</head>

<body>


<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="130" width="50">&nbsp;
</td>
</tr>
</table>


<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="14" bgcolor="#ffffff">
</td>
<td width="14">
<img src="images/top-right.jpg" width="14" height="14" alt=""><
/td>
</tr>
<tr>
<td align="left" bgcolor="#ffffff" width="586" valign="top">
<iframe src="blog/11-12-08.htm" height="370" width="575" name="frame"
marginwidth="20" marginheight="20" scrolling="no" frameborder="0">
</iframe>
</td>

<td width="14" bgcolor="#ffffff">
</td>

<td rowspan="3" align="left" bgcolor="#5c5c5c" width="128" valign="">
<img src="images/between.jpg" alt="">
</td>

<td align="center" rowspan="3" bgcolor="#a5cb53">
<table width="100%" rowspan="3" cellspacing="0" cellpadding="0">
<tr>
<td width="14">
<img src="images/top-left.jpg" width="14"
height="14" border="0" alt="...">
</td>

<td height="14"></td>
</tr>
<tr>
<td></td>
<td height=359>
<div align=right>
<img src="images/green.jpg" border="0" alt="">
</div>
</td>

<td></td>
</tr>
<tr>
<td>
<img src="images/bottom-left.jpg" width="14" height="14"
alt="...">
</td>

<td align="right">
<img src="images/greenbottom.jpg" alt="" border="0">
</td>
</table>
</td>
</tr>
<tr>
<td height="14" bgcolor="#ffffff"></td>

<td>
<img src="images/bottom-right.jpg" width="14" height="14"
border="0" alt="...">
</td>
</tr>
</table>

<!-- #EndEditable -->

<table width="100%" cellspacing="0" cellpadding="4">
<tr>
<td align="right">
&nbsp; &nbsp;
<a href="design.htm" target="frame">
<font color="#a5cb53" style="font-size:8px;" face="Verdana, Arial, Helvetica, sans-serif">
.DESIGN
</font></a>
&nbsp; &nbsp;
<a href="ingeborgh.htm" target="frame">
<font color="#de933a" style="font-size:8px;" face="Verdana, Arial, Helvetica, sans-serif">
.COM
</font></a>
&nbsp; &nbsp;
<a href="oss.htm" target="frame">
<font color="#929292" style="font-size:8px;" face="Verdana, Arial, Helvetica, sans-serif">
.OSS
</font></a>
&nbsp; &nbsp;
<a href="diverse.htm" target="frame">
<font color="#ffffff" style="font-size:8px;" face="Verdana, Arial, Helvetica, sans-serif">
.DIV
</font></a>
&nbsp; &nbsp;
<a href="blog/11-12-08.htm" target="frame">
<font color="#000" style="font-size:8px;" face="Verdana, Arial, Helvetica, sans-serif">
.BLOG
</font></a>
&nbsp; &nbsp;
<a href="e" target="frame">
<font color="#ffa2ea" style="font-size:8px;" face="Verdana, Arial, Helvetica, sans-serif">
.E
</font></a>
&nbsp; &nbsp;
</td>
</tr>
</table>
</body>
</html>

By spacing it like that, the missing tags were pretty obvious.

ingeborgh
Dec 11th, 2008, 09:10 PM
Thank you, I know about the validation part. Was supposed to do it, the site isn't really public yet though. But obviously it's important to fix the problem. Thank you for using some minutes of your valuable time! I will, and have, definitely used some of mine. :o

jerry62704
Dec 11th, 2008, 10:08 PM
Just as an example, here is the menu using your tables:

<table width="100%" cellspacing="0" cellpadding="4">
<tr>
<td align="right">
&nbsp; &nbsp;
<a href="design.htm" target="frame">
<font color="#a5cb53" style="font-size:8px;" face="Verdana, Arial, Helvetica, sans-serif">
.DESIGN
</font></a>
&nbsp; &nbsp;
<a href="ingeborgh.htm" target="frame">
<font color="#de933a" style="font-size:8px;" face="Verdana, Arial, Helvetica, sans-serif">
.COM
</font></a>
&nbsp; &nbsp;
<a href="oss.htm" target="frame">
<font color="#929292" style="font-size:8px;" face="Verdana, Arial, Helvetica, sans-serif">
.OSS
</font></a>
&nbsp; &nbsp;
<a href="diverse.htm" target="frame">
<font color="#ffffff" style="font-size:8px;" face="Verdana, Arial, Helvetica, sans-serif">
.DIV
</font></a>
&nbsp; &nbsp;
<a href="blog/11-12-08.htm" target="frame">
<font color="#000" style="font-size:8px;" face="Verdana, Arial, Helvetica, sans-serif">
.BLOG
</font></a>
&nbsp; &nbsp;
<a href="e" target="frame">
<font color="#ffa2ea" style="font-size:8px;" face="Verdana, Arial, Helvetica, sans-serif">
.E
</font></a>
&nbsp; &nbsp;
</td>
</tr>
</table>


37 lines as fomatted. Here is the functional equivalent using lists and css:

<style type="text/css">
ul {list-style-type: none;}
li {font-family: Veranda, Arial, Helvetica, san-serif;
font-size: 8px;}
.design {color: #a5cb53;}
.com {color: #de933a;}
.oss {color: #929292;}
.div {color: #ffffff;}
.blog {color: #000000;}
.e {color: #ffa2ea;}
</style>

<ul>
<li><a href="design.htm" target="frame"> .DESIGN</a>
<li><a href="ingeborgh.htm" target="frame"> .COM</a>
<li><a href="oss.htm" target="frame"> .OSS</a>
<li><a href="diverse.htm" target="frame"> .DIV</a>
<li><a href="blog/11-12-08.htm" target="frame"> .BLOG</a>
<li><a href="e" target="frame"> .E</a>
</ul>

20 lines and it does the same thing. Which do you think will be easier to modify somewhere down the road?