Weird display problem in IE

Hi all,

I'm new to web-dev, and I'm building my first site (for my girlfriend). I'm getting strange effects in IE (no problems in FireFox) where the header frame displays all black, or part of a different frame, and resizing the window sends it haywire!

The site is currently here: http://ccgi.paulyeoman.plus.com/sparkle/

Ignore for the moment the lack of content, etc - there's a ways to go yet.

Does anyone have any idea what is happening here and how to prevent it? Also, the W3C validator dislikes my use of FRAMEBORDER for the frameset, but removing this attribute has no effect on the above problem.

Thanks in advance,

Paul

Any reason you are using frames? I did not see the effect in IE but then I hit refresh I saw the black & then it disappeared. I then got a scroll bar & the header frame locked up on me. And I also see the footer frame in the header frame.

Thanks for having a look Corey.

Well I'm using frames because I want the header, sidebar and footer to remain stationary in the site, as they'll provide standard links to places, and branding in the header. The product area is scrollable.

Any idea why these weird effects are happening in the header though?

Paul

I'm looking at this, too. The code looks pretty good to me so far, although I wouldn't claim to be an expert with frames. Right now it seems to me to be a problem with correctly rendering the .png file from main.html to the home page.

Could you post your css code?

BTW, you can use css to prevent blocks from scrolling Here's one that's humorous and nicely done:

http://cssplay.co.uk/layouts/frame.html

Sorry, Paul, I can't even get my editor to render the .png on the main page.

IE is apparently stricter on frames syntax than Netscape.

One idea to try for a fix is to assign z-index: 1; to your header and make sure it has an opaque background and 100% width.

On a cursuroy glance, no. Unfortunately I will be out of town for a few days so someone else might know.

You can achieve the same function actually using server side includes. Using these, you can change one page & have all the pages updated accordingly.

If you wanted / needed the scrolling - you could actually use layers. This way, search engines would be able to spider your website a bit better than frames

Thank you both for taking the time to look at this.

I've now fixed it! Masonbarge, I tried your suggestion of the opaque background, by setting it to white, and it now seems to render correctly in IE. The z-index change I tried but it had no effect.

Anyway, it's working for the moment. If you're interested, the relevant CSS portion is this:

Code: Select all

.HeaderBody {
    background-image: url(images/logos/Sparkle_Logo_Text_small.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-color: #FFFFFF;
    }

Previously there was no background-color specified and that seemed to be the problem. Also the reason for making it a background image was that it was the only way I could find to get the image to the very corner of the screen.

I'll also have a look into the other techniques you suggested (layers, etc). Am I right in thinking that frames are a bit outmoded?

Thanks again,

Paul

I would say so - SEs do not really like them and sometimes they are more of a pain than anything on design / development.

You can create everything you need by using either SSI / CSS and maybe it look like frames or using SSI - change one file for the nav, header, etc