Member Avatar for kylethedarkn
kylethedarkn 23 A.K.A. The Laughing Man

Ok so I set up this pretty snazzy website and everything looks good and dandy until you unmaximize the window. Then several images start to overlap. Also on some computers it overlaps when unmaximazed and others it doesn't. All were viewed from FF3 so its not different browsers causing the problem.

Anybody know a way around this?

Here's a link to the site.

  • 1 Contributor
  • 0 Replies
  • 123 Views

Dani AI

Generated

— overlapping images when the window is not full-screen is usually a layout reflow problem rather than an image file issue. Common causes are absolute positioning or fixed pixel math that does not adapt, floats that are not cleared, container widths that collapse when the viewport shrinks, or the page rendering in quirks mode because of a missing/old DOCTYPE. Machine-specific differences often come from different system fonts, zoom/DPI settings, or scrollbar behavior that change the available width and force elements to collide.

Quick diagnostic steps: use the browser DOM inspector while resizing the window to watch computed boxes; apply a temporary outline to expose bounding boxes; search for position:absolute, negative margins, or floated elements that lack a clearfix; check whether container widths are fixed in pixels rather than percentages; and confirm a standards DOCTYPE (<!DOCTYPE html>) so browsers use the same layout mode.

Practical fixes that resolve most overlap issues:

* { box-sizing: border-box; }

img { display: block; max-width: 100%; height: auto; }

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* alternative to clearfix for a container */
.row { overflow: auto; }

If images or panels were placed with position:absolute and pixel offsets, consider converting them to floats or display:inline-block, or give their wrapper a sensible min-width so the layout doesn’t collapse. Use max-width on images rather than width:100% when preserving intrinsic sizing matters.

Cautions and resources: overflow:hidden will clip overflowed content; min-width forces horizontal scrolling on small viewports. Validate HTML/CSS and test with different zoom/DPI/font settings. See MDN for max-width and box-sizing, and use the W3C validator to catch markup problems that can trigger inconsistent behavior.

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.