homepage Welcome to WebmasterWorld Guest from 54.227.20.250
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Tables not cooperating >.<
Error no one can figure out...
Echo_Tyme

10+ Year Member



 
Msg#: 8552 posted 7:59 am on Aug 22, 2004 (gmt 0)

This is the weirdest thing and NO ONE can figure it out... The center and right table are "sticking together" I have tried to div align and table align the right table to go RIGHT... but it does'nt budge... i've tried centering (stays still), i've tried to make the middle table smaller (the right comes with it) i've made them all go center (no difference)... How the heck am I supposed to fix this? It WILL NOT END it's the WEIRDEST thing.

(Note: This is taken from the browser source, this is what the browser is seeing).

---Code---

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>MM Version 5 Demo&nbsp;&nbsp;&nbsp;Version 5 Evolution</title>
<link rel="stylesheet" href="mmcss2.css" type="text/css">
</head>
<body>

<!--
A DHTML Website Navigation Menu Version 5.0+
Copyright 2004 (c) Some Solutions Limited (UK). All Rights Reserved.
-->

<script type="text/javascript" src="/menu2/src.js"></script>
<scripttype="text/javascript">

if(ns4)_d.write("<script language=JavaScript src=/menu2/mmenuns4.js><\/script>");
else _d.write("<script language=JavaScript src=/menu2/mmenudom.js><\/script>");

</script>
<script type="text/javascript" src="/menu2/menu_data.js"></script>

<center><font size="1"><a href="link" class="top">Menu provided by Someone</a></font></center>

<br>

<div align="center">
<table width="750">

<tr><td colspan="3">
<center>

<center><div style="text-align:center;width:740px; background-color:#000066;"><img src="/link" alt="Top Image"></div></center>
<font size="1">Currently this site is for Windows (Specifically Windows 98/ME/XP).</font></center>

<br>
<br>

<!-- Side Banner -->

</td></tr>

<tr><td colspan="3">
<table width="750">
<tr>
<td width="150" valign="top">

<p class="navi">
<b>Version:</b>
<br>
5.00.00.00 Demo
</p>

<p class="navi">
<b>Navigation:</b>
<br>
<a href="/link">Staff</a>
<br>
<a href="/link">About</a>
<br>
<a href="/link">Affiliates</a>
<br>
<a href="/link">Site Version?</a>
<br>
<a href="/link">Previous Layouts</a>
<br>
<a href="/v5/">Version 5?</a>
</p>

<p class="navi">
<b>Project Guardian:</b>
<br>
<a href="/link">Home</a>
<br>
<a href="/link">Anti-Virus</a>
<br>
<a href="/link">Online Protection</a>
<br>
<a href="/link">Dialers</a>
<br>
<a href="/link">Spam E-mail</a>
<br>
<a href="/link">Wireless Connection</a>
<br>
<a href="/link">Various Tips</a>
</p>

<p class="navi">
<b>Contact:</b>
<br>
<a href="link">E-Mail</a>
<br>
<a href="link">AOL Messenger</a>
<br>
<a href="link">Yahoo! Messenger</a>
</p>

<p class="navi">
<b>Misc:</b>
<br>
<a href="link">Help Wanted</a>
<br>
<a href="/link">Site look wrong?</a>
</p>

</td>

<!-- Main Table -->

<td width="450" valign="top">

<p>This is a demo Version 5. I hope to include a new system and
smaller coding to help everyone out. I am still coding and debugging this demo, please keep
checking back to see my progress.</p>

<p>
I will be doing a lot of work on this section for awhile. This will consist
of buiding and debugging the new system. Then I must make the actual code I will be using, then make the
layout. After I complete that I will concentrate on Version 4 while
I slowly change all current pages to the v5 code.</p>

<p>I know what your asking yourself, "I see no difference". Well there is, you just can't see it yet. I'll explain below\:</p>

