IE 6 Background image shows up and then disappears. - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

IE 6 Background image shows up and then disappears.

CSS_Kidd

9:24 pm on Mar 3, 2009 (gmt 0)

10+ Year Member

Ok, I am new to the Forums but I have been reading them for reference for a long time. This is the first time I need to ask a question myself. I have searched all over and as of yet, not found an answer.

Here goes… I have a site I am building and I cross browser checked before I had it posted to a beta test site. All worked fine in all browsers, until I posted to the beta version.

Now in IE 6 the main background I use (#main_repeted_bg) will show up as the page loads but then disappears. It is a png but not a transparent on that needs a “twin helix” fix. I mean, it really makes no sense for it to show up for a second and then disappear. Anyone ever have this issue. Or is this just one of those things that only happens to me

CSS and basic HTML layout listed below.

CSS
#main_repeted_bg {
background: url(../images/avc-main-bg.png) repeat-y center top;
width: 840px;
margin-right: auto;
margin-left: auto;
}
#main_container {
background: url(../images/gold-bars.jpg) no-repeat right top;
width: 790px;
margin-right: auto;
margin-left: auto;
padding: 15px;
overflow: hidden;
}

HTML

<body>
<div id="main_repeted-bg" style="height:100%">
<div id="main_container">
<div class="page_content">
Content on the Page.
</div>
</div>
</div>
</body>

Any Help would be appreciated.
Thanks

swa66

10:29 pm on Mar 3, 2009 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Might it be an instance of the "peek-a-boo" bug ?

Fixes to try: let the parent gain the IE proprietary "hasLayout" property (by e.g. setting a conditional comment with "zoom:1;" in it.
Give the parent position: relative (without nudging).

I'm not sure it's that but nor if the fixes help (they don't always help unfortunately)

CSS_Kidd

11:03 pm on Mar 3, 2009 (gmt 0)

10+ Year Member

Yeah that was my first thought. I have tried the one you mentioned along with some other "hasLayout" conditions with the same results. However, I did forget to mention that I use

* {
padding:0px;
margin:0px;
}

I know most wont agree with that but I have been using it forever in order to even out all browsers. It has always worked so I don't think that it's the issue. I have set up pages like this before... Same CSS, without any issues.

I am considering that it might be the background png... I know sometimes that usually freaks IE 6 out on occasion. so I am changing it to a gif and we shall see if that works.

Another thing I think should be noted is that I do have some javascript on the page for some random pictures and quotes.

simonuk

8:41 am on Mar 4, 2009 (gmt 0)

10+ Year Member

IE6 and png's can be funny so testing a gif instead is a good starting place.

I would also check to make sure the png isn't part of the JavaScript element or inside an ID/class being used by the JS. If something hasn't been closed correctly and is still open that could cause no end of problems and would also cause an anomaly like this one.

CSS_Kidd

2:22 pm on Mar 4, 2009 (gmt 0)

10+ Year Member

Changed the png to the gif and it's still not helping. The JS shouldn't effect the background image, it references JPGs farther down on the page. This is just strange.

CSS_Kidd

4:11 pm on Mar 4, 2009 (gmt 0)

10+ Year Member

Ok... So now I feel stupid. Here is the deal. I use the "Multiple IE" program while I am building and testing. I have the beta IE 8 but need IE 6 because some people don't or won't update. Anyways Multiple IE from Tredosoft is what I use. However once a site is posted to production i.e., www, alpha, beta... whatever, it is useless to use for viewing it then. I had to find a machine that still had the "real" IE 6 on it to view it and it looked fine.

Sorry for all the trouble, but thanks for the info!

[edited by: swa66 at 6:43 pm (utc) on Mar. 4, 2009]
[edit reason] Links [/edit]

swa66

6:50 pm on Mar 4, 2009 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

I've seen many attempts at running concurrent versions of IE go wrong in subtle and less subtle ways. As a result I nowadays exclusively use virtual machines that have their own "virgin" copy of IE on them.
If you run windows, Microsoft offer virtual PC for free and even offers images of XP + IE6 for our use (the image is time-bombed, so you need to download it every so often. Those of us running Mac OX can choose a virtualization suite such as parallels or vmware fusion and then install windows in it, and clone it before upgrading so they have all versions as needed.