Dreamweaver table issue

Posted on 2007-09-30
Medium Priority
Last Modified: 2010-04-25
I am building a website in Dreamweaver using tables, and I keep getting a cell that stretches down the page when uploaded for no reason that I can figure out. It doesn't look that way on my screen, and I have the cell properties set at the width and height that I want it to be...but when uploaded it looks like this - http://www.fredwilliamshomebuilder.com/Stonewalk.htm - See that large blue bos that says "Homes starting...that is supposed to be a 20 px tall band of blue like on this page - http://www.fredwilliamshomebuilder.com/index.htm - Generally I can fiddle around with it and make it look the way I want it to, but I would like to know WHY it does this and how I can avoid it.

I have uploaded my original Dreamweaver page here - http://www.mediafire.com/?2xv2lrwtepq
I know the format is a little wierd, but this company wants a "template" site that thier marketing manager can maintain - she has no web experience, and would basically just be deleting pics and plugging in new ones ...
Question by:squirtle98
  • 2
LVL 10

Accepted Solution

Phatzer earned 240 total points
ID: 19988115
Remove the height="20" from the table, and instead use the stylesheet, or add style="height: 20px;"

That may work, as that blue bar appears perfectly in Firefox, but not in Internet Explorer.
LVL 10

Expert Comment

ID: 19988162
I've taken a brief look over the html and I can't really see the cause of the problem, however saying that, the code isn't cross-browser compliant and the use of height tags in tables and cells are everywhere. Unless somebody else has the time to go through the different causes of this height issue, the only thing I could suggest is to look into revise the layout with HTML or even XHTML standards in mind.

I'm sorry I can't really help you more, but even when opening this page in dreamweaver I'm a little confused by the layout with the tables.

Assisted Solution

techbots earned 135 total points
ID: 19988525
squirtle98 -

Please forgive me for saying so, but your code is really a mess - you have lots of conflicting and unnecessary styles and they are making your work a heck of a LOT harder than it needs to be. I'd suggest creating a single CSS file which you link to from each page, adding in it whatever styles you need for the site, naming each with a meaningful name such as ".bluebar" rather than ".style42", and then buying a good book on creating stylesheets. Once you get your clean stylesheet file created, go back and manually delete all the bad code from your pages and select the correct style you want to use (which should be easy to find since they will show up in the dropdown property list with those meaningful names!)

It's really worth taking the time to do that, it will save you weeks worth of endless "fiddling" to get something to look right.

For now though, if you all you really want is a quick fix: Add "height: 20px;" to your ".style42" at the top as well as dropping your font size down a notch - try "font-size: 11px;" as a starting place and adjust the pixel size accordingly. It's possible your font size is throwing off the height.

So, replace your current lines that read:
.style42 {
      color: #FFFFFF;
      font-size: small;
      font-weight: bold;


.style42 {
      color: #FFFFFF;
      font-size: 11px;
      font-weight: bold;
      height: 20px;

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
This Micro Tutorial will teach you how to add a cinematic look to any film or video out there. There are very few simple steps that you will follow to do so. This will be demonstrated using Adobe Premiere Pro CS6.
As many of you are aware about Scanpst.exe utility which is owned by Microsoft itself to repair inaccessible or damaged PST files, but the question is do you really think Scanpst.exe is capable to repair all sorts of PST related corruption issues?
Suggested Courses

569 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question