Member Avatar for jjemphoung

good day! im new to dream weaver cs4. i am just starting to develop a dynamic page. i layout in the design area of DW cs4. i have 2 main tables. the first one is for the heading and below is for the content. i used an empty table between the two main tables to serve as a separator. now when i viewed it in my browser, the distance becomes so big. is it normal with DW? please help me! replies are really appreciated..

  • 5 Contributors
  • 6 Replies
  • 202 Views
  • 10 Months Discussion Span
  • Latest Post Latest Post by matricol

Dani AI

Generated

Short summary and quick fixes for the layout gap you saw in Dreamweaver CS4.

Live/design panes in authoring tools are only approximations — was right to suggest confirming in real browsers. The common culprits for the “extra” vertical space seen between table blocks are: browser default (user-agent) margins on elements like p, stray or empty tags inside table cells, and differences caused by missing/incorrect DOCTYPE (which can trigger quirks mode). As found, an unexpected paragraph tag inside a table is a classic cause because browsers add vertical spacing to paragraphs.

Practical fixes to try now:

  • Remove empty/stray tags from table cells (no empty <p> just to make space).
  • Normalize/reset the basics so default margins don’t surprise you. Example CSS you can add globally:
p { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; padding: 0; }
  • Use margins on the element that should create the gap (for example, give the lower table margin-top: 20px;) instead of inserting an empty table as a spacer. That keeps layout predictable across browsers.
  • Ensure a standards-mode DOCTYPE (for modern pages <!DOCTYPE html>) and validate the HTML to catch unclosed tags that break layout.

Workflow tips: preview in several current browsers and use the browser’s inspector to view computed margins/box sizes — that will point immediately to which element is adding height. Quick workarounds like nesting tables (as suggested) or using empty spacer tables may “fix” it locally but make future maintenance harder; prefer small CSS rules and validated markup. The Adobe help linked earlier in the thread explains Live View differences if you want Dreamweaver-specific behavior.

Recommended Answers

All 6 Replies

Member Avatar for papanyquiL

This is normal with dreamweaver (at least for me it is). In live view things are usually skewed, especially when working with various CSS styles. That's why I don't pay much attention to it. My advice is to rely solely on the browser.

Member Avatar for jjemphoung

so its SWYSINAWYG (Sometimes What You See Is Not Actually What You Get). thanks for the reply atleast i knew i am not alone with this problem.

Member Avatar for bettersaid

are you using div layers?? try putting your table inside another table

Member Avatar for jjemphoung

thanks for the replies! i've minimized my problems by watching my <p> tags. i've discovered it behaves strangely when i have a <p> tag in my table. thank u very much!

Member Avatar for matricol

if it looks bad .. dont bother .. try it in all of the official browsers if there is ok .. your good to go

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.