IE 6 problem

[begabamboo]

Hi guys.

I have a problem regarding Internet Explorer 6 that I haven’t come across before but hopefully someone can help me out. Basically the problem is that I have a horizontally repeating image that is declared in the ‘body’ in the CSS. Now this image is used as a faux header simply to separate the logo and nav from the other content.

The issue is that Firefox is displaying it as intended. IE 7 and 8 beta are displaying it as intended. Hell, even IE 5.5 is displaying the image as I want but IE 6 is having issues. From my understanding, it seems that the image is being stretched the length of the entire body when I only want it to be the height that it is. Now while I have dabbled in CSS, I am no expert so I am hoping someone can help me out. I assume it is nothing terribly hard but still, I am having trouble.

All necessary files (including images of browser comparisons) are is a .zip file located in the link below. If you need me to post them elsewhere or provide the files and pictures in a different way, please tell me and I’ll get onto it.

http://www.mediafire.com/file/umxgmtm15zz/ie-issues.zip

Thanks very much in advance.

[EDIT]: Oh and if you’re wondering why there are many css elements that aren’t even declared in the html it is because this is a design that I will be integrating into CakePHP so these elements will eventually be used.

[EDIT 2]: I thought I would just show the images here. Sorry that they are so small, but they were intended to just outline the obvious problem.

[img]http://img254.imageshack.us/img254/8297/ie55aq5.th.jpg[/img] [img]http://img208.imageshack.us/img208/6633/ie6vi4.th.jpg[/img] [img]http://img208.imageshack.us/img208/5993/ie7zc4.th.jpg[/img]

[begabamboo]

That’s fair enough. If my question hasn’t been answered by tomorrow morning (it’s 11:30pm here in Aus so I’m a tad sleepy) I’ll find some free hosting site and put the site up (do you have any in mind?).

Anyway, the image is 1px width by 102px height and is set to repeat-x. The ‘obeying’ browsers are displaying the repeated image at the top of the window from left to right, and after 102px in height, the background color is displayed from the bottom of the picture down to the bottom of the browser. IE 6 however, is stretching the image from the top of the window to the bottom of the ‘body’ and then repeating that stretched version from left to right.

Thanks for the reply, and like I said, I’ll be happy to host it but maybe in the morning.

Cheers

[begabamboo]

Thanks heaps.

I guess I won’t be having any PNG transparency for this website lol. Not that it matters, I just use that file in every site I do to ensure that transparent PNGs work for IE all the time. I guess now I’ll have to be more cautious.

Thanks very much for your time, now I can keep going with this site.

Cheers

[begabamboo]

Yeah, I do agree that it seems pointless to be hampering our development time etc. to develop for IE 6, but unfortunately, the research my friend and I have undertaken indicates that the target market for our site is overwhelmingly populated by IE 6 users (almost two times the normal average). So while it is frustrating, as long as I can design a reasonably simple layout, then I am content with dodging 2 or 3 problems.

Anyway, thanks again for your help.

[Author]

Posts