WEB Why won't my images display in firefox?

Discussion in 'OT Technology' started by Shuffles, Sep 24, 2009.

  1. Shuffles

    Shuffles Grumpy old man at heart.

    Joined:
    Apr 19, 2004
    Messages:
    11,575
    Likes Received:
    4
    Location:
    NOVA
    I'm redoing this website, and everything works when I view the page in IE. When I view it in FireFox, my images don't appear. I checked my firefox settings; nothing is being blocked, javascript is enabled, etc. Have any of you encountered this before?


    Additional info:
    -When the user clicks on an image, a <div> is toggled visible or invisible, and the image itself is toggled between collapse.jpg and expand.jpg.
    -The image is displayed as the background-image property of an <a> tag.
    -I'm using JQuery to change the background-image property on clicking.
     
  2. brds

    brds OT Supporter

    Joined:
    Jun 26, 2006
    Messages:
    17,642
    Likes Received:
    13
    Location:
    Atlanta
    post code
     
  3. Shuffles

    Shuffles Grumpy old man at heart.

    Joined:
    Apr 19, 2004
    Messages:
    11,575
    Likes Received:
    4
    Location:
    NOVA
    There's probably a better way to do this than using a table like I am. I'm learning as I go.

    Code:
    <html>
    <head>
    <title>Copy of Projects</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript" language="javascript" src="jquery.js"></script>
    <script type="text/javascript" language="javascript">
    $(document).ready(function() {
     //This table associates each toggle link with an area of text to collapse or expand.
     //Table structure:[0]=Text to collapse or expand, [1]=height of text area, [2]=<a> tag contaning the toggle icon. 
     var map = new Array(); 
     map['toggleEcon'] = new Array($('#EconText'), $('#EconText').height(), $('a#toggleEcon'));
     map['toggleP1'] = new Array($('#P1Text'), $('#P1Text').height(), $('a#toggleP1'));
     map['toggleP2'] = new Array($('#P2Text'), $('#P2Text').height(), $('a#toggleP2'));
     map['toggleP3'] = new Array($('#P3Text'), $('#P3Text').height(), $('a#toggleP3'));
     
     
     //It's important to hide these text items after the document is loaded, but before they are displayed. 
     //If you were to set them to display:none from the start, their heights would not initially be stored in the map table,
     //leading to sudden appearances of the text, rather than the sliding effect. 
     $('#EconText').hide().css({ height : 1 });
     $('#P1Text').hide().css({ height : 1 });
     $('#P2Text').hide().css({ height : 1 });
     $('#P3Text').hide().css({ height : 1 });
     
     
    //This function will run whenever a link of class "testLink" is clicked.
     $('a.testLink').click(function()
      { //If the associated text field is already shown, we want to hide it.
      if ( map[this.id][0].is(':visible'))
      { 
       var name = this.id;
          map[this.id][0].animate({ height: 1 }, { duration: 400, complete: function (){map[name][0].hide();}});
       map[this.id][2].css('background', 'url("Images/expand.jpg") no-repeat');   
      } 
      else //Otherwise, show the text field. In both cases, we also switch the background image
      {
       map[this.id][0].show().animate({ height : map[this.id][1] }, { duration: 400 });
       map[this.id][2].css('background', 'url("Images/collapse.jpg") no-repeat');   
      }
     
         return false;
      });
    });
    </script>
    <style>
    #Econometric {
    position:relative;
    }
    #expandEcon, .collapseEcon{
        left:260px;
    }
    .testLink{
     width:11px; 
     height:11px;
     background:url("Images/expand.jpg") no-repeat;
     position:relative; 
     top:5px;
    }
    .ProjectTable{
    border:1px solid black;
    }
    .ProjectDesc{
    background-color:grey;
    }
    </style>
    </head>
     
    <body>
       <div id="Econometric">
       <div class="CategoryHeader">Econometric Analysis and Modeling<a id="toggleEcon" class="testLink" href="#"></a></div>
     
     
       <div class="CategoryText"><p>(COMPANY) is a recognized industry leader in applying rigorous econometric analysis
       to the problems of both the public and private-sector. Our economists and operations
       research analysts have experience developing models tailored to each client's unique situation,
       needs and experience and communicating the outcome of these models in a way easily accessible to decision-makers
       in all fields.  Our models use sophisticated econometric techniques to parse the true impact our client's decisions
       have on the choices employees and customers make.</p></div>
       <div id="EconText" class="ProjectList">
     Project 1<a id="toggleP1" class="testLink" href="#"></a>
      <div id="P1Text"><table class="ProjectTable">
      <tr><td class="ProjectDesc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
     incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
     ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
     nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
     </td>
     </tr>
     </table>
     </div>
     <br>
     Project 2<a id="toggleP2" class="testLink" href="#"></a>
      <div id="P2Text"><table class="ProjectTable">
      <tr><td class="ProjectDesc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
     incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
     ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
     nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
     </td>
     </tr>
     </table>
     </div>
     <br>
     Project 3<a id="toggleP3" class="testLink" href="#"></a>
      <div id="P3Text"><table class="ProjectTable">
      <tr><td class="ProjectDesc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
     incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
     ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
     nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
     </td>
     </tr>
     </table>
     </div>
     
      </div><!--ProjectList-->
      </div><!--Econometric-->
     
    </body>
    </html>
    
     
  4. Phasm

    Phasm OT Supporter

    Joined:
    Sep 20, 2005
    Messages:
    9,680
    Likes Received:
    0
    Location:
    Michigan
    post link
     
  5. Phasm

    Phasm OT Supporter

    Joined:
    Sep 20, 2005
    Messages:
    9,680
    Likes Received:
    0
    Location:
    Michigan
    i has an idea but need to see the site
     
  6. Shuffles

    Shuffles Grumpy old man at heart.

    Joined:
    Apr 19, 2004
    Messages:
    11,575
    Likes Received:
    4
    Location:
    NOVA
    I'm developing it locally. I guess I could put it on the server without any links going to it and give you the url, but I'm trying to keep the company I work for anonymous. :hsd:
     
  7. Shuffles

    Shuffles Grumpy old man at heart.

    Joined:
    Apr 19, 2004
    Messages:
    11,575
    Likes Received:
    4
    Location:
    NOVA
    Please post your idea, though. I'll give it a try.
     
  8. Phasm

    Phasm OT Supporter

    Joined:
    Sep 20, 2005
    Messages:
    9,680
    Likes Received:
    0
    Location:
    Michigan
    I know it sounded retarded, but is the I in the images folder name capitalized (Images)? It might not be picking up the path correctly because it's case sensitive
     
  9. Pepsi1975

    Pepsi1975 Mod of the Year

    Joined:
    Jan 6, 2005
    Messages:
    47,590
    Likes Received:
    0
    Location:
    Detroit
    or JPG vs jpg, i have had that problem with ff before
     
  10. bomber

    bomber Go Balls Deep

    Joined:
    Jul 14, 2006
    Messages:
    108
    Likes Received:
    0
    Location:
    Philadelphia
    I didn't actually try any of this code so I'm sure there is probably an error somewhere, but it is way easier than the way your doing it. Notice the new id's on the text divs are different.

    By applying the class of expanded it should overwrite the other background image, assuming your first background image is even working...

    Code:
    <html>
    <head>
    <title>Copy of Projects</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript" language="javascript" src="jquery.js"></script>
    
    <script type="text/javascript" language="javascript">
    $(document).ready(function() {
        //hide the text on load
        $('.expandableText').toggle();
     
     
        //This function will run whenever a link of class "testLink" is clicked.
        $('a.testLink').click(function(){ 
            $(this).toggleClass("expanded");
            //use the name of the a href and append Text to the end which corresponds to the Id of the text area
              $("#" + $(this).attr("id") + "Text").slideToggle(600);
            return false;
        });
    });
    </script>
    <style>
    #Econometric {
    position:relative;
    }
    #expandEcon, .collapseEcon{
        left:260px;
    }
    .testLink{
     width:11px; 
     height:11px;
     background:url("Images/expand.jpg") no-repeat;
     position:relative; 
     top:5px;
    }
    .ProjectTable{
    border:1px solid black;
    }
    .ProjectDesc{
    background-color:grey;
    }
    .expanded {
        background: url('Images/collapse.jpg') no-repeat;
    }
    </style>
    </head>
     
    <body>
       <div id="Econometric">
       <div class="CategoryHeader">Econometric Analysis and Modeling<a id="toggleEcon" class="testLink" href="#"></a></div>
     
     
       <div class="CategoryText"><p>(COMPANY) is a recognized industry leader in applying rigorous econometric analysis
       to the problems of both the public and private-sector. Our economists and operations
       research analysts have experience developing models tailored to each client's unique situation,
       needs and experience and communicating the outcome of these models in a way easily accessible to decision-makers
       in all fields.  Our models use sophisticated econometric techniques to parse the true impact our client's decisions
       have on the choices employees and customers make.</p></div>
       <div id="EconText" class="ProjectList">
     Project 1<a id="toggleP1" class="testLink" href="#"></a>
      <div id="toggleP1Text" class="expandableText"><table class="ProjectTable">
      <tr><td class="ProjectDesc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
     incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
     ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
     nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
     </td>
     </tr>
     </table>
     </div>
     <br>
     Project 2<a id="toggleP2" class="testLink" href="#"></a>
      <div id="toggleP2Text" class="expandableText"><table class="ProjectTable">
      <tr><td class="ProjectDesc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
     incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
     ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
     nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
     </td>
     </tr>
     </table>
     </div>
     <br>
     Project 3<a id="toggleP3" class="testLink" href="#"></a>
      <div id="toggleP3Text" class="expandableText"><table class="ProjectTable">
      <tr><td class="ProjectDesc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
     incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
     ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
     nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
     </td>
     </tr>
     </table>
     </div>
     
      </div><!--ProjectList-->
      </div><!--Econometric-->
     
    </body>
    </html>
    
     
  11. Shuffles

    Shuffles Grumpy old man at heart.

    Joined:
    Apr 19, 2004
    Messages:
    11,575
    Likes Received:
    4
    Location:
    NOVA
    Thanks guys. I'll try out both solutions and post results. Honestly, case sensitivity in the file extensions never even occurred to me. :o

    Bomber, I think it's hilarious that there's a toggleClass function. Unless I misunderstand it, I think I'd have to expand on your example to have it toggle back to it's original class when clicked again. Is that correct?
     
  12. bomber

    bomber Go Balls Deep

    Joined:
    Jul 14, 2006
    Messages:
    108
    Likes Received:
    0
    Location:
    Philadelphia
    No, toggleclass will add and remove the class 'expanded' from the links which overrides the background image you have in the testLink class.

    So "testLink expanded" is going to show the collapse image and "testLink" will show the expand image.

    Also make sure you exported your images in rgb format and not cmyk or that will cause them to not appear in different browsers as well.
     
    Last edited: Sep 25, 2009
  13. Shuffles

    Shuffles Grumpy old man at heart.

    Joined:
    Apr 19, 2004
    Messages:
    11,575
    Likes Received:
    4
    Location:
    NOVA
    Well, the capitalization of everything (file path, names, and extensions) all matches up. Still no dice in FF. Bomber, I like the toggle class idea, but it might be ill-suited to this situation. If you've worked with Jquery before, you've probably seen how "jumpy" the slideToggle function can be. That's why I was using animate, which doesn't seem to lend itself to toggling.

    I'll ask the guy with photoshop to make sure the images are in rgb format.
     
  14. Shuffles

    Shuffles Grumpy old man at heart.

    Joined:
    Apr 19, 2004
    Messages:
    11,575
    Likes Received:
    4
    Location:
    NOVA
    Still no fix, but I think I've better defined the problem.
    For
    Code:
    <a href="#" style="background:url(picture.jpg)">TEXT</a>
    The background image displays correctly in both IE and FF.

    However, if you remove the content, TEXT, IE still treats the background image as content, while FF does not, so it becomes a background image for... nothing. Specifying height and width values doesn't fix it.
     
  15. brds

    brds OT Supporter

    Joined:
    Jun 26, 2006
    Messages:
    17,642
    Likes Received:
    13
    Location:
    Atlanta
    try putting the images height & width in the style as well as adding display:block or display:table-cell
     
  16. Shuffles

    Shuffles Grumpy old man at heart.

    Joined:
    Apr 19, 2004
    Messages:
    11,575
    Likes Received:
    4
    Location:
    NOVA
    BOOM. Display:block got it the images to appear at least.
    [​IMG]

    There's still some wonkiness. Display: block means that if I have to use float:left on the next I want it to appear next to. But for some reason, the float makes the image sit on top of the floated text on the far left of the screen. Anyway, seems like a much more manageable problem than where I was before.
     
  17. brds

    brds OT Supporter

    Joined:
    Jun 26, 2006
    Messages:
    17,642
    Likes Received:
    13
    Location:
    Atlanta
    change the z-index of the text to be 1 or 2 and it'll come up over the image

    FYI = display:block makes the div (or span) the size you declared even if the content doesn't fill it.
     

Share This Page