10 {{ upvoteCount | shortNum }}
10 {{ upvoteCount | shortNum }}

Extra Vertical space problem in Dreamweaver

by Promptor
6 replies
  • WEB DESIGN
    • |
I was hoping someone could help me with a problem I'm having in Dreamweaver. I often have the problem where extra vertical space appears when I preview a page in a browser. The problem is fairly consistent between different browsers though the extra space is sometimes less in IE.

For an example of the problem go to:

What Do You Do

If you scroll down to the bottom of the text area you will see a large blank space at the end of the text. For all the screwing around I did at least the space is at the end instead of in the middle. Extra space often appears between layout tables.

Any suggestions would be most appreciated. I don't have much hair left to tear out. Thanks
#dreamweaver #extra #problem #space #vertical
  • Profile picture of the author vossman
    Hi Promptor,

    I gave your website a quick look and this I know what will fix your issue for you. Since you are using tables and not pure CSS for the layout of the site, you have some table column definitions that have their height set to a fixed pixel amount. This amount makes more space than is necessary for the table causing the white space at the bottom. There are three places you need to make changes on your webpage.

    Find these three lines

    @line #560
    Code:
    <td colspan="4" align="center" height="7909" nowrap="nowrap" valign="top"><img src="what-do-you-do_files/texturedspacer.jpg" alt="spacer" height="3" width="145"></td>
    @line #561
    Code:
    <td align="left" bgcolor="#f2f1f3" valign="top" width="15"><div align="left"><img src="what-do-you-do_files/grad14b.jpg" alt="edge" height="7909" width="14"></div></td>
    @line #1074
    Code:
    <td align="left" bgcolor="#f2f1f3" valign="top" width="15"><div align="right"><img src="what-do-you-do_files/grad14.jpg" alt="edge" height="7909" width="14"></div></td>
    You can see in each of the three blocks of code the parameter height="7909". Change each of these to height="7650". I copied the entire page and made these changes in my own environment and the white space was trimmed down to a proper size.

    Should be a quick fix, let me know if you have any problems.

    Vossman
    {{ DiscussionBoard.errors[1070786].message }}
    • Profile picture of the author Promptor
      God bless you Vossman I'll give that a try and let you know.
      {{ DiscussionBoard.errors[1071676].message }}
    • Profile picture of the author Promptor
      Way to go Vossman!

      That certainly did the trick, but I have a question.

      First of all the line numbers where different, but I assume that is from pasting the code in a different environment. I assume from your post that you're not using Dreamweaver.

      What was weirder is that the parameters of the lines where in a completely different order, but I suppose this could also be due to a different environment.

      My question is - since I have this type of problem often and I certainly don't expect you to fix all my pages, could you tell me how you came up with the number 7650 in place of 7909?

      As a side note I often get this extra space between layout tables.

      Thank you again.
      {{ DiscussionBoard.errors[1071738].message }}
      • Profile picture of the author MichaelSchultz
        Originally Posted by Promptor View Post

        My question is - since I have this type of problem often and I certainly don't expect you to fix all my pages, could you tell me how you came up with the number 7650 in place of 7909?
        First off, I would greatly recommend learning CSS (more specifically how "table" divs work) - you'll find that HTML tables are becoming extinct due to the greater simplicity of CSS divs ("CSS tables" would almost be an accurate term).

        Regardless, the reason he came up with that number (or how I would) is he (roughly) guessed the extra space's pixel height and subtracted it from the original number. Typically you have to sort of feel around and try a few different numbers, cutting off 10s and 20s of pixels until you get the right height. Try it next time

        Originally Posted by Promptor View Post

        As a side note I often get this extra space between layout tables.
        That is not an uncommon result of using wysiwyg editors such as dreamweaver, you'll find that the best way to fix these sort of issues is to go into the code and eliminate the spaces (often <br /> or <p> (<p /> tags) yourself.

        The best of luck to you!
        {{ DiscussionBoard.errors[1071839].message }}
        • Profile picture of the author vossman
          Glad it worked!

          The line numbers were probably different because I used the source code out of firefox vs what you have in dreamweaver. The two can vary depending on whatever factors. If you have changed anything in dreamweaver since your last online publish that may explain the tags out of order.

          Either way, similar to what Michael is saying, once I identified all the elements that were too large and causing the whitespace I simply tested a few values until it looked the way it should. I used the FireFox Developer Toolbar to help me identify the different elements, I recommend you grab the plugin from mozilla, it makes troubleshooting a lot easier. I also second what Michael says about using pure CSS. It should be pretty easy in DreamWeaver although I am not really a layout/graphics guy, I am more into integration and coding so I don't really use DreamWeaver too much. Michael was saying look out for < p > and < br > tags but that wasn't the case with this setup so in the future I would recommend looking at your table configurations ( I would more so recommend learning CSS tables ).

          If you need further help feel free to PM me. Good luck with the product it looks quite interesting and I'll check back in the future when its available.

          Vossman
          {{ DiscussionBoard.errors[1072032].message }}
          • Profile picture of the author Promptor
            Thanks for the help and advice.

            Does working in pure CSS resolve the issues as far as displaying the same in different browsers? Any suggestions about tools, sources of info, or preferred environments to learn CSS?

            I've been programming since the days all we had to work with was machine language. Talk about tedious! Over the years I have learned many different languages and to tell you the truth I'm getting a bit languaged out at this point, if you know what I mean.

            I really prefer to work in Flash because my layouts are generally more graphical and Flash is such a pleasure. It has far more graphic capability and it seems to always look exactly the same in every browser. If it weren't for the page length restriction and SEO issues I wouldn't think twice about it.

            By the way - the product IS available.
            {{ DiscussionBoard.errors[1073194].message }}

Trending Topics