No replies
mandogirl
mandogirl's picture
Offline
newbie
Last seen: 9 years 32 weeks ago
Timezone: GMT+1
Joined: 2012-01-25
Posts: 10
Points: 14

Hello,
I've just finished making a website (or so I thought) but have noticed that it's not displaying properly in Safari. The website is for my duo and I have embedded reverbnation's player into the home page. It was a bit bigger than I wanted and didn't look very neat, so I used the clip property to hide the bits I didn't want. It works in every browser but Safari so I wonder if anyone can tell me why. Thanks,
Charlotte

(The relevant bits of code are towards the bottom of the HTML and CSS - search "player" and you'll find it)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (<a href="http://www.coffeecup.com" rel="nofollow">www.coffeecup.com</a>)">
    <meta name="created" content="Thu, 09 Feb 2012 15:17:04 GMT">
    <meta name="description" content="South West bluegrass and folk duo">
    <meta name="keywords" content="Carrivick Sisters, Carravick Sisters, Carravack Sisters, Carrivack Sisters, Carrvick Sisters, Carvick Sisters, Carivick Sisters, Carrivic Sisters, Carrivik Sisters, bbc young folk awards 2010, charlotte and laura carrivick, review, carravik sisters, bluegrass, folk, blue grass, twins, dobro, resonator, clawhammer, frailing, banjo, mandolin, fiddle, guitar, rayco, fylde">
    <title>Home</title>
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body>
<div>
<a id="header" href="index.html"></a>
</div>
<div class="nav">
<ul id="navlist">
	<li id="home"><a class="selected" href="index.html"></a></li>
	<li id="about"><a href="about.html"></a></li>
	<li id="gigs"><a href="gigs.html"></a></li>
	<li id="shop"><a href="shop.html"></a></li>
	<li id="photos"><a href="photos.html"></a></li>
	<li id="teaching"><a href="teaching.html"></a></li>
	<li id="contact"><a href="contact.html"></a></li>
	<li id="links"><a href="links.html"></a></li>
</ul>
</div>
  <div class="main">
  <table>
  <tr>
  <td width="340" height="600" valign="top" style="padding-right:30px;" rowspan="2">
  <h3>New website!</h3>
  <p>Welcome to our brand new website.
  We'll still be keeping the old <a class="norm" href="http://thecarrivicksisters.wordpress.com/" target="_blank">wordpress</a> site as a blog and an archive for older news stories, 
  with the more up to date ones appearing here. 
  We like it much better, but have look around and let us know what you think!</p>
 
  <p>To celebrate the launch of the new website, we've remade our most popular video on 
  <a class="norm" href="http://www.youtube.com/user/carrivicksisters/featured" target="_blank">Youtube</a>. 
  We put up a very rough version of James Taylor's 'Sweet Baby James' 6 months ago. 
  To date it has approaching 30,000 views so it was about time we got a good version up there. 
  <a class="norm" href="http://johnbreese.wordpress.com/" target="_blank">John Breese</a> kindly made this <a class="norm" href="http://youtu.be/K4eEDEGlZVM" target="_blank">video</a> for us:</p>
  <object width="300" height="182"><param name="movie" value="http://www.youtube.com/v/K4eEDEGlZVM?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/K4eEDEGlZVM?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="300" height="182" allowscriptaccess="always" allowfullscreen="true"></embed></object>
  </td>
  <td width="200">
  <img src="img/ftfhome.jpg" width="100" height="90" alt="" border="0" align="left" style="padding-top:18px;padding-right:4px;">
  <p style="font-size:14px;">Latest album <b>From the Fields</b> available now in our <a class="norm" href="shop.html">shop</a>!</p>
  </br>
  </br>
  </td>
  </tr>
  <tr>
  <td>
<h3>Sign up to our monthly newsletter below:</h3>
<form method="post" action="http://ymlp.com/subscribe.php?id=gewyhmqgmgj" target="_blank">
<table style="width: 200px;" border="0" align="center" cellspacing="0" cellpadding="2">
<tr>
<td colspan="2"><span style="font-size: 12pt; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;"><i>Email:</i></span></td>
<td colspan="2"><input type="text" name="YMP0" size="10" /></td>
</tr>
<tr>
<td colspan="2"><span style="font-size: 12pt; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;"><i>First Name:</i></span></td>
<td colspan="2"><input type="text" name="YMP2" size="10" /></td>
</tr>
<tr>
<td colspan="2"><span style="font-size: 12pt; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;"><i>Last name:</i></span></td>
<td colspan="2"><input type="text" name="YMP1" size="10" /></td>
</tr>
<tr>
<td colspan="4"><span style="font-size: 12pt; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;">Which mailing list would you like to be added to?</span></td>
</tr>
<tr>
<td colspan="3"><span style="font-size: 10pt; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;"><i>UK & Ireland</i></span></td>
<td><input type="checkbox" name="CAT1" value="1" /></td>
</tr>
<tr>
<td colspan="3"><span style="font-size: 10pt; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;"><i>Europe</i></span></td>
<td><input type="checkbox" name="CAT3" value="1" /></td>
</tr>
<tr>
<td colspan="3"><span style="font-size: 10pt; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;"><i>Canada & USA</i></span></td>
<td><input type="checkbox" name="CAT4" value="1" /></td>
</tr>
<tr>
<td style="text-align: center;" colspan="4"><input type="submit" value="Submit" />&nbsp;</td>
</tr>
</table>
</form>
<p style="font-size:10px;">Once you have filled in the form, you will be sent a confirmation email with an activation link. This may go to your junk mail box, so please check!</p>
 </br>
 <a href="https://www.facebook.com/pages/The-Carrivick-Sisters/337073800161" target="_blank"><img src="img/facebook2.jpg" width="150" height="46" alt="Facebook" title="Facebook" border="0"></a>
 <a href="http://www.youtube.com/user/carrivicksisters/featured" target="_blank"><img src="img/youtube.jpg" width="46" height="46" alt="YouTube" title="YouTube" border="0"></a>
 
  </td>
  </tr>
  <tr>
  <td>
  <p style="verticle-align:text-bottom;text-align:center;"><a class="norm" href="http://thecarrivicksisters.wordpress.com/" target="_blank">(News Archive)</a></p>
  </td>
  <td>
  </td>
  </tr>
  </table>
   <embed id="player" type="application/x-shockwave-flash" src="http://cache.reverbnation.com/widgets/swf/13/widgetPlayerMini.swf" height="83" width="262" align="top" bgcolor="#ffffff" loop="false" wmode="opaque" quality="best" allowScriptAccess="always" allowNetworking="all" allowFullScreen="true" seamlesstabbing="false" flashvars="emailPlaylist=artist_1695599&backgroundcolor=EEEEEE&font_color=333333&posted_by=artist_1695599&shuffle=false&autoPlay=false" />
 
<p style="font-size:12px;position:absolute;top:720px;left:185px;"><a style="color:#333333;" href="mail-to:[email protected]">Website by Charlotte Carrivick</a><p>
  </div>
 
  </body>
</html>/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - <a href="http://www.coffeecup.com" rel="nofollow">www.coffeecup.com</a> */
 
body 
{ 
background-color:none;
background-image:url('../img/webbackground.jpg'); 
background-repeat:no-repeat;
background-attachment:scroll;
background-position: top left; 
z-index:2;
margin: 0px;
padding: 0px;
color:#333333;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:16px;
}
h2 
{
color:#333333;
font-size:17px;
font-weight:bold;
}
h3 
{
color:#BD2F4A;
font-size:17px;
font-weight:bold;
}
a.current, a.other:hover, a.other:active 
{
color:#BD2F4A;
text-decoration:none;
}
a.other
{
color:#333333;
text-decoration:none;
}
a.norm:hover, a.norm:active
{
color:#BD2F4A;
text-decoration:underline;
}
a.norm
{
color:#BD2F4A;
text-decoration:none; 
}
#header
{
position: absolute; 
top: 14px; 
left: 530px; 
width: 618px; 
height: 111px; 
background-color: transparent; 
border: 0px; 
}
 
#navlist{position:absolute;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:37px;display:block;}
 
#home{left:0px;width:82px;}
#home{background:url('../img/menu2.jpg') 0px 0px;}
#home a:hover{background: url('../img/menu2.jpg') 0px -37px;}
#home a.selected{background: url('../img/menu2.jpg') 0px -37px;}
 
#about{left:82px;width:71px;}
#about{background:url('../img/menu2.jpg') -82px 0;}
#about a:hover{background: url('../img/menu2.jpg') -82px -37px;}
#about a.selected{background: url('../img/menu2.jpg') -82px -37px;}
 
#gigs{left:153px;width:57px;}
#gigs{background:url('../img/menu2.jpg') -153px 0;}
#gigs a:hover{background: url('../img/menu2.jpg') -153px -37px;}
#gigs a.selected{background: url('../img/menu2.jpg') -153px -37px;}
 
#shop{left:210px;width:61px;}
#shop{background:url('../img/menu2.jpg') -210px 0;}
#shop a:hover{background: url('../img/menu2.jpg') -210px -37px;}
#shop a.selected{background: url('../img/menu2.jpg') -210px -37px;}
 
#photos{left:271px;width:84px;}
#photos{background:url('../img/menu2.jpg') -271px 0;}
#photos a:hover{background: url('../img/menu2.jpg') -271px -37px;}
#photos a.selected{background: url('../img/menu2.jpg') -271px -37px;}
 
#teaching{left:355px;width:98px;}
#teaching{background:url('../img/menu2.jpg') -355px 0;}
#teaching a:hover{background: url('../img/menu2.jpg') -355px -37px;}
#teaching a.selected{background: url('../img/menu2.jpg') -355px -37px;}
 
#contact{left:453px;width:89px;}
#contact{background:url('../img/menu2.jpg') -453px 0;}
#contact a:hover{background: url('../img/menu2.jpg') -453px -37px;}
#contact a.selected{background: url('../img/menu2.jpg') -453px -37px;}
 
#links{left:542px;width:78px;}
#links{background:url('../img/menu2.jpg') -542px 0;}
#links a:hover{background: url('../img/menu2.jpg') -542px -37px;}
#links a.selected{background: url('../img/menu2.jpg') -542px -37px;}
 
div.nav
{
position:absolute;
top:111px;
left:530px;
}
 
div.main
{ 
width:540px;
height:760px; 
position:absolute;
top:190px;
left:570px;
text-align:left;
}
#player
{
overflow:hidden;
position:absolute;
top:90px;
left:267px;
clip:rect(34px,260px,83px,70px); 
}
.pictures
{
    width: 560px;
	cursor: default;
	list-style: none;
}
.pictures img
{
	border-color: #BD2F4A;
    border-style:dashed;
	border-width: 2px;
	color: inherit;
	padding: 0px;
	vertical-align: top;
	width: 92px;
	height: 92px;
}
.pictures li
{
	background: transparent;
	border-color: #BD2F4A;
	border-style: none;
	border-width: 0px;
	color: inherit;
	display: inline;
	float: left;
	margin: 0px;
	padding: 5px;
	position:relative;
	left:-40px;
}