Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Junior Member
    Join Date
    May 2010
    Posts
    8
    Member #
    22003
    Hi there,

    I didn't find any posts here or anywhere else that quite match up with the issue that I'm facing now. I'm building a website for a client, and she's running IE7, and unfortunately most (but not all) of my PNG images are loading fine, while one of them refuses to load.

    Basically, I've got a three transparent png images, which serve as the top, middle, and bottom of a piece of "paper" serving as a holder for text content. The three images were sliced from the same source, have the same color profile, are roughly the same dimensions & size, and are pointing to the same folder. The middle image will not load in IE7 and earlier. The only difference that I can see between the three is that the middle image has a background:repeat-y going on, whereas the top & bottom are set to no-repeat.

    The pages & images work fine in Firefox, Chrome, Safari, and IE8, just not IE7 and earlier.

    There are a lot of pages in the site that use this piece of paper, but here is one example:
    http://helixriver.com/clients/paperd...wer/index.html

    Here's the CSS for the papers:

    #portfolio-description-TOP {
    background: url(../images/portfolio/portfolio_descriptionBG_TOP.png) no-repeat center top;
    height: 44px;
    }
    #portfolio-description-MIDDLE {
    background: url(../images/portfolio/portfolio_descriptionBG_MIDDLE.png) repeat-y center top;
    padding: 0px 50px 10px 25px;
    }
    #portfolio-description-BOTTOM {
    background: url(../images/portfolio/portfolio_descriptionBG_BOTTOM.png) no-repeat center top;
    height: 50px;
    }


    I've tried a variety of things to resolve this, such as:

    -- changing the image reference to a specific folder on the site ("http://www.helixriver.com/..."etc)

    -- resaving the image to see if it was corrupted or something.

    -- asked my client to clear her cache & reload the page (but I've also seen it happening on other systems, via "browsershots.org")

    None of which has solved the problem.



    Especially since my client is using IE7, it's crucial that I find a fix for this. Any help will be greatly appreciated.

    By the way, the CSS validates just fine, thank you very much , and the HTML almost validates, if it weren't for the Flash movie slideshow.



    Many thanks for any help that you can offer.
    Ryan

  2.  

  3. #2
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    I just checked on IE7 and it looks fine (Windows Vista). IE6 is a disaster in terms of the layout and that paper bg too. Did you change something? I use that same coding for a few sites and it usually works well. Only thing I don't use is the transparent property. Is there a reason for the transparent property on those bg's?

    Cool site btw

  4. #3
    Member John Tanedo's Avatar
    Join Date
    Apr 2010
    Location
    Ca***an de Oro City, Philippines
    Posts
    72
    Member #
    21794
    dude!looks ok on ie7 . . .for ie6 try using the iepngfix. . .here is the link http://www.twinhelix.com download it there and follow the instructions. . . and dont use short hands on ie6 . . . e.g. instead of using #content-TOP {background:transparent url(../images/portfolio/portfolio_titleBG.png) no-repeat scroll left top;}

    make it #content-TOP {background-image:url(../images/portfolio/portfolio_titleBG.png);
    background-repeat:no-repeat;
    background-position:left top;

    hope this helps and hope im making sense here :-\

  5. #4
    Member tayzor17's Avatar
    Join Date
    May 2010
    Posts
    34
    Member #
    21996
    cant wait until ie6 is destoryed

  6. #5
    Junior Member
    Join Date
    May 2010
    Posts
    8
    Member #
    22003
    Quote Originally Posted by aeroweb99
    I just checked on IE7 and it looks fine (Windows Vista). IE6 is a disaster in terms of the layout and that paper bg too. Did you change something? I use that same coding for a few sites and it usually works well. Only thing I don't use is the transparent property. Is there a reason for the transparent property on those bg's?

    Cool site btw
    Yeah, I ended up experimenting with the CSS again, and noticed that the only other thing different between the TOP, MIDDLE, and BOTTOM layers was that top and bottom have a "height" value. Since it needs to expand, I can't set a height for it, so I tried "min-height", and bam, that seemed to work. I'm not sure if that is fully valid in all browsers - perhaps that's why it's a total disaster in IE6? Well, despite the fact that IE6 appears to welcome and cherish disaster, that is.

    As far as the transparency goes, it is necessary on a variety of images site wide, so that the top layers can slide across the background when the window is resized.

    I'm going to work on the iepngfix, as noted by John Tanedo, but so far I can't seem to get it to work.

  7. #6
    Junior Member
    Join Date
    May 2010
    Posts
    8
    Member #
    22003
    Quote Originally Posted by John Tanedo
    dude!looks ok on ie7 . . .for ie6 try using the iepngfix. . .here is the link http://www.twinhelix.com download it there and follow the instructions. . . and dont use short hands on ie6 . . . e.g. instead of using #content-TOP {background:transparent url(../images/portfolio/portfolio_titleBG.png) no-repeat scroll left top;}

    make it #content-TOP {background-image:url(../images/portfolio/portfolio_titleBG.png);
    background-repeat:no-repeat;
    background-position:left top;

    hope this helps and hope im making sense here :-\
    finally IE7 is cooperating, for sure - perhaps because of luck or I don't know what. But as i mentioned in my reply to aeroweb above, I just added a "min-height" value to the MIDDLE layer. And that seemed to work. But it's still a disaster in IE6, both for the transparency and the layout is collapsing a bit. I've tried putting in the iepngfix, but no luck so far. This is the CSS code I've got:

    #header-BG, #nav-btns #home, #nav-btns #home a:hover, #nav-btns #designs, #nav-btns #designs a:hover, #nav-btns #portfolio, #nav-btns #portfolio a:hover, #nav-btns #about, #nav-btns #about a:hover, #nav-btns #contact, #nav-btns #contact a:hover, #content-TOP, #content-MIDDLE, #content-BOTTOM, #footer-BG {
    behavior: url("iepngfix.htc")
    }

    I've referenced all of the transparent images in the majority of the site there, but it's not working. I tried adding that "alert" message that the twinhelix.com instructions recommend, and the alert showed up.

    For the shorthand - should I not use shorthand at all? Or just for the problem areas here with IE6? I thought that using shorthand was the recommended practice. I'm relatively new at using CSS, and I'm finally progressing (a bit) from pure "throw a dart while wearing a blindfold and hope that it hits the target and not someone's girlfriend" style of coding.

  8. #7
    Junior Member
    Join Date
    May 2010
    Posts
    8
    Member #
    22003
    Quote Originally Posted by tayzor17
    cant wait until ie6 is destoryed
    I'm with you there, it's always gettin' in my way....

  9. #8
    Member John Tanedo's Avatar
    Join Date
    Apr 2010
    Location
    Ca***an de Oro City, Philippines
    Posts
    72
    Member #
    21794
    Quote Originally Posted by thefarcorner
    finally IE7 is cooperating, for sure - perhaps because of luck or I don't know what. But as i mentioned in my reply to aeroweb above, I just added a "min-height" value to the MIDDLE layer. And that seemed to work. But it's still a disaster in IE6, both for the transparency and the layout is collapsing a bit. I've tried putting in the iepngfix, but no luck so far. This is the CSS code I've got:

    #header-BG, #nav-btns #home, #nav-btns #home a:hover, #nav-btns #designs, #nav-btns #designs a:hover, #nav-btns #portfolio, #nav-btns #portfolio a:hover, #nav-btns #about, #nav-btns #about a:hover, #nav-btns #contact, #nav-btns #contact a:hover, #content-TOP, #content-MIDDLE, #content-BOTTOM, #footer-BG {
    behavior: url("iepngfix.htc")
    }

    I've referenced all of the transparent images in the majority of the site there, but it's not working. I tried adding that "alert" message that the twinhelix.com instructions recommend, and the alert showed up.

    For the shorthand - should I not use shorthand at all? Or just for the problem areas here with IE6? I thought that using shorthand was the recommended practice. I'm relatively new at using CSS, and I'm finally progressing (a bit) from pure "throw a dart while wearing a blindfold and hope that it hits the target and not someone's girlfriend" style of coding.
    did you make a separate stylesheet for ie6? i recommend that you should... then put this inside your header tag
    Code:
        <!--[if IE 6]>
                      <link rel="stylesheet" type="text/css" href=" /yourfile’sfolderlocation/ie6.css" />
      <![endif]-->
    put all the affected elements there but don't use shorthands... ie6 does not support shorthands. . . again always make sure that the files location is correct...

    for the ie png fix . . . just put in div,a,img,input{
    behavior: url("iepngfix.htc")
    }(a:hover is not supported so better make a jpeg version for this and add cursorointer to your elements attributes or better yet download the watever:hover script here:http://www.xs4all.nl/~peterned/csshover.html.....)

    if the iepngfix location is at the root then there should not be a problem here. . . but if you placed it inside a folder then you must specify the location... e.g. url("/yourfolder'sname/iepngfix.htc")

    keep in mind that it is very very important( i can not stress enough) to be exact on the location of the file... I guarantee that iepngfix works i have used it. . . you just need to be precise on the linking...

    have you opened the iepngfix.htc file and make sure that IEPNGFix.blankImg = '/images/blank.gif'; (or whatever the location you put the blank.gif on?)

    hope you do get what im saying here :-)

  10. #9
    Junior Member
    Join Date
    May 2010
    Posts
    8
    Member #
    22003
    Hi John, thanks for all your help with this. I'm making a bit of progress - the site looks fine in IE7, which is most important since that's what my client's viewing it on It's still a total disaster in IE6 though, to the point that it's unusable. The transparency fix is working... but there's got to be some other major issue that is causing all of the links to be broken/inaccessible. The best thing I can think is because I have a "z-index" set up on the Header div and MainContent div, so that the strings appear to go behind the top paper. Whatever is the issue is causing the whole thing to totally collapse.

    As far as the IE6 stylesheet:

    Quote Originally Posted by John Tanedo
    did you make a separate stylesheet for ie6? i recommend that you should... then put this inside your header tag
    Code:
        <!--[if IE 6]>
                      <link rel="stylesheet" type="text/css" href=" /yourfile’sfolderlocation/ie6.css" />
      <![endif]-->
    put all the affected elements there but don't use shorthands... ie6 does not support shorthands. . . again always make sure that the files location is correct...
    I've been trying to get this IE6 stylesheet to work, but it's not seeming to read it. Nothing that I add to this separate sheet seems to make any effect. Here's the code I've got in the head:
    Code:
    <!--[if IE 6]>
    	<link rel="stylesheet" type="text/css" href="CSS/PDI_main_ie6.css" media="screen" />
    <![endif]-->
    But whatever I do to the IE6 stylesheet, it doesn't have any effect. Any ideas?


    Quote Originally Posted by John Tanedo
    for the ie png fix . . . just put in div,a,img,input{
    behavior: url("iepngfix.htc")}
    Perfect, got that working, thanks!

    Quote Originally Posted by John Tanedo
    (a:hover is not supported so better make a jpeg version for this and add cursorointer to your elements attributes or better yet download the watever:hover script here:http://www.xs4all.nl/~peterned/csshover.html.....)
    Thanks again, the whatever:hover script works great! I've got it set up on another site that I'm working on right now, and everything seems to be in good shape on all the browsers. Here's the link:
    http://www.helixriver.com/clients/oakcountrypeddler

    Thanks again John for all your help in this.

    PS - I saw in another of your posts about you starting up a web designer's band? Dude, I'm in! I play the drums (both set and hand drums). Gotta do something to get away from the computer sometimes!

  11. #10
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Quote Originally Posted by thefarcorner

    PS - I saw in another of your posts about you starting up a web designer's band? Dude, I'm in! I play the drums (both set and hand drums). Gotta do something to get away from the computer sometimes!
    Aww don't get us goin! Is this our destiny John? It all makes sense now...


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:28 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com