Editable RegionsTable Row Height Issues
by BMeems
on
Jan 21, 2008 at 5:42:08 am
I'm creating my first website using CSS. I've utilized the Total Training: Extreme Website Makeover tutorial set to assist me in taking my web design from Photoshop to Fireworks (to create slices) and then to Dreamweaver for the addition of content to the site. The site is pretty simple. It only has 7 pages total within the site. I've used a template in Dreamweaver CS3 to maintain the consistent look over each of the pages. I've also created an Editable Region for the area of each page that will serve as the body, or the area of the site that will change from page to page. 6 out of the 7 pages within the site look great, I've added the specific content that I need to all of the pages. The outstanding page that is giving me problems is one that appears with a bit more content in the Editable Region than the other pages. For some reason (and this is where your expertise comes in) the space between the cells outside of the Editable Region appear to expand in order to accommodate the extra content (added height) in this one page.
I've spent alot of time looking around the net to figure out what I could be doing wrong here, and so far I've tried to change the height of the surrounding cells to 100%, I've set all of the affected cells to "Align: Top" and I've tried to select the select the table row which contains the cells that show a space between them on the "page in question" and which also contain the Editable Region, and I can't seem to figure out how to make this one page accommodate the extra height added by the content in the Editable Region.
I hope this issue isn't too vague. Right now I just really need someone to step up and tell me what I'm doing wrong. I'm not expert in Dreamweaver, and I'm creating this site for free for our local not-for-profit newspaper, so I'm not gaining anything from this other than the experience, which at this point is driving me to drink.
If you think that you might have a suggestion to my problem, and would like to take a look at the site I'm working on, I can arrange to send you the site files. Thanks in advance for your help!
Re: Editable RegionsTable Row Height Issues by Abraham Chaffin on Jan 24, 2008 at 12:35:00 am
When you create a table for slices in Dreamweaver most the time the expanding main body isn't taken into consideration.
As the orange main section expands so will the heights of the other cells in the table to accommodate for the overall height change. Different browsers will handle this different ways. At least one cell in column that has 8 rows (the 7 nav cells and the bottom section) must expand in height because the orange section is expanding. Some browsers might expand all 8 sections evenly, others might choose the top or another might choose the bottom. The way this should be setup shouldn't be left to the choice of the browser.
The way this example should be set up is the height of the 7 nav sections should be set to a fixed height and the 1 bottom section should not have a height set so that it is allowed to expand freely.
The yellow sections on the side will always get taller if the orange section gets taller because there is only one cell there to expand. You can however positionally place the content in that cell by using the align and valign parameters.
Here's what it looks like when the parameters are left to the browser to choose:
Here's what it looks like when you set the height parameters for each nav cell and valign the bottom section:
Re: Editable RegionsTable Row Height Issues by Abraham Chaffin on Jan 30, 2008 at 5:06:21 pm
Additionally however, using a table setup in this way doesn't always work in all browsers like I posted in the previous post. If you run into the problem where, for whatever reason, the browser isn't adjusting the height of the cells correctly you may want to consider changing the table structure to something a little different.
What I suggest rather than setting up your vertical navigation bar in the same table as your main content is embed a separate table into the main table that your other content is in.
This illustration should help:
In this example the red bordered table is a separate table in the brown cell. The main table is a single row of cells (or columns in this case). This way there is no confusion for any browser of how you want it to handle the cell heights because they are not tied together in anyway.
Whenever you use colspan or rowspan to merge cells, columns, or rows many times browsers don't interpret the height and width of other cells properly. Dreamweaver has one way of interpreting the table layout, firefox has another, and ie has another. IE in my opinion is just completely wrong but that's another story.
This does involve redoing your site layout in many cases but it's worth it. Also the flexibility it gives you to add or remove rows or columns down the road is better. You can add a new item in your navigation bar without adjusting the rowspan in the other cells.
Re: Editable RegionsTable Row Height Issues by bmeems on Jan 31, 2008 at 2:09:42 pm
Thank you for your response Abraham. You mentioned having to rebuild my site. I"m just wondering if there might be an easier way to handle this issue rather than rebuilding? I am not sure if this will make sense, would it be possible to copy the affected NAV cells and images and paste these into a newly created table? I understand that it is possible to create an iframe within a frame, is there anything equivalent to that for tables? Thanks,
Re: Editable RegionsTable Row Height Issues by Abraham Chaffin on Jan 31, 2008 at 4:12:39 pm
To achieve the technique I described of a table within a table is probably the easiest way to achieve what you're trying to do and have the most consistent look among different browsers. An iframe type technique is not necessary here.
Re: Editable RegionsTable Row Height Issues by Bill Meems on Feb 1, 2008 at 12:46:17 am
Thanks again Abraham,
I took another look at the site layout and in an attempt to avoid having to rebuild my layout, I selected all of the cells that make up the NAV bar and I merged them. I then set the V Align to Top and uploaded the changes. I check the changes out in Firefox and IE and they both seem to show up without any error on the one page I was experiencing issues with. Will I run into issues with the changes I have made? The only thing I can think of is there being an issue when trying to add new buttons to the NAV bar. What are your thoughts on this type of solution? Thanks,
Re: Editable RegionsTable Row Height Issues by Abraham Chaffin on Feb 1, 2008 at 12:53:11 am
Merging the entire cells in that column is definitely a good solution -
Now the images are not nested in individual cells but are made to align vertically because the width of the column is restrained. (Make sure you do have the value set for the width of this cell - it should be the width of your images.) Adding new navigation shouldn't be a problem if you just add another image to the stack.
Sounds like you're getting the idea of how it works and coming up with good ideas.
