Website Logo not showing in Safari only

[SpaceKitty]

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?

 

[elppa]

Link?

Transparent GIFs are fully supported by Safari.

 

[hexonxonx]

Would this code prevent Safari from displaying the logo? I don't know enough about this but this is what she has:

  <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'>

 

[j763]

Would this code prevent Safari from displaying the logo?

Yes, that's the problem part. I'm taking a quick look at it: it works in Firefox but not in Safari.

 

[angelwatt]

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.

 

[j763]

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:

  <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.

 

[elppa]

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.

<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>

 

[SpaceKitty]

Wow! That fixed it, thanks everybody!