Member Avatar for Aspectart

I recently changed my website from a framed version to a non-framed version using a template.

I have been working with Dreamweaver MX2004, and basically made all the changes I need to. The site looks fine using Firefox, exactly as I had designed it, but in IE it all goes horribly wrong.

My template is designed using a table, then I have used editable regions for the text body and page title.

In IE though the problem seems to be that the side table (my navgation) is stretched to as long as the text body is, even although the side table is a fixed part of the template.

In addition to this, I have added a background to one of the cells in the same side table (a dotted vertical line). But this just doesn't show up in IE.

As I said, everything in Firefox look the same as in Dreamweaver. I don't understand why IE is calling me any difficulties.

The website is: www.aspectart.com
An example of a page gone horribly wrong is: http://www.aspectart.com/dyn/faq/index.php?p=all

Any ideas? Thanks

  • 2 Contributors
  • 2 Replies
  • 205 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Aspectart

Dani AI

Generated

reported that after moving from frames to a table-based template the site renders correctly in Firefox but in IE the sidebar stretches to the same height as the content column and a dotted vertical-line background on a cell doesn’t appear. ’s “clean up those DIV styles” hint is sensible, but a few table- and IE-specific checks usually find the real cause.

Quick diagnostics and likely causes:

  • Missing or incorrect DOCTYPE can put IE into quirks mode and change box-model/rendering.
  • Standard table behavior: cells in the same table row share the row height; a long content cell will force the sidebar cell taller.
  • Stray/mismatched tags (Dreamweaver editable regions can leave extra DIVs or unclosed tags) can change the DOM and break layout.
  • Older IE bugs (hasLayout) can stop backgrounds or borders behaving as expected.

Practical, low-risk fixes to try (apply incrementally and re-test):

  • Ensure a standards DOCTYPE is declared at the top of the page:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • Prefer CSS borders to a background image for a simple dotted divider, and force top alignment of the sidebar cell:
    td.sidebar {
vertical-align: top;
width: 180px;
border-right: 1px dotted #999;       /* simpler and reliable */
background: url('images/dotline.gif') right top repeat-y; /* optional */
zoom: 1; /* triggers hasLayout in IE6/7 if needed */
}
  • Validate generated HTML (W3C validator) and inspect the template output for stray DIVs or unclosed tags. Temporarily strip styles to see raw table behavior.

If converting layout is feasible, a float-based two-column CSS layout is more predictable across browsers. As an interim, separating the nav into its own element (not forcing it to share the same tall table row) also prevents it from being stretched. Combining ’s cleanup with the checks above typically resolves the IE-specific differences.

Recommended Answers

All 2 Replies

Member Avatar for techniner

I would start by cleaning up those DIV styles.

example.. you have div style""

IE might be chunking on those... firefox can sor through the mess...

Start with your css then work your way through the code.

the <divs> are where your problems are.

Member Avatar for Aspectart

Great thanks

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.