Hey all,<br />
<br />
I'm a novice web designer, and need a little help with tables; the webpage I'm building is viewable at <!-- m --><a class="postlink" href="http://www.heavypixel.com">http://www.heavypixel.com</a><!-- m --> . <br />
<br />
Here's the problem; the page is cut into table cells, but when the "main body" cell expands the cells on the right don't expand properly -- check out (<!-- m --><a class="postlink" href="http://www.heavypixel.com/index-bad.html">http://www.heavypixel.com/index-bad.html</a><!-- m -->) for an example. The cells are "anchored" to the bottom, when they should really be anchored to the table cell above them (the bottom of the logo spinner).<br />
<br />
How do I do this? Feel free to check out the code; any tips are seriously appreciated
<!--content-->welcome topaz_monkey<br />
<br />
I am not sure which part of the table you are talking about.<br />
<br />
could you elaborate a little more?<!--content-->Since I'm not very good with tables yet, I loaded your page in FrontPage, and after playing with the table height attributes, I believe I fixed your problem. I'll take a closer look to see which attributes FrontPage changed... <br />
<br />
Just play with the height attributes of the table and cells on the right (the one that says " most recent photos ").<br />
<br />
Here's what I got:<br />
<br />
[edit] it exceeded the character limit... hold on a minute... lol<br />
I'll look for what FrontPage changed<br />
<br />
[edit #2] I hope you don't mind... I e-mailed you the code if you want to take a look at the changes FP made... I'm too tired to look<!--content-->I tried to see if there was a logic error with the HTML, but it is hard to find them in the list of [176 errors (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.heavypixel.com%2F&charset=%28detect+automatically%29&doctype=%28detect+automatically%29&ss=1&outline=1&sp=1">http://validator.w3.org/check?uri=http% ... ine=1&sp=1</a><!-- m -->)] found by the validator.<br />
<br />
Can you do a Search and Replace operation on the source code? You need to be Looking for & and Replacing each one with & as this will remove all of the entity errors making it a lot easier to look for other types of error. There are other errors hidden in the list.<!--content-->scoutt -- the tables with the square "pixels" on the gray background (one verticle table) and the solid black column (another).<br />
<br />
Arctic Dragon -- I looked over the code you sent (thanks, btw), but FrontPage chopped it up so different I can't really compare it against what I have. Maybe if I had better skillz...<br />
<br />
giz -- for a cleaner version of the same template, check <!-- m --><a class="postlink" href="http://www.heavypixel.com/webcam.htm">http://www.heavypixel.com/webcam.htm</a><!-- m --><br />
<br />
<br />
<br />
<br />
Thanks for your help, guys.<!--content-->I made the tag border=10 in the table to find the problem. The problem is the red cell gets too long, and the content of the green cells should be flush against the red cell. The green are fine, they are properly vertically aligned to the top.--------------------<br />
| | . | .SpinnerLogoUp<br />
--------------------<br />
| | , | ,SpinnerLogoDown<br />
| |--------<br />
| | | |<br />
| main | | |<br />
| body | | |<br />
| | | |<br />
| | | |<br />
| | | |<br />
| | | |<br />
--------------------I had an idea, but it didn't work. It was to make the dot . cell's height exactly the same as the image it contains; repeat with the comma , cell; and make the green cells' height = 100%. It didn't work, I think because, 100% means the height of screen, not the height of the window... I'm out of ideas for today..<br />
<br />
I've attached a picture to illustrate the problem. The space next to the highlighted words should be eliminated.<!--content-->I guess I'm a little lost on how to eliminate that space; I've tried futzing with it to make it work, but I'm still getting the problem...<!--content-->take all those <P> </P> out. it is pulling the right side down. you will have to make some changes so you can add a cell on the right that will act the cusion for teh left cell.<!--content-->Now that I've had a good night's rest, I think I've figured it out. Your merged main body and red cells are too complicated for a measly browser to do exactly as you wish under all variable sizes. I propose a table-in-table solution.+-------+-----+<br />
| | . | .SpinnerLogoUp<br />
| | |<br />
+-------+=====+<br />
| | |<br />
| | | Insert a new <br />
| | | table here.<br />
| | |<br />
| | |<br />
+-------+=====+<br />
<br />
+---+<br />
| , | ,SpinnerLogoDown<br />
+-+-+<br />
| | | <you know what<br />
| | | goes in these.<br />
+-+-+Just make sure both tables have border="0"<br />
cellpadding="0"<br />
cellspacing="0"<br />
and all the valign's set properlyand you should be fine. If you need help with the code - post back here and we'll whip up some.<br />
<br />
You should be able to make the main body cell as long as you want.<!--content-->postitlord, the new table can't go there as that is not the problem area. it has to go in the spinnerlogo cell as that is whats getting stretched. he needs to add a new cell below where you proposed a new table. that way it gets spaced out instead of the spinnerlogo cell.<br />
<br />
or add the whole left side in a table in that cell<!--content-->Here's the table-in-table. It fixes the problem I described. I tested it in IE 5.5 and NS 4.73, on Win98. I left the borders equal to 1 to highlight the design concept.<br />
<br />
In an unrelated problem, Netscape could not load mrHappyPants.gif at all. No clue why. Perhaps 10,000 pixels is too long for it. <br />
<br />
Enjoy!<!--content-->
<br />
I'm a novice web designer, and need a little help with tables; the webpage I'm building is viewable at <!-- m --><a class="postlink" href="http://www.heavypixel.com">http://www.heavypixel.com</a><!-- m --> . <br />
<br />
Here's the problem; the page is cut into table cells, but when the "main body" cell expands the cells on the right don't expand properly -- check out (<!-- m --><a class="postlink" href="http://www.heavypixel.com/index-bad.html">http://www.heavypixel.com/index-bad.html</a><!-- m -->) for an example. The cells are "anchored" to the bottom, when they should really be anchored to the table cell above them (the bottom of the logo spinner).<br />
<br />
How do I do this? Feel free to check out the code; any tips are seriously appreciated
<!--content-->welcome topaz_monkey<br /><br />
I am not sure which part of the table you are talking about.<br />
<br />
could you elaborate a little more?<!--content-->Since I'm not very good with tables yet, I loaded your page in FrontPage, and after playing with the table height attributes, I believe I fixed your problem. I'll take a closer look to see which attributes FrontPage changed... <br />
<br />
Just play with the height attributes of the table and cells on the right (the one that says " most recent photos ").<br />
<br />
Here's what I got:<br />
<br />
[edit] it exceeded the character limit... hold on a minute... lol<br />
I'll look for what FrontPage changed<br />
<br />
[edit #2] I hope you don't mind... I e-mailed you the code if you want to take a look at the changes FP made... I'm too tired to look<!--content-->I tried to see if there was a logic error with the HTML, but it is hard to find them in the list of [176 errors (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.heavypixel.com%2F&charset=%28detect+automatically%29&doctype=%28detect+automatically%29&ss=1&outline=1&sp=1">http://validator.w3.org/check?uri=http% ... ine=1&sp=1</a><!-- m -->)] found by the validator.<br />
<br />
Can you do a Search and Replace operation on the source code? You need to be Looking for & and Replacing each one with & as this will remove all of the entity errors making it a lot easier to look for other types of error. There are other errors hidden in the list.<!--content-->scoutt -- the tables with the square "pixels" on the gray background (one verticle table) and the solid black column (another).<br />
<br />
Arctic Dragon -- I looked over the code you sent (thanks, btw), but FrontPage chopped it up so different I can't really compare it against what I have. Maybe if I had better skillz...<br />
<br />
giz -- for a cleaner version of the same template, check <!-- m --><a class="postlink" href="http://www.heavypixel.com/webcam.htm">http://www.heavypixel.com/webcam.htm</a><!-- m --><br />
<br />
<br />
<br />
<br />
Thanks for your help, guys.<!--content-->I made the tag border=10 in the table to find the problem. The problem is the red cell gets too long, and the content of the green cells should be flush against the red cell. The green are fine, they are properly vertically aligned to the top.--------------------<br />
| | . | .SpinnerLogoUp<br />
--------------------<br />
| | , | ,SpinnerLogoDown<br />
| |--------<br />
| | | |<br />
| main | | |<br />
| body | | |<br />
| | | |<br />
| | | |<br />
| | | |<br />
| | | |<br />
--------------------I had an idea, but it didn't work. It was to make the dot . cell's height exactly the same as the image it contains; repeat with the comma , cell; and make the green cells' height = 100%. It didn't work, I think because, 100% means the height of screen, not the height of the window... I'm out of ideas for today..<br />
<br />
I've attached a picture to illustrate the problem. The space next to the highlighted words should be eliminated.<!--content-->I guess I'm a little lost on how to eliminate that space; I've tried futzing with it to make it work, but I'm still getting the problem...<!--content-->take all those <P> </P> out. it is pulling the right side down. you will have to make some changes so you can add a cell on the right that will act the cusion for teh left cell.<!--content-->Now that I've had a good night's rest, I think I've figured it out. Your merged main body and red cells are too complicated for a measly browser to do exactly as you wish under all variable sizes. I propose a table-in-table solution.+-------+-----+<br />
| | . | .SpinnerLogoUp<br />
| | |<br />
+-------+=====+<br />
| | |<br />
| | | Insert a new <br />
| | | table here.<br />
| | |<br />
| | |<br />
+-------+=====+<br />
<br />
+---+<br />
| , | ,SpinnerLogoDown<br />
+-+-+<br />
| | | <you know what<br />
| | | goes in these.<br />
+-+-+Just make sure both tables have border="0"<br />
cellpadding="0"<br />
cellspacing="0"<br />
and all the valign's set properlyand you should be fine. If you need help with the code - post back here and we'll whip up some.<br />
<br />
You should be able to make the main body cell as long as you want.<!--content-->postitlord, the new table can't go there as that is not the problem area. it has to go in the spinnerlogo cell as that is whats getting stretched. he needs to add a new cell below where you proposed a new table. that way it gets spaced out instead of the spinnerlogo cell.<br />
<br />
or add the whole left side in a table in that cell<!--content-->Here's the table-in-table. It fixes the problem I described. I tested it in IE 5.5 and NS 4.73, on Win98. I left the borders equal to 1 to highlight the design concept.<br />
<br />
In an unrelated problem, Netscape could not load mrHappyPants.gif at all. No clue why. Perhaps 10,000 pixels is too long for it. <br />
<br />
Enjoy!<!--content-->