Member Avatar for lisan28

Hello everybody! I have shocking news, a design that is working in Firefox, Safari, and Chrome is showing up wierd in Internet Explorer!

First of all I validated my HTML and CSS, no issues there. The page works perfectly fine in Firefox and Safari, but has some quirks in IE. If you look at the following link in IE:

You will notice that the background image is not tiling all the way along the bottom of the screen. Also the content is a bit displaced upwards. Here is what I was trying to accomplish:

-have a fluid layout that would expand and contract to fit different resolutions or if somebody resizes their browser window
-have that frame always present around the edge of the screen and fixed in place
-content will scroll within the frame, rather than the frame expanding vertically to accommodate content.

The css for the above file can be found here:

Eternal gratitude to anyone with suggestions.

  • 2 Contributors
  • 3 Replies
  • 100 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by ltp_lonestar

Dani AI

Generated

Short summary: had a layout that worked in Firefox/Safari/Chrome but showed two IE-only quirks — the bottom frame graphic not tiling across the viewport, and the page content nudged upward. An IE-specific stylesheet solved it in that case, but the root causes are common and worth documenting so others can fix them without trial-and-error.

Quick troubleshooting checklist and minimal fixes

  • Force standards mode. A missing or nonstandard DOCTYPE can put IE into quirks mode and change how backgrounds, heights and margins are calculated. See the DOCTYPE notes on MDN.
  • Reset body margins. Different browsers use different default body margins. A simple body { margin: 0; } removes a frequent source of vertical shift.
  • Apply the background to the element that actually spans the viewport and set repeat/position explicitly. For a horizontal tile along the bottom, put the image on body and use repeat-x bottom left. Example pattern:
html, body {
  height: 100%;
  margin: 0;
}

body {
  background: url("frame-bottom.png") repeat-x bottom left;
}

(See MDN on background-repeat.)

  • If the frame must stay visible while inner content scrolls, use a fixed outer frame and an inner scrolling area. Modern browsers support position: fixed; make the content area use overflow: auto so only it scrolls:
.frame {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
}
.content {
  position: absolute;
  top: 40px; bottom: 40px; left: 40px; right: 40px;
  overflow: auto;
}

Caveats and debugging tips

  • Older IE versions behave differently with position: fixed and where backgrounds are painted. If legacy IE must be supported, a small conditional stylesheet is reasonable (what used). Use the F12 developer tools in IE to inspect computed sizes and the box model differences between browsers. Prefer targeted fixes (reset margins, explicit background-repeat/position, height rules) before adding many browser-specific hacks.

These steps cover the typical causes for non-tiling backgrounds and displaced content in IE while keeping the layout robust across modern browsers.

Recommended Answers

All 3 Replies

Member Avatar for ltp_lonestar

I'm not having any problems in IE. Which version? When I view them side by side they are exactly the same thing.

Member Avatar for lisan28

Hi lonestar, actually I fixed the problem with IE, I just specified an IE specific style sheet to fix it. I was then having a in issue with Safari but that's working now too. :)

Member Avatar for ltp_lonestar

Thats GREAT!

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.