DIV Background Image IE

[kidda media]

Hi All

Just joined the forum and hope to participate where I can, apologies for a question being my first post.

I have a DIV with a background image jpeg, this div then further houses a jquery cycle slideshow div scrolling semi transparent png's.

In ALL browsers except IE this is displaying perfectly yet in IE the background image of the back DIV is not displaying and I have no idea why??

Can anyone shed any light on this?

I have not placed my CSS code here but can if necessary?

The page is up here .... http://www.kiddamedia.com/Leaf%20Web%20Workshop/

Thanks in advance for any help

Thanks

John

[quartzy]

I dont know to what you are referring to on your webpage, you need to explain with code.

[Excavator]

Hello kidda media,
Your link is plenty, we can get the code from that.

Since All my browsers show #slider's bg image slider_bg.jpg I can only assume you're having trouble with IE6...

If I had to guess, I'd bet your .png's are not transparent in that browser. IE6 needs a hack to display .png like other browsers. Google IE6 png fix and see if that helps.

[kidda media]

First up is the HTML

<div id="slider_wrap">
<div id="slider_container">

<div id="slider">
<div class="slideshow">
<img src="images/home_banner_image_1.png"/>
<img src="images/home_banner_image_2.png"/>
<img src="images/home_banner_image_3.png"/>
</div>
</div>
</div>
</div>

And now the CSS

/* Slidehow Element */

.slideshow { height: 326px; width: 936px; margin:0px;}

.slideshow img {}

#slider_wrap {width:100%; height:350px; background:#65944a; border-top:#fff 2px groove; border-bottom:#fff 2px groove;}

#slider_container { margin:0 auto; height:350px; width:960px;}

#slider { height:326px; width:936px; background:#FFF; margin:10px 10px; border:#fff 2px groove; background:url(../images/slider_bg.jpg);}


I and the above code refer to the Green slider element below the header with green background and its contents as per my original email.

Cheers in advance

John

[MattF]

Originally Posted by Excavator

Since All my browsers show #slider's bg image slider_bg.jpg I can only assume you're having trouble with IE6...

If I had to guess, I'd bet your .png's are not transparent in that browser. IE6 needs a hack to display .png like other browsers. Google IE6 png fix and see if that helps.

IE8 displays the symptoms too. That squirly line picture in the background is being covered by the slideshow images.


Btw, John, (I did try thinking of a subtle way of saying this but failed), that site is not a glowing endorsement of abilities when you're trying to put yoursel(f|ves) across as professional web designers. Nav functionality sucks without JS enabled, (even with it enabled, for that matter), the layout goes to pot etc. Nothing seems to work or display correctly other than the slideshow. K-Meleon browser, just incase you're wondering.

[Excavator]

Yes, looking again I see my IE8 shows the problem.

Have you checked the validator? Plenty of errors there that could be fixed, not sure that's the cause of your problem but it does seem to follow that a web authors site should be valid code.

[kidda media]

Originally Posted by Excavator

Hello kidda media,
Your link is plenty, we can get the code from that.

Since All my browsers show #slider's bg image slider_bg.jpg I can only assume you're having trouble with IE6...

If I had to guess, I'd bet your .png's are not transparent in that browser. IE6 needs a hack to display .png like other browsers. Google IE6 png fix and see if that helps.

Hi There

No this issue is IE8, I think is not an issue with the PNG but with the background image, I just cant work it out

[santhoshj400]

Originally Posted by kidda media

Hi All

Just joined the forum and hope to participate where I can, apologies for a question being my first post.

I have a DIV with a background image jpeg, this div then further houses a jquery cycle slideshow div scrolling semi transparent png's.

In ALL browsers except IE this is displaying perfectly yet in IE the background image of the back DIV is not displaying and I have no idea why??

Can anyone shed any light on this?

I have not placed my CSS code here but can if necessary?

The page is up here .... http://www.kiddamedia.com/Leaf%20Web%20Workshop/

Thanks in advance for any help

Thanks

John

Hi,
i think it is png image which will not be displayed on IE 6 ,im saying this because i cant find which image is it please get Png fix from following link

http://www.twinhelix.com/css/iepngfix/

[kidda media]

Originally Posted by MattF

IE8 displays the symptoms too. That squirly line picture in the background is being covered by the slideshow images.


Btw, John, (I did try thinking of a subtle way of saying this but failed), that site is not a glowing endorsement of abilities when you're trying to put yoursel(f|ves) across as professional web designers. Nav functionality sucks without JS enabled, (even with it enabled, for that matter), the layout goes to pot etc. Nothing seems to work or display correctly other than the slideshow. K-Meleon browser, just incase you're wondering.

This is not live in any shape or form yet and only in development, is on a temporary server while I iron issues out, I put it up so I could get feedback on one issue that is being addressed here. Also kindly note that this site is for a third party. Maybe you should reserve comments such as this until you are aware of all facts, then I would be happy to recieve critique. Thanks

[MattF]

Originally Posted by kidda media

Also kindly note that this site is for a third party.

So you're designing a site for a website design company?

[kidda media]

I am working on the site with them and I do not work for the company, so as such they are a third party. The content of the site and how they pitch themselves is up to them.

[kidda media]

RESOLVED

FYI this is down to an options setting in the Jquery Cycle plugin that forces IE to ditch the background image of a DIV when overlayed by the a DIV containing the cycle DIV

Thanks to some of you for taking the time to respond to my first post, to one 'Senior Coder' PM me and I will happily show you a finished site you can critique all the way rather than sabotage a quite innocent post and ask for help. *&^%#@!