Adding text to editable region creates space in the rest of my layout

Question

I created my layout in PS, sliced the images and then imported to DW (html and images).
Layout looks great.
I created editable regions in the template I created from the .html
One I start inserting text into these regions, my container moves and it throws the rest of the layout off by adding space between the editable region and the area above it (a big black line horizontally through the page).
Is there a way to keep the container/editable region from moving or growing with the text so that it doesn't change my layout?
On a side note, this change doesn't appear in live view. When I preview in browser, Safari layout looks great, but text doesn't appear. In firefox, text appears, but layout is a mess.
Here is the code from the editable region to which I am trying to add text:
<!-- TemplateBeginEditable name="main_content_area" -->
        <div id="site_layout_contentmain">Content for  id "site_layout_contentmain" Goes Here</div>
      <!-- TemplateEndEditable --></td>
ANY help is GREATLY appreciated!!!!!

Answer 1

MHarvey2001 wrote:
Yes, the design is appearing to pull apart when I add content, but only in the Firefox preview.
If it pulls apart in Firefox, chances are it pulls apart in all browsers when text size is increased.
The problem with Photoshop code is that it is a) rigid, b) unstable and c) invalid.  
To illustrate, run your code through the on-line validation tools below.
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
Photoshop is OK for designing quick comps to show the client but they won't hold up on a real site.
IMO, the benefits of starting over far outweigh the inconvenience.
HTML & CSS Tutorials - http://w3schools.com/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists 
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/