<p>
<ul style="list-style-image: url(/images/arrow2.gif);">
<li> New Code - Code 4.0
<li> New CSS Code - CSS Code 2.0
<li> Php Templates - One page of code, the other pages are just content.
<li> Dynamic pages - Calling up pages with information not provided in the template or content pages.
<li> Easier to update pages - Updating pages and layouts will take minutes.
<li> New layout designs - (Currently being worked on).
</ul>
</p>

<p>
Lots of things being added to Version 5. I personally can't wait for it to be done, the time and work
i'm putting into it should really pay off. I have alot in store for Version 5 and hope I can create it. I wanted alot more
then will be put up but I'm pushing myself to the limits to create something to blow the doors open haha.</p>
</td>

<!-- Side Bar Begin -->

</td>

<td width="150" valign="top">

<center><a href="link" target=_blank><img src="link" alt="Against TCPA"></a></center>

<p></p>

<center>
<a href="link" title="Get Firefox - The Browser, Reloaded.">
<img src="link"
width="110" height="32" alt="Get Firefox"></a>
</center>

<p class="navi">
...Content...
</p>

</td>
</tr>

<tr>
<td colspan="3">

<br>
<br>
<br>
<br>

<center>
<small>
<small>

<script type="text/javascript"><!--
google_ad_client = "pub-0542779060331684";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_channel ="";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

<p></p>

<!-- Start "Layout" Copyright Code -->

<a href="link">Menu provided by Someone</a>
<br>
<br>
<br>
Monthly Maintenance

<!-- End "Layout" Copyright Code -->

</small>
</small>
</center>

</td>
</tr>
</table>
</div>

</body>
</html>

---End Code---

For another thing I ran this page through the WC3 validator it is now 100% validated. Taht's not the problem...

Another thing is some things are controlled by the CSS, i'll post it just because it may have an error I overlooked (but i doubt it)

---CSS---

A:link
{
text-decoration: underline;
color: #000066;
}

A:visited
{text-decoration: underline;
color: #000066;
}

A:active
{text-decoration: underline;
color: #000066;
}

A:hover
{
text-decoration: underline;
color: #000066;
}

a.top:link
{
text-decoration: none;
color: #ffffff;
}

a.top:visited
{
text-decoration: none;
color: #ffffff;
}

a img
{
border: none;
}

p
{
text-indent: 20px;
text-align: left;
font-family: times new roman;
color: #000066;
}

body

{
background: #FFFFFF;
font-family: times new roman;
font-size: 12pt;
color: #000066;

scrollbar-face-color : #000066;
scrollbar-highlight-color : #0000AA;
scrollbar-3dlight-color : #0000CC;
scrollbar-shadow-color : #000044;
scrollbar-darkshadow-color : #000022;
scrollbar-track-color : #F0F7FF;
scrollbar-arrow-color : #F0F7FF;
}

td
{
text-align: left;
font-family: times new roman;
font-size: 12pt;
color: #000066;
}

.navi
{
text-indent: 0px;
font-family: times new roman;
font-size: 12pt;
color: #000066;
}

---End CSS---

