Member Avatar for adaykin

Hey,

This site is working ok in all browsers except IE. The background images will not show up in IE. I have tried a few different solutions, but they just don't like to show up for some reason.

There's another problem that is occurring in all browsers. The Calculators and e-Tools table shows up in the top left and top right corners before the page completely loads. Once the page has loaded a little more they do show up in the correct location. How can I fix this?

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

Dani AI

Generated

Brief recap: identified a markup problem early on and confirmed layout tweaks fixed the visible repositioning; asked whether the image size or viewport was relevant. Since the markup/position fix removed the page-shift but IE still refuses to paint the background, the remaining causes are IE-specific rendering rules rather than ordinary HTML errors.

Quick checklist and targeted tests (do these in IE with the dev tools open):

  • Confirm the background rule is actually applied and the computed background-image URL is present. Toggle the rule live to see changes.
  • Ensure the element has visible area before the image loads (try a temporary background-color or min-height). If the element collapses to zero height, other browsers may still show something but IE can treat it differently.
  • Check stacking and coverage: a positioned child or overlay can hide a parent background. Test by forcing a very high z-index on the element or temporarily removing overlapping elements.
  • Watch for IE-only bugs: older IE needs "hasLayout" for some paint behaviors. Trigger it safely with zoom:1 or explicit width/height. Also avoid using CSS features IE does not support (multiple background images, CSS3 gradients) without a fallback.

Minimal example to test a candidate fix:

.test-bg {
  zoom: 1;            /* triggers hasLayout in IE6/7 */
  min-height: 200px;  /* ensures the element has area */
  background: url('/images/bg.png') repeat;
}

Other points: image URLs in CSS are resolved relative to the CSS file (not the HTML), so try an absolute URL as a test. If the computed style shows the URL but the image fails to load, verify the image request (open it directly) and server headers. If nothing obvious shows, isolate the element and stylesheet on a tiny test page — that often reveals whether the problem is a global parsing error, a later CSS rule, or an IE rendering quirk. Use conditional IE styles only as a last resort and prefer minimal, targeted fixes (zoom/hasLayout, explicit sizing) rather than broad hacks.

Recommended Answers

All 3 Replies

Member Avatar for omniuni

Line 259 you have not closed a DIV, I suspect this is part of both problems. Check your page through http://validator.w3.org/

Member Avatar for adaykin

Line 259 you have not closed a DIV, I suspect this is part of both problems. Check your page through http://validator.w3.org/

Hey, I updated my code, but the first problem still persists. To fix the second I had to change the position of the surrounding div to relative.

Member Avatar for MidiMagic

Is your image larger than the viewport?

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.