Copy link to clipboard
Copied
hello
i had a question related to my business catalyst site
i put up a audio player on one of the pages that has worked fine in the past when using it in other pograms, but for some reason in bc it throws off the header area when putting in the script
see http://www.littlefolkies.com/Listen
if you cick on one of the submenu items (make-ups, songs, lyrics) you can see what the menu is supposed to look like
but for some reason on the songs page (see http://www.littlefolkies.com/Listen) the menu looks tcompletely different.
below i have pasted the template code...
hope you can help!
thanks so much,
i
_______________________________________________
template code:
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://use.typekit.com/gxw4mke.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!--[if lt IE 9]><script type="text/javascript" src="/js/html5.js"></script>
<![endif]-->
<link href="/StyleSheets/default.css" type="text/css" rel="stylesheet" />
<link href="/StyleSheets/style.css" type="text/css" rel="stylesheet" />
<link type="text/css" href="drplayer.css" rel="Stylesheet" />
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="drplayer.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#playlist").playlist(
{
playerurl: "swf/drplayer.swf"
}
);
});
</script>
</head>
<body>
<!-- HEADER -->
<header>
<div class="header">
<div style="text-align: center;">
<img alt="" src="/images/littlefolkieslogo.jpg" style="width: 63px; height: 120px;" />
<a href="/index.htm" target="_self"><img src="/images/littlefolkieslogo1.jpg" style="width: 457px; height: 120px;" alt="Little Folkies" /></a>
<br />
</div>
<div style="text-align: center;">
<span style="font-family: 'courier new';">
<strong>
<span style="color: #000000;">Music Classes For Kids and Parents who love real music</span>
</strong>
</span>
</div>
<div class="menu">
<p>{module_menu,14623}</p>
<br />
<p style="text-align: center;"> <span style="font-family: 'courier new';"><strong><span style="font-size: 14px; color: #974806;"> <a href="/make-up-lessons"> Make-Ups</a> <span style="font-family: 'courier new';">
<strong>
<span style="font-size: 14px; color: #974806;">
<a href="http://www.littlefolkies.com/listen">Songs</a>
</span></strong></span>
<a href="/lyrics">Lyrics</a>
</span>
</strong>
</span>
</p>
<div class="cart-summary">{module_shoppingcartsummary, horizontal}</div>
</div>
</div>
</header>
<!-- MAIN AREA -->
<div class="main_bg">
<div class="main">
<section class="content">
{tag_pagecontent}
</section>
<!-- SIDEBAR -->
<section class="sidebar">
<!-- NEWS POD -->
<div><br />
<br />
<br />
<a href="/register-little-folkies"><img alt="" src="/images/buttonlateregistrationlittlefolkies.jpg" /></a><br />
<br />
<a href="/register-sf-music-lessons"><img src="/images/buttonregistersfmusiclessons.jpg" alt="Register Group Music Classes" /></a><br />
</div>
<div><hr />
<!-- NEWSLETTER POD -->
<h3>Newsletter Sign Up</h3>
</div>
<form action="/CampaignProcess.aspx?ListID=42214" method="post" onsubmit="return checkWholeForm25179(this)" name="catemaillistform25179">
<div><label for="CLFullName">Full Name</label>
<span style="background-color: #eeece1;"><input type="text" maxlength="255" id="CLFullName" name="FullName" />
</span><label for="CLEmailAddress">Email Address</label>
<span style="background-color: #eeece1;"><input type="text" maxlength="255" id="CLEmailAddress" name="EmailAddress" />
</span><label>Word Verification</label></div>
<span style="background-color: #eeece1;">
{module_captchav2}
</span>
<div><input type="submit" id="catlistbutton" value="Subscribe" /></div>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
<script type="text/javascript">
//<![CDATA[
function checkWholeForm25179(theForm){var why = "";if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value);if (theForm.CaptchaV2) why += isEmpty(theForm.CaptchaV2.value, "Enter Word Verification in box below"); if (why != ""){alert(why);return false;}theForm.submit();return false;}
//]]>
</script>
</form>
<div><hr />
<!-- LOGIN POD -->
<h3>Class Members Login</h3>
</div>
<form action="/ZoneProcess.aspx?ZoneID=51&OID={module_oid}&OTYPE={module_otype}" method="post" onsubmit="return checkWholeForm80277(this)" name="catseczoneform80277">
<div><label for="SZUsername">Username</label>
<span style="background-color: #eeece1;"><input type="text" maxlength="255" id="SZUsername" name="Username" />
</span><label for="SZPassword">Password</label>
<span style="background-color: #eeece1;"><input type="password" maxlength="255" id="SZPassword" name="Password" /><br />
</span>
<input type="submit" value="Log in" /></div>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
<script type="text/javascript">
//<![CDATA[
function checkWholeForm80277(theForm){var why = "";if (theForm.Username) why += isEmpty(theForm.Username.value, "Username");if (theForm.Password) why += isEmpty(theForm.Password.value, "Password");if (why != ""){alert(why);return false;}theForm.submit();return false;}
//]]>
</script>
</form>
</section>
<div class="clear"></div>
</div>
</div>
<!-- FOOTER -->
<footer>
<div class="footer">
<div class="footer-links">
{module_menu, version="2", menuId="14623", moduleTemplateGroup="Footer"}
</div>
<div>
<div class="copyright"> Copyright 2012 Little Folkies All rights reserved. </div>
<div class="clear"></div>
</div>
</div>
</footer>
</body>
</html>
Copy link to clipboard
Copied
Hi
The problem here is that the player uses a staylesheet called "drplayer.css", placed in your root folder, which overrides the standard styling of your page
I've disabled some of the overalapping rules (you can see them greyed out) and now the page renders fine http://screencast.com/t/Myz6Qyms3AOc.
Kind Regards,
Alex