So I’ve been working on one of our intranet sites and it looks just fine when I view it independently. Unfortunately though, we have everything in a frames environment…so when I view the site in the frames, the copy gets all tripped out, stacking upon itself when I scroll and/or navigate to other pages within that site.

I know it’s a stylesheet issue, for when I remove the stylesheet the problem goes away. But the thing I can’t figure out is why it’s doing it, when all the styles are W3C compliant and aren’t doing much other than setting padding values, font sizes, a few background elements. Pretty basic stuff.

Check it out for yourself: Before & After

I’m pretty much losing my mind trying to figure this out, since there’s another site that uses the SAME CODE (just located on a different server) and works just fine. Go figure.

Any thoughts anyone out there in the web development community?

---

UPDATE

For starters…this DOES work properly in Firefox. That wasn’t a suprise. But if you look at the example images, I’ve got a white then gray stripe down the left side. The image basically stops at the end of the gray stripe and I have it repeating vertically (Y axis) and have the following code in the body { } style:
background-image: url("../images/side_graystripe.gif");
background-repeat:repeat-y;
So I tried removing that snippet and everything worked fine. My solution? Take that background .gif image and extended it to 1600 px wide (the max width it’d be viewable at) and left the code in the stylesheet.

IE is apparently freezing the content when you scroll or nav to other pages with that same background code. Can we say “BUG?”

It’s an unusual scenario, I know, but at least I figured it out. Hope this helps anyone out there running into the same issue.

March 23, 2006, 4:04 pm

Filed under: CSS, HTML, JavaScript

Leave a Comment

You must be logged in to post a comment.