Images in tables

[DJBenz]

Hello everyone, I'm hoping a tables guru can answer this for me.I'm developing a simple webpage for a friend, and the layout is based around graphics contained in tables. The index page is OK, but when the page is refreshed it seems to insert line breaks into the page which split up the graphics.The page is -->here<--.If you click on the 'courses' button, you can see how badly the page breaks up. All of the text on the page is contained within a cell on the table, so how is it managing to affect things outside it's cell? I even tried nesting a table into the cell to try and 'control' it. :)Any help most appreciated.

[cyber0ne]

You'll want to start by setting the align and valign on those cells with images. That way they can always stay at the top of the cells.Then you'll want to make sure your cells don't get expanded by that center cell which contains the text. The first idea I have is to create another cell at the bottom of the columns with the images. Explicitly define the heights of the cells with images, but leave that bottom empty one undefined. Then, depending on how the browser decides to render it, if that center cell extends downward it _should_ only stretch out the empty cells that have no height definition.I can't really test this right at the moment, but it's the only idea I have right now.-cyber0nehttp://www.cyber0ne.com

[Skemcin]

whenever you have an image in a table cell ALWAYS tell the browser when you are done - the </td> tag doesn't necessarily know you are done - so just put in a <br /> before all your </td> if there isn't one already there. That will solve your problem.old:<img src="images/shinto_08.jpg" name="button4" border="0"></TD>new:<img src="images/shinto_08.jpg" name="button4" border="0"><br /></TD>I see you're using Dreamweaver - good choice. But I would STRONGLY recommend you code in CODE MODE - you'll get a hang of this much faster.You're also missing the DOCTYPE tag on your first line.Hope this helps.P.S. Check out this topic - specifically Post #13. This is explained in a little more detail there.

[Lunfalas]

Skemcin, thanks a lot! You have answered my question from "A 'WHAT THE?!' story..." topic! No unnecessary space anymore since the <br> tags are all in their place.

[DJBenz]

Thanks for the input guys.

  whenever you have an image in a table cell ALWAYS tell the browser when you are done - the </td> tag doesn't necessarily know you are done - so just put in a <br /> before all your </td> if there isn't one already there. That will solve your problem.

I've done that, but the problem is the same. I tried both <br> and <br /> tags, but neither has made much of a difference. The right hand of the page has fixed, but the menu side is still gapping. :)I'm not using Dreamweaver, I'm coding in Notepad2. The Table layout for the images was generated by Photoshop's 'Save for Web' function and I've added the javascript for the mouse rollovers. I hate tables and can never see the correllation between the code and the page result

You'll want to start by setting the align and valign on those cells with images. That way they can always stay at the top of the cells.

Done that too. I think it's going to take a fixed cell to keep the menu column pushed up, but I'm at a loss as where/how to edit the code to put it in.I've uploaded the latest version of the page to the link above.

[Skemcin]

Check your cache - I've viewed the page in:Firefox 1.07Internet Explorer 6.02Opera 8.5Netscape 8.03I see no gaps anywhere - looks like it looks like it is supposed to look!

Skemcin, thanks a lot! You have answered my question from "A 'WHAT THE?!' story..." topic! No unnecessary space anymore since the <br> tags are all in their place. 

GREAT - glad it worked out.

[DJBenz]

I see no gaps anywhere - looks like it looks like it is supposed to look!

It's OK the first time you go to the 'courses' page, but if you refresh the page the breaks come back.

[Skemcin]

It's OK the first time you go to the 'courses' page, but if you refresh the page the breaks come back.

sorry, still can't reproduce the scenario you describe, even when I double click and reload before the pages fully loads - are you on dial up?[edit] See next post - no way to delete this . . . Edited November 19, 2005 by Skemcin

[Skemcin]

ok, I have to apologize - after I got done taking my head out of my a$$ I realized I was looking at teh wrong page - I am very sorry it must have frustrated you.up reviewing your code, the problem seems to be occuring because the content on the "Courses" goes below the bottom of the red side pillar, it stretches the the table down the page, and that pulls the cell larger.Ironically, you do not need to all those rows. Given your site design, you really only need to code a four column two row layout. The extra rows are not needed - just put line breaks after each mouseover image - the rows are extra code you simply do not need.For example:http://www.deepcreeklakebreezmotel.com/View the source there. I could have made a row in a table for each mouseover image. That would force me to rowspan my main content area - just as you have. But I have chosen to use a line break after each image, thus not needing any table rows and therefor no rowspans.Your site could be coded in this shell:<table cellpadding="0" cellspacing="0" border="0"><tr><td colspan="4">-header graphic-</td><tr><tr><td valign="top">-left white space-</td><td valign="top">-mouseover 1 -<br>-mouseover 2 -<br>-mouseover 3 -<br>-mouseover 4 -<br>-bottom pole graphic -<br></td><td valign="top">-site main content area-</td><td valign="top">-right side pole graphic-</td></tr></table>Again, I am sorry for having been on the wron page - I hope you see this as an accurate description of your problem and a viable solution to the problem.P.S. As a shorter test, just add the appropriate height to each cell on the left navigation but leave the height of the last one (the bottom of the pillar) as undefined - that should resolve the issue without any other coding.

[DJBenz]

ok, I have to apologize - after I got done taking my head out of my a$$ I realized I was looking at teh wrong page - I am very sorry it must have frustrated you.

No problem. When I'm getting free advice from someone, impatience is not an option. :)Thanks for the feedback, I'm going to have a good look at the table layout and try to implement some of the changes you've suggested.I'll report back, either with success or more questions.

[DJBenz]

Success!In the end, I managed to get the layout under control but the text continuing beyond the bottom of the columns didn't look very good.To solve this, I've used the <iframe> tag to create a scrollable text area in the centre cell. Looks much better this way, I feel.The complete site is up at the link in my original post, still need to tidy up the page code a little (add the DOCTYPE tags etc) but I'm really happy that it's solved.Thanks for the hand holding, you got me out of a hole. Take a look at the finished product and let me know what you think!