Member Avatar for kavithakesav

Hi, I workd nearly 5 to 6 web projects useing CSS, But still i m facing the same problm in all browsers the page alignment and page format not comng properly for that any solutions is thr.

Starting onwards i m testing in all browsers dn also its very difficulting for me.

  • 4 Contributors
  • 3 Replies
  • 95 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by jetru

Dani AI

Generated

Cross-browser layout differences usually come from three controllable causes: a nonstandard DOCTYPE (quirks mode), differing user-agent defaults, and inconsistent sizing rules. , and have already pointed at those pain points; the practical steps below show modern, reliable fixes that build on their comments.

Apply a standards DOCTYPE and normalize browser defaults (MDN — Doctype; normalize.css). Force a single box model for every element to remove interpretation gaps:

/* consistent box model */
*, *::before, *::after {
  box-sizing: border-box;
}

Prefer modern layout modules (Flexbox, Grid) for predictable alignment and flow (MDN — Flexbox). Use relative units appropriately: rem for type and spacing, % or vw for fluid widths, and min-width/max-width to avoid collapse. Automate vendor handling with tools like Autoprefixer and use feature detection/polyfills (Modernizr) instead of relying on browser-specific hacks.

Validate and test in real browsers and their devtools; inspect computed styles and box-model values to find where alignment diverges (MDN — Browser developer tools; W3C validators). These steps directly address 's box-model issue, extend 's point about relative sizing, and offer a modern alternative to 's legacy IE workarounds for long-term stability.

Recommended Answers

All 3 Replies

Member Avatar for MidiMagic

I have done it. There is a trick to it:

Don't use the same block element for both something using a defined width or size (either absolute or relative), and a surrounding style (margin, border, or padding). Nest them in the order you want them defined.

Why:

- Firefox puts the surrounding styles OUTSIDE the defined width or size of the block element.

- IE puts the surrounding styles INSIDE the defined width or size of the block element.

If you nest two blocks, o0ne with defined size, and one with surrounding styles, then YOU get to define whether the surrounding styles are inside, or outside, the defined sizes.

commented: nice comments ~GiorgosK +1
Member Avatar for jaepi

use percentage in sizes and alignment rather than px.

Member Avatar for jetru

Ya i agree, this is really hard! Wish the whole world used Gecko!
Anyway, you could try using the conditional tags Google it up.

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

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.