If you can solve this then you are a GOD. If you can re-work the code where teh tables will move around on there own (like a div setup... I don't know how to do one of those -.-) then THAT is just as helpful. I need informationi ASAP i'm running behind on my site project!

Thank you.

[edited by: BlobFisk at 12:25 pm (utc) on Aug. 22, 2004]
[edit reason] Examplified Post [/edit]

 

Span

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 8552 posted 9:08 am on Aug 22, 2004 (gmt 0)

What exactly do you mean by "center and right table"? I see two nested tables, both 750 wide. So what's center and right?

And one of those tables (the second one) have no </table> tag.

[Added: Also, try setting cellpadding and cellspacing. If you don't, every browser adds a default value (2 or 3 px) for both. That would make your second table to mathematically not really fit in the first one.]

henry0

WebmasterWorld Senior Member henry0 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 8552 posted 11:25 am on Aug 22, 2004 (gmt 0)

Could you further define your problem
and what you try to achieve
I processed your code in my editor and checked the output but do not figure what your problem is?
regards

Henry

Echo_Tyme

10+ Year Member



 
Msg#: 8552 posted 6:59 pm on Aug 22, 2004 (gmt 0)

Um... Actually the code was a suggestion and your right, it's one table but the top and bottom are spanned through 3 columns. Then the left middle and right "tables" are controlled by just TD's. If I can't fix this I will ahve to make 3 independent tables, but for now it's just 3 TD's that are giving me trouble.

The top loads fine, the left "td" loads fine. the middle "td" loads fine, but the right "td" sticks way to the left, when it should be away.

As for the cellpadding and spacing all of this is one or two tables with 3 table data's, cellpadding and spacing wouldn't work... would it, since that's a table command, not a TD command.

When you process the code look at the right "navigation table". it's so close to the middle content... Whenever I try to pull it away... it won't.

I probably should goto DIV's or 3 independent tables shouldn't I?

netguy

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 8552 posted 8:18 pm on Aug 22, 2004 (gmt 0)

Echo_Tyme, it seems like you are over complicating the code on what is basicaly a full wide header and footer, with 3 columns in the middle. The first problem is you have two </td>s at 'side bar begins' (eliminate one), and as span says, you are not closing your nested table.

Rather than worrying about the nested table errors, I would eliminate the 2nd table altogether, since you can use the table's colspan to accomplish the full header and footer areas with the columns in the middle. I would consider going with something like this:

<table border="0" cellpadding="0" cellspacing=0 width="750"><tr><td colspan="3" valign="top">
<!-- full-wide content Header -->

</td></tr><tr><td width="150" valign="top">
<!-- left column -->

</td><td width="450" valign="top">
<!-- center column -->

</td><td width="150" valign="top">
<!-- right column -->

</td></tr><tr><td colspan="3" valign="top">
<!-- full-wide content Footer -->

</td></tr></table>

Of course CSS would probably be a better solution (and faster to download), but the above should fix the table errors.

Steve

henry0

WebmasterWorld Senior Member henry0 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 8552 posted 8:35 pm on Aug 22, 2004 (gmt 0)

I have redesigned all tables
added a few comments
and added a bgcolor to the main center table
it also reacts to percentage so you can move "width" around

hope it helps

henry
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>MM Version 5 Demo&nbsp;&nbsp;&nbsp;Version 5 Evolution</title>
<link rel="stylesheet" href="mmcss2.css" type="text/css">
</head>
<body>

<!--
A DHTML Website Navigation Menu Version 5.0+
Copyright 2004 (c) Some Solutions Limited (UK). All Rights Reserved.
-->

<script type="text/javascript" src="/menu2/src.js"></script>
<scripttype="text/javascript">

if(ns4)_d.write("<script language=JavaScript src=/menu2/mmenuns4.js><\/script>");
else _d.write("<script language=JavaScript src=/menu2/mmenudom.js><\/script>");

</script>
<script type="text/javascript" src="/menu2/menu_data.js"></script>

<center><font size="1"><a href="link" class="top">Menu provided by Someone</a></font></center>

<br>

<div align="center">
<table width="750" border="1">

<tr><td colspan="3">
<table width="750" border="0" cellspacing="0" cellpadding="0" align="center" valign="top">
<!-- announcement -->
<tr>
<td colspan="3" align="center" valign="top"
<center>
<center><div style="text-align:center;width:740px; background-color:#000066;"><img src="/link" alt="Top Image"></div></center>
<font size="1">Currently this site is for Windows (Specifically Windows 98/ME/XP).</font></center>

<br>
<br>
</td></table>
</td></tr>

<!-- Side Banner -->
<tr><td width="150" align="left" valign="top">
<table width="100%">
<tr>
<td width="100%" valign="top" align="left">

<p class="navi">
<b>Version:</b>
<br>
5.00.00.00 Demo
</p>

<p class="navi">
<b>Navigation:</b>
<br>
<a href="/link">Staff</a>
<br>
<a href="/link">About</a>
<br>
<a href="/link">Affiliates</a>
<br>
<a href="/link">Site Version?</a>
<br>
<a href="/link">Previous Layouts</a>
<br>
<a href="/v5/">Version 5?</a>
</p>

<p class="navi">
<b>Project Guardian:</b>
<br>
<a href="/link">Home</a>
<br>
<a href="/link">Anti-Virus</a>
<br>
<a href="/link">Online Protection</a>
<br>
<a href="/link">Dialers</a>
<br>
<a href="/link">Spam E-mail</a>
<br>
<a href="/link">Wireless Connection</a>
<br>
<a href="/link">Various Tips</a>
</p>

<p class="navi">
<b>Contact:</b>
<br>
<a href="link">E-Mail</a>
<br>
<a href="link">AOL Messenger</a>
<br>
<a href="link">Yahoo! Messenger</a>
</p>

<p class="navi">
<b>Misc:</b>
<br>
<a href="link">Help Wanted</a>
<br>
<a href="/link">Site look wrong?</a>
</p>
</tr></td></table>
</td>

<!-- Main Table - (Center) -->

<td width="450" valign="top">
<table width="100%" align="left" valign="top" bgcolor="#ffffcc">
<tr>
<td width="100%" align="left" valign="top">
<p>This is a demo Version 5. I hope to include a new system and
smaller coding to help everyone out. I am still coding and debugging this demo, please keep
checking back to see my progress.</p>

<p>
I will be doing a lot of work on this section for awhile. This will consist
of buiding and debugging the new system. Then I must make the actual code I will be using, then make the
layout. After I complete that I will concentrate on Version 4 while
I slowly change all current pages to the v5 code.</p>

<p>I know what your asking yourself, "I see no difference". Well there is, you just can't see it yet. I'll explain below\:</p>

<p>
<ul style="list-style-image: url(/images/arrow2.gif);">
<li> New Code - Code 4.0
<li> New CSS Code - CSS Code 2.0
<li> Php Templates - One page of code, the other pages are just content.
<li> Dynamic pages - Calling up pages with information not provided in the template or content pages.
<li> Easier to update pages - Updating pages and layouts will take minutes.
<li> New layout designs - (Currently being worked on).
</ul>
</p>

<p>
Lots of things being added to Version 5. I personally can't wait for it to be done, the time and work
i'm putting into it should really pay off. I have alot in store for Version 5 and hope I can create it. I wanted alot more
then will be put up but I'm pushing myself to the limits to create something to blow the doors open haha.</p>
</tr></td>
</table></td>
<!-- Side Bar Begin -->

</td>

<td width="150" valign="top">
<table width="100%">
<tr>
<td width="100%" align="center" valign="top">

<center><a href="link" target=_blank><img src="link" alt="Against TCPA"></a></center>

<p></p>

<center>
<a href="link" title="Get Firefox - The Browser, Reloaded.">
<img src="link"
width="110" height="32" alt="Get Firefox"></a>
</center>

<p class="navi">
...Content...
</p>
</tr></tr>
</table></td>
</tr>

<tr>
<td colspan="3">

<br>
<br>
<br>
<br>

<center>
<small>
<small>

<script type="text/javascript"><!--
google_ad_client = "pub-0542779060331684";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_channel ="";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

<p></p>

<!-- Start "Layout" Copyright Code -->

<a href="link">Menu provided by Someone</a>
<br>
<br>
<br>
Monthly Maintenance

<!-- End "Layout" Copyright Code -->

</small>
</small>
</center>

</td>
</tr>
</table>
</div>
</table>
</body>
</html>

Echo_Tyme

10+ Year Member



 
Msg#: 8552 posted 10:39 pm on Aug 22, 2004 (gmt 0)

Netguy... the code you put is exactly what i'm using... lol. That's exactlyt he setup I have lol.

And Henry your code is jsut about the same as mine too, except a few things are closed and opened wrong i think, anyway. I want it all white because i'm slipping a background behind all of this, something that fits the layout. I will still try your ideas and see if they work, if so I will build off what you have.

Ok I just made both of yours. Both have the same problem. but Netguy's code gave me an idea...

How do I space out the td's? Is there a way to put a space between them, like cell padding and spacing, can that be put in the TD code, if not then i can make 3 dif tables.

Henry said how CSS code would be easier, true but i haven't learned that much yet -.-

Also what is the dif between padding and spacing.

Thank you.

netguy

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 8552 posted 11:56 pm on Aug 22, 2004 (gmt 0)

Echo_Tyme, I'm glad you found humor in my post, but there's a big difference between the table you were using and mine. Mine works. ;)

If you would have read carefully, I pointed out that you can't have 2 <td>s together, and you didn't close the nested table. The better solution was to eliminate the 2nd table altogether, and just go with the cleaner code as I outlined.

In most cases, it is unnecessary to have many nested tables in a page design. If you hand code using colspan and rowspan properly - combined with cellpadding and cellspacing, you can generally create code that is lean and fast to download (and isn't bloated like it was made with FrontPage).

As I said in my earlier post, CSS is probably the best solution, but you seemed to be in a hurry, so I doubt if that is your short-term fix.

Steve

<added> I hope one day Henry can explain why he puts a nested width="100%" table inside hard <TD>s.
</added>

Echo_Tyme

10+ Year Member



 
Msg#: 8552 posted 4:03 am on Aug 23, 2004 (gmt 0)

Netguy... ur code didn't eliminate teh center column at all... It's the same and I put it into work and it dind't work lol.

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 8552 posted 11:21 am on Aug 23, 2004 (gmt 0)

try (temporarily) amending your CSS for the <td> to this

td
{
text-align: left;
font-family: times new roman;
font-size: 12pt;
color: #000066;
border: 1px solid red;
padding: 20px;

}

I'm aware that that is not the correct "fix" but it (the bolded bits) should help you to see what makes the "spacing" between your cells.. you could just add some left and/or right padding as an inline style to the right td if that's the only cell content you wish to "move"

e.g.
<td width="150" valign="top" style="padding-left: 20px;">

Suzy

henry0

WebmasterWorld Senior Member henry0 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 8552 posted 11:24 am on Aug 23, 2004 (gmt 0)

Steve I am not sure which one you ref to
anyhow I almost always do it that way
It offers more flexibility in playing with space
for ex instead of 100% you can have 90% which works like padding and spacing effects
however I did not re-read all my code so the TD you ref to might be an error!

Henry

ps) if you exec my code you will find that it works fine in separating each col

Echo_Tyme

10+ Year Member



 
Msg#: 8552 posted 6:47 am on Aug 24, 2004 (gmt 0)

I have exec'd your code, it didn't fix it, it was the same problem.

henry0

WebmasterWorld Senior Member henry0 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 8552 posted 11:24 am on Aug 24, 2004 (gmt 0)

Well, I give up
not that I want to
but I do not understand your goal
sorry!

Saltminer

10+ Year Member



 
Msg#: 8552 posted 10:02 am on Aug 25, 2004 (gmt 0)

Echo_Tyme,

I don't see what your problem is either.
If you're talking about the text "..Content.." not being centered it's because the text is left aligned within the table cell.

Add a border to your table temporarily to see the outline, it will help with debugging, like:
<table border="1">

Then you'll be able to see where everything is positioned within the borders of the table cells.

The left column has left aligned text, and short lines, so there is spacing between it and the center column. The center column text is full width, so having text left aligned in the right column places it up against the center column.
Is that what you're talking about, the right column text is left aligned up against the center column text?

Jimmy

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved