...

View Full Version : DIV Background Image IE



kidda media
11-18-2010, 04:03 AM
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
11-18-2010, 04:33 AM
I dont know to what you are referring to on your webpage, you need to explain with code.

Excavator
11-18-2010, 04:53 AM
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
11-18-2010, 04:54 AM
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
11-18-2010, 05:02 AM
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
11-18-2010, 05:15 AM
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
11-18-2010, 05:36 AM
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 :mad:

santhoshj400
11-18-2010, 05:37 AM
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
11-18-2010, 05:39 AM
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
11-18-2010, 06:03 AM
Also kindly note that this site is for a third party.

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

kidda media
11-18-2010, 06:06 AM
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
11-18-2010, 04:12 PM
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. *&^%#@!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum