Member Avatar for cavemanlawyer15

I've built a site (using Dreamweaver CS3) with most of the info sorted out by AP Divs...it looks great in Firefox and Safari, but in IE 7.0 it looks like the divs are laying on top of each other.

I was surprised because the only W3C validation errors that turned up so far look pretty trivial. Does anyone know what went wrong here?

home page is at:
www . click sharpmarketing . com /beta/cven/

Thanks very much.

  • 5 Contributors
  • 6 Replies
  • 187 Views
  • 4 Months Discussion Span
  • Latest Post Latest Post by jhample

Dani AI

Generated

A quick, practical diagnosis based on the thread: Dreamweaver AP Divs are absolute-positioned layers and can behave very differently in IE6/7 because of stacking-context, layout, and mode differences. Posts from (static vs fluid), (client environment), (template works elsewhere) and (same hidden-AP problem) point to environment and IE rendering quirks rather than an obvious HTML validation error. The checklist and tiny fixes below target the usual causes that make AP divs “pile up” in IE7.

Common checks and fixes

  • Confirm a standards DOCTYPE at the very top so IE uses standards mode rather than quirks.
  • Make the AP container a positioned ancestor: the element that should act as the reference must have position: relative; so absolute children don’t all position relative to the BODY.
  • z-index only works predictably on positioned elements. Give explicit position + z-index to both the container and overlapping children.
  • IE6/7 layout bug: give problematic elements “layout” (e.g. zoom:1; or an explicit width/height) to prevent odd stacking/overflow.
  • Floats and collapsed parents: if AP children sit inside a floated/uncleared container, the container height can collapse and cause overlap; use a clearfix or overflow:auto/hidden on the parent.

Small example (apply to the problematic container and AP divs):

/* anchor for absolutely positioned children */
#pageContainer { position: relative; width: 960px; margin: 0 auto; }

/* AP divs */
.apDiv { position: absolute; top: 20px; left: 20px; z-index: 10; }

/* IE6/7 layout trigger if needed */
.apDiv { zoom: 1; } /* harmless in modern browsers */

Notes and cautions
Dreamweaver AP layouts are brittle across browsers—replacing large AP-based layouts with semantic containers + floats or modern CSS (flex/grid) is a longer-term fix. For toggle/show-hide issues like ’s advanced search, prefer toggling visibility/opacity or moving off-screen instead of relying only on display switches in IE7.

Recommended Answers

All 6 Replies

Member Avatar for HI2Japan

Apparently the site http://diabetespsychologist.com/
works fine so why not just use the same template and modify the colors. Or are you trying to duplicate what you saw from that template?

Member Avatar for cavemanlawyer15

True, it does work fine--in 99% of instances but unfortunately not the client's. I decide to rebuild from scratch rather than spend a decade diagnosing the problem...

Member Avatar for Suetan

I've checked it out, and it looks fine to me. I'm using IE7 with 1024*768 Screen resolution. If you've got it set up so that it's fluid, you might want to make it static. With it having a static width, there shouldn't be a problem due to the user's screen resolution.

With a fluid design, it's great for people that a higher screen resolution than 800*600, but it's not so great if you're designing it at a higher resolution than what the client is. This is because on your screen it looks great. But when your client sees it, it's all bunched together.

Member Avatar for FC Jamison

It looks good to me as well.

What browser, resolution, and operating system is your client running?

Member Avatar for HI2Japan

Looks fine with IE6 too.

Member Avatar for jhample

I've having the exact problem as described above. Hidden AP Divs work perfectly in Safari and Firefox (PC and Mac Firefox) but NOT IE 7. Perhaps you have a fix?

The link to my Beta site is:

http://footagehead.com/beta/everything.html

Click the "advanced search" link to the left of the Search box and you'll see what I mean.

Any help is greatly appreciated!

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.