Hi folks,

I've got a website up and running, working fine (as designed anyway) under Firefox and IE (Windows), but now I'm testing it on Macs and found that Safari has a few problems. (Mac IE also has some problems but I think based on this page I can fix those.)

The site is at www.ethnosuperlounge.com

1) In Safari, the background image on the top left doesn't display at all. Please note this has nothing to do with tables (most references I've found to background image probs in Safari are related to tables).
2) On pages with a header menu, eg here and here, the header menu doesn't display in Safari at all.
3) The input boxes for forms in the sidebars (Google search and Join email list) fill up the whole column but in FF/IE it appears as intended at a fixed width, smaller than the column.

Thanks in advance to anybody who can give any advice!

Shen Flindell
www.ethnosuperlounge.com

PS I should add that the version of Safari on the computer I'm testing with is Safari 1.0.3 (v85.8.1)

I can't seem to see how/where you've attached that image in the top left?

Sorry...

1) Code for background image (not displaying in Safari):
From /appearance.css

#sidebar-left-lining
{
background: url(Assets/Mala-navigator-bkg.jpg) no-repeat fixed left top;
}

2) Code for header menu (not displaying in Safari):
From /layout.css

#headerwrapper
{
position: absolute;
top: 0px;
right: 30px;
left: 200px;
height: 116px;
text-align: center;
vertical-align: middle;
z-index: 10;
background-image: url(Assets/starrynight.jpg);
background-repeat: repeat;
background-color: #000000;
padding-right: 30px;
}
#header img {
border: 10px solid #000000;
}

#headermenu {
width: 100%;
left: 0px;
top: 0px;
position: relative;
z-index: 20;
right: 5px;
}
#headermenu td {
margin: 10px;
border-top: 0px solid #000000;
border-right: 8px solid #000000;
border-bottom: 8px solid #000000;
border-left: 8px solid #000000;
}
#headermenu p {
margin-top: 5px;
margin-bottom: 5px;
}


Example HTML:

<div id="headerwrapper">
<div id="header">
<!-- InstanceBeginEditable name="headerstuff" -->
<img src="Assets/header-t2t2.jpg" alt="Tibet2Timbuk2" width="400" height="96">

<div id="headermenu">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="33%" class="currentmenu"><p><span class="headermenucaps">P</span>rofiles</p></td>
<td width="33%"><p><a href="music.htm" title="Listen to music by Tibet2Timbuk2"><span class="headermenucaps">M</span>usic</a></p></td>
<td width="33%"><p><a href="photos.htm" title="Photos of Tibet2Timbuk2"><span class="headermenucaps">P</span>ics</a></p></td>
</tr>
</table>
</div>

<!-- InstanceEndEditable -->
</div>
</div>

OK, I've managed to fix problem (1)
It seems that in Safari the div sidebar-left-lining (which has the non-displaying background image) was not being held open by its content. In other browsers the content holds the div open and so the background image is visible. Perhaps because the content is absolutely positioned, Safari doesn't use it to set the size of the div.

I fixed the problem using Anne van Kesteren's Safari hack.
I added the following lines to the div sidebar-left-lining definition:
display: table-cell;
height: 430px;
430px being the height of the background image - this seems to work in Safari without disturbing display in FF and IE.

Now I still have problems (2) and (3) to fix - any advice????!!!!!