PDA

View Full Version : Website Logo not showing in Safari only



SpaceKitty
May 9, 2009, 08:36 AM
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
May 9, 2009, 08:48 AM
Link?

Transparent GIFs are fully supported by Safari.
hexonxonx
May 9, 2009, 09:56 AM
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
May 9, 2009, 10:17 AM
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
May 9, 2009, 10:24 AM
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
May 9, 2009, 10:26 AM
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;">&nbsp;
<!-- -->
</td>
<td align='right' valign='bottom'>

or you could specify the dimensions of the cell rather than adding the space.
elppa
May 9, 2009, 10:26 AM
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
May 9, 2009, 10:39 AM
Wow! That fixed it, thanks everybody!