SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Random graphics missing in IE, Chrome

    Hello, people of the forum, first time post! I'm new to HTML/CSS, so please be kind

    I tried to find the answer to my problem via google, but to no avail (also tried searching the forum - sorry if this topic has come up before!). Here's the gist of it:

    I am missing some graphics but not others in IE and Chrome. These graphics appear just fine in FF, Opera, and Safari. Said graphics are the same type as other graphics that appear, and also (as far as I can tell) are using the same code as the graphics that show up. I thought that this had to do with me placing them side by side instead of one at a time, but the graphics are still missing when I show them one at a time like my other graphics. I'm stymied.

    The broken/missing graphics are bluerobot.jpg, silverrobot.jpg, and redrobot.jpg. Cowgirlscan.jpg shows up just fine.

    I tried posting the link to the actual website here, but the spam filter got me since I don't have 10 posts yet I also had to omit a great deal of the html for the same reason. Hopefully this is enough to give you an idea of my problem!

    Here's the relevant html:


    Code:
    <div id="bodycontent">
        
        <h3>Robots</h3>
       <div class="galleryphoto">
        <img src="gallery/bluerobot.jpg" width="215" height="300"
        alt="an adorable blue 1950's vintage style robot girl with antenna pigtails" />
        <img src="gallery/silverrobot.jpg" width="215" height="300"
        alt="a tall, slender conicular robot with gauges and scientific instruments on his chest.  He has one tall silver antenna." />
        <img src="gallery/redrobot.jpg" width="215" height="300"
        alt="A cheerful red square boy robot" /> 
        <p><span class="fun">Gearaldine</span> is a girl robot with green antenna pigtails.  She is young and always has a spring in her step.</p>
        <p><span class="fun">Reader</span> is a tall, slender and dignified robot.  He likes to read his gauges and keep his makers in the correct oxygen mix when they visit new planets.</p>
        <p><span class="fun">Torganon</span> is a friendly red robot boy.  He is always cheerful and likes to play.</p>
       </div>
       <h3>Americana Dia de los Muertos Line Art</h3>
       <div class="galleryphoto">
        <img src="gallery/cowgirlscan.jpg" width="825" height="650"
         alt="a 1950's style pinup cowgirl, but drawn as Dia de los Muertos skeleton art" />
        <p>I am really inspired by vintage 1950's pinups.  There are so many great Americana themes, and combining them with the Day of the Dead - what could be more perfect?</p>
    Here's the relevant CSS:

    Code:
    /*
    CSS for Stellar Graphic Art & Design site
    */
    
    *{margin:0; padding:0;}
    
    body {
      font-family: "Trajan Pro", Verdana, Helvetica, Arial, sans-serif;
      background-color: #e2edff;
      line-height: 125%;
      padding-top: 0;
      margin: 0;
    }
    
    h1, h2, h3 {
      font-family: "Trajan Pro", Helvetica, Arial, sans-serif;
    }
    
    h1 {
      font-size: 160%;  
      color: white;
      border-top: 3px solid #7da5d8;
      padding-top: 5.1em;
      padding-bottom: 2em;
      padding-left: 10em;
      margin: 0;
      background: url(backgrounds/stellarbannernotext.gif) repeat-y left; 
    } 
    
    h2 {
      color: indigo;
      font-size: 130%;
      font-weight: strong;
      padding: 1em;
    }
    
    h3 {
      color: #339999;
      font-size: 130%;
      font-weight: normal;
      padding-top: 1.5em;
    }
    
    li {
      font-family: "Trajan Pro", Helvetica, Arial, sans-serif;
      font-size: small;
      list-style-type: none;
      padding-top: 40px;
      padding-left: 30px;
    }
    
    p {
      color: #339999;
      font-family: "Myriad Pro", Verdana, Helvetica, Arial, sans-serif;
      font-size: medium;
      padding: 10px;
    }
    
    p2 {
      font-family: "Myriad Pro", Verdana, Helvetica, Arial, sans-serif;
      font-size: small;
      color: black;
      padding-left: 7px;
      padding-top: 10px;
    }
    
    #tagline p {
      font-style: italic;
      font-family: Trajan Pro, Georgia, Times, serif;
      background-color: #bed8f3;
      border-top: 3px solid #7da5d8;
      border-bottom: 3px solid #7da5d8;
      padding-top: .2em;
      padding-bottom: .2em;
      padding-left: .8em;
      margin: -.6em;
      background: #bed8f3 url(backgrounds/tagline-fade.jpg) repeat-y right;
    }
    
    a {
      font-weight: bold;
      color: black;
    }
    
    a:link {
      color: black;
    }
    
    a:visited {
      color: blue;
    }
    
    a:hover {
      text-decoration: none;
      color: white;
      background-color: navy;
    }
    
    a:active {
      color: aqua;
      background-color: navy;
    }
    
    .fun {
      color: darkslateblue;
      font-family: Georgia, Times, serif;
      letter-spacing: 0.05em;
    }
    
    
    
    /*
    This section deals with the positioning of items on the screen. It uses absolute positioning - fixed x and y coordinates measured from the top-left corner of the browser's content display.
    */
    
    #navigation, #bodycontent, #header {
      position: absolute;
    }
    
    #navigation, #bodycontent {
      top: 14.24em;
    }
    
    #bodycontent {
      left: 200px;
    }
    
    #header {
      width: 100%;
    }
    
    #navigation {
      width: 180px;
      height: 484px;
      background: #7da5a8 url(backgrounds/starsgradient.gif) no-repeat;
    }
    
    .feature {
      float: left;
      margin: 30px;
    }
    
    .galleryphoto {
      padding: 20px;
      padding-left: 0px;
      margin-right: 20px;
      border-bottom: 1px solid navy;
      margin-bottom: 10px;
    }
    
    #tagline {
      padding-top: 0em;
      padding-bottom: .2em;
    }
    Standard disclaimer - yes, I know I have a lot more to fix than this one issue But I figured I should start here. Thanks for reading this!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Can we see a site with this real quick? We don't have access to the images .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let me try fooling the filter that won't let me post links (since I'm new) -

    stellargraphicart dot com slash gallery

    Thank you!!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I tried to go there (blocked by my school) via my proxy on my website and it says I'm not allowed .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah, sorry, it wants an additional html at the end - stellargraphicart dot com slash gallery dot html

    Sorry about that!

  6. #6
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://stellargraphicart.com/gallery/bluerobot.jpg

    This doesn't show up in Chrome - I'm guessing it is partially uploaded or corrupted JPEG. I suggest re-saving and maybe in a different program if you're not using Photoshop.
    Cross browser css bugs

    Dan Schulz you will be missed

  7. #7
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sadly, I've already tried resaving - I am using Photoshop, and I tried saving for web as an alternate to doing just a normal save, and neither worked. I've also tried saving it in Illustrator instead of Photoshop. Those 3 graphics don't show up in IE or Chrome. I also tried saving it as a tiff file, but that didn't work either. Saving it as a gif worked, but the quality is very low. Should I just use gif files and try to increase my quality?

  8. #8
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It may be an issue with your web server. Try saving this to something like imageshack.us and use absolute paths for the images - if you can see them in Chrome then it's definitely a server issue ( wrong Content-Type/encoding possibly though it seems right to me ).
    Cross browser css bugs

    Dan Schulz you will be missed

  9. #9
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The bluerobot graphic has been saved with CMYK colour mode - incompatible with the 'net. Change the colour mode to RGB and resave (and optimise to reduce file size - 663k is way too big ...) - using the "Save for Web" option will do this (ALL web graphics should be saved this way from Photoshop).

  10. #10
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did the trick! Hooray, thank you SO MUCH. I had no idea that I'd saved it in CMYK - I certainly know better

    I really appreciate your help. Now I just need to get to work on the rest of my little glitches :/


Bookmarks

Posting Permissions

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