Member Avatar for nleaf

So just did a basic-grid layout scheme, looks fantastic in fire.... But IE brings up a couple problems.. Tried using the P.I.E. fix with no prevail, have a feeling its going to end up being a padding issue. (Which I can always just throw on the <p>. Just seeing if anyone has any input thanks!

  • 3 Contributors
  • 4 Replies
  • 91 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

This thread shows a classic cross-browser issue: a grid that lines up in Firefox but is off by a pixel in IE. correctly tracked the symptom to borders; small differences in how browsers add borders, round fractional pixels, and enter quirks mode can produce exactly that 1px shift. is right that one-pixel differences happen; the useful response is to diagnose and make the layout resilient rather than chase perfect parity in every engine. has a point about doing hands-on investigation — the steps below are the quickest practical checks.

Practical troubleshooting and fixes:

  • Confirm a standards DOCTYPE so IE uses standards mode.
  • Temporarily remove borders (or set outline:1px solid rgba(255,0,0,0.5)) to visualize element boxes and see what changes.
  • Use box-sizing: border-box for grid elements so borders/padding are included in width calculations.
* { box-sizing: border-box; }
img { display: block; }
  • Where possible, use integer pixel widths for columns (or accept fluid rounding) and avoid relying on exact pixel-snapping across engines.
  • If using CSS3 PIE or other IE shims, test with it disabled; such shims can alter layout or trigger hasLayout issues in old IE (adding zoom:1 sometimes helps in IE6/7).
  • Use IE dev tools to inspect computed widths, borders, and offsets.

Final note: for long-term maintenance prefer modern layout methods (Flexbox/Grid) and graceful fallbacks for legacy browsers. Fix only what affects users — sometimes tolerating a 1px difference is the cleaner solution.

Recommended Answers

All 4 Replies

Member Avatar for nleaf

so ended up fixing the problem and came up with a new one. Depending on what browser your using, it looks like the background image is off 1 pixel... Any ideas?

Member Avatar for nleaf

so found out IE funks up ON BORDERS (in certain scenarios) . That was the problem.. Thanks for the tons of help!

Member Avatar for peter_budo

I do not want to be sarcastic but there is nowhere said that this forum provides 24/7 support.
On the other hand is great you solved your problem, personal research of issue is another way to solve it instead of waiting for some one else to provide you with solution.

Member Avatar for MidiMagic

IE often does things one pixel different. You have to make your designs so a pixel does not matter.

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.