Website Logo not showing in Safari only

Discussion in 'Web Design and Development' started by SpaceKitty, May 9, 2009.

  1. SpaceKitty macrumors 68040

    SpaceKitty

    Joined:
    Nov 9, 2008
    Location:
    Fort Collins Colorado
    #1
    My websites logo which is a transpararent gif made in Photoshop. Problem is it doesn't show up in Safari only. I tested this on two different computers. It shows on Firefox and IE.

    Anything I can do to fix this besides converting the logo?
     
  2. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #2
    Link?

    Transparent GIFs are fully supported by Safari.
     
  3. hexonxonx macrumors 601

    Joined:
    Jul 4, 2007
    Location:
    Denver Colorado
    #3
    Would this code prevent Safari from displaying the logo? I don't know enough about this but this is what she has:


    Code:
      <table cellpadding='0' cellspacing='0' style='width: 900px; height: 90px;' align='center'>
      <tr>
      <td align='left' valign='bottom' style="background: url(images/logo.gif) no-repeat;">
        <!-- -->
      </td>
      <td align='right' valign='bottom'>
     
  4. j763 macrumors 6502a

    Joined:
    Nov 25, 2001
    Location:
    Champaign, IL, USA
    #4
    Yes, that's the problem part. I'm taking a quick look at it: it works in Firefox but not in Safari.
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    Since there's no content where the logo is at Safari is computing the width of that cell to be 0px. Using an explicit width will resolve it. Better yet just supply the image in the cell rather than using a background image. This will make it more accessible and you can provide alt text on the image.
     
  6. j763 macrumors 6502a

    Joined:
    Nov 25, 2001
    Location:
    Champaign, IL, USA
    #6
    OK - problem is that there's nothing in that cell so Safari apparently doesn't render it. So, if you add -- for instance -- a space in that cell, it will display. So, we can amend the code as follows:
    Code:
      <table cellpadding='0' cellspacing='0' style='width: 900px; height: 90px;' align='center'>
      <tr>
      <td align='left' valign='bottom' style="background: url(images/logo.gif) no-repeat;"> 
        <!-- -->
      </td>
      <td align='right' valign='bottom'>
    or you could specify the dimensions of the cell rather than adding the space.
     
  7. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #7
    Set a width on the <td> element and it will work.

    The problem is the <td> to which the background is applied is zero pixels wide when rendered, hence you don't see the image.

    I think this may be because the other <td> element in that row has a div element inside it, whereas there is nothing inside the other cell.

    HTML:
    <table cellpadding="0" cellspacing="0" style="width: 900px; height: 90px;" align="center">
      <tbody>
      <tr>
      <td align="left" valign="bottom" style="background: url(images/logo.gif) no-repeat; width: 50%;">
        <!-- (there is nothing in this cell, so Safari doesn't bother giving it a width) -->
      </td>
      <td align="right" valign="bottom">
        <div style="height: 10px;"><!-- Spacer --></div>
      </td>
      </tr>
      </tbody>
    </table>
    
     
  8. SpaceKitty thread starter macrumors 68040

    SpaceKitty

    Joined:
    Nov 9, 2008
    Location:
    Fort Collins Colorado

Share This Page