Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DIV Background Image IE

    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

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

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

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    Quote Originally Posted by Excavator View Post
    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.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry

    Quote Originally Posted by Excavator View Post
    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

  • #8
    Banned
    Join Date
    Jul 2010
    Posts
    66
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by kidda media View Post
    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/

  • #9
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by MattF View Post
    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
    Last edited by kidda media; 11-18-2010 at 04:43 AM.

  • #10
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    Quote Originally Posted by kidda media View Post
    Also kindly note that this site is for a third party.
    So you're designing a site for a website design company?

  • #11
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #12
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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. *&^%#@!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •