Member Avatar for kevindougans

http://www.foodinthecity.com/ in firefox the page starts displaying funny after you scroll down on the middle products section.

in chrome it almost displauys right but you can see its out by a few pixels...

but the weirdest thing is that on our development server it works fine in firefox but we've just uploaded it the live and still have the same problem... any pointers anyone? my CSS is pretty poor.

Thanks!

  • 1 Contributor
  • 1 Reply
  • 105 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by kevindougans

Dani AI

Generated

As found, layout breakage often comes from unexpected HTML in content rather than a mysterious CSS bug. When dynamic text or CMS-entered descriptions end up inside a layout-critical container, a stray tag or unescaped markup can change box sizes or flow only in certain browsers or with certain data.

Preventive practices: validate HTML output and sanitize inputs. Run the page through the W3C Markup Validation Service during development and pre-deploy checks. If descriptions should be plain text, always escape/encode user content before inserting it into templates. If limited HTML is allowed, use a whitelist sanitizer (for example, DOMPurify) and follow the for safe rendering.

Make the CSS more tolerant. Prefer layout models that resist content surprises (Flexbox or Grid) instead of fragile float layouts. Use box-sizing: border-box; so padding doesn’t change widths, and contain cards with overflow:auto or overflow:hidden to prevent inner elements from pushing siblings. Add max-width, min-height, and word-break: break-word on text blocks so long or malformed content can’t overflow.

Practical debugging steps: compare the raw HTML from dev and live (curl or “View Source”), inspect the DOM with browser devtools to spot stray tags, and check any server-side processing (templating, sanitizers, minifiers, or caching) that differs between environments. Adding an automated HTML check in CI or a content-validation step when saving product descriptions will catch regressions before they reach production.

Member Avatar for kevindougans

foudn the problem... some of the descriptions of the chocolate had a paragraph tag in them and it was distorting the display

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.