I have a really odd problem. In my stylesheets I have a couple of background images, with the style sheet attached to the template via CMS MS they do not show up. However, if I cut and paste the style sheet into a css file in the main directory and link this in the head of the template the background images display correctly.
There are 4 style sheets attached, link styles, structure, reset and styles associated with jQuery function. The background images are in the structure, this works if a put it into a separate linked file. I have tried removing both the jQuery and all the other stylesheets just leaving the structure in CMS MS, still no joy.
I am using the latest CMS MS 1.8.1.
Template structure
Code: Select all
{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{cms_stylesheet}
{literal}<__script__ type="text/javascript" src="jquery.tools.min.js"></__script>{/literal}
</head>
</__body>
<div id="wrapper" class="bgrwrapper"><!-- Start wrapper -->
<div id="searchBar">
<div id="sbInfo">Infotec Ltd</div>
<div id="sbSearch">
{search}
</div>
<div class="clearfix"> </div>
</div>
<!-- *********************** Main Header **************************** -->
<div id="infoHeader">
<div id="ihLogo">
<img src="uploads/images/structure/infotec-logo.gif" width="225" height="61" alt="Infotec Logo" title="infotec-logo">
<p>Infotec specialises in the design, development, manufacture and supply of electronic display systems. Its main customers are train operating companies, infrastructure owners and system integrators operating in the rail, underground, bus, airport and road sectors.</p>
</div>
<div id="ihNav">
<ul>
<li><a href="#"><img src="uploads/images/structure/envelope.gif" alt="Contact us icon" width="16" height="16" align="top">Contact us</a></li>
<li><a href="#"><img src="uploads/images/structure/newsletter.gif" width="16" height="16" alt="Newsletter icon" align="top">Newsletter</a></li>
<li><a href="#"><img src="uploads/images/structure/clientarea.gif" width="16" height="16" alt="Client Area icon" align="top">Client Area</a></li>
</ul>
</div>
<div class="clearfix"> </div>
<div id="ihmainNav" class="btop bbottom">
{menu}
<div class="clearfix"> </div>
</div>
</div>
<!-- ********************** Tabbed Interface ***************************** -->
<div id="tabbed-interface">
<ul class="tabs">
<li><span class="tabTitle">Latest Projects</span></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="clearfix"> </li>
</ul>
<li class="clearfix"> </li>
<div class="panes">
<div class="project">
<img src="uploads/images/test-images/leeds.jpg" alt="project three" width="560" height="304">
<div class="projectText">
<h1>Project one title maybe a headline</h1>
<p>some sample text can go here for Project 1, describing the main story or detailing the usp of the product or display</p>
<img src="uploads/images/structure/arrow.gif" alt="more arrow" width="61" height="46">
</div>
<div class="clearfix"> </div>
</div>
<div class="project">
<img src="uploads/images/test-images/tubelines.jpg" alt="project two" width="560" height="304">
<div class="projectText">
<h1>Project two title maybe a headline</h1>
<p>some sample text can go here for Project 2</p>
<img src="uploads/images/structure/arrow.gif" alt="more arrow" width="61" height="46">
</div>
<div class="clearfix"> </div>
</div>
<div class="project">
<img src="uploads/images/test-images/NRM1.jpg" alt="project three" width="560" height="304">
<div class="projectText">
<h1>Project three title maybe a headline</h1>
<p>some sample text can go here for Project 3, describing the main story or detailing the usp of the product or display</p>
<img src="uploads/images/structure/arrow.gif" alt="more arrow" width="61" height="46">
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- ********************** Tabbed Interface End ***************************** -->
<div class="column1 btop bbottom homePanel">
<div id="homeProdHighlight">
{content block="Product Highlight"}
</div>
<div id="homePanelRight">
<div id="homePanelImg">
{content_image block='Home Page Panel' dir='images/homepage' alt='Infotec Displays'}
</div>
</div>
<div class="clearfix"> </div>
</div>
<p> bottom</p>
{content}
<div class="clearfix"> </div>
</div><!-- End wrapper -->
{literal}
<__script__>
$(document).ready(function() {
$("ul.tabs").tabs("div.panes > div" , {
effect: 'fade' ,
fadeOutSpeed: "slow" ,
rotate: true ,
}).slideshow( {
autoplay: true ,
interval: 4000
});
});
</__script>
{/literal}
<__body>
</__html>
Code: Select all
/* Generic Styles */
.btop {border-top: 1px solid #9CA5AE;}
.bright {border-right: 1px solid #9CA5AE;}
.bbottom {border-bottom: 1px solid #9CA5AE;}
.bleft {border-left: 1px solid #9CA5AE;}
/* Common elements */
.column1 {width:960px;}
/* structure */
#wrapper {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
color: #666666;
text-align: left;
margin: 0px auto;
padding: 0px;
width: 960px;
}
#searchBar {
font-size: 10px;
background: #9CA5AE;
margin: 0px;
padding: 6px 0px 6px 0px;
width: 100%;
}
#sbInfo {
margin: 3px 0px 0px 16px;
float: left;
color: #364552;
}
#sbSearch {
margin: 0px;
padding: 0px;
float: right;
width: 320px;
}
#sbSearch form {
margin: 0px 16px 0px 0px;
float: right;
}
#infoHeader {
margin: 8px 0px 0px 0px;
padding: 0px;
width: 100%;
}
#ihLogo {
margin: 0px;
padding: 0px;
float: left;
width: 800px;
}
#ihLogo img {
margin: 0px 0px 16px 8px;
padding: 0px;
}
#ihLogo p {
color: #9CA5AE;
margin: 0px 300px 0px 16px;
padding: 0px;
}
#ihNav {
margin: 16px 0px 0px 0px;
padding: 0px;
float: right;
width: 160px;
}
#ihNav ul li{
font-size: 10px;
margin: 0px 0px 8px 0px;
padding: 0px;
}
#ihNav img {
margin: 0px 4px 0px 0px;
padding: 0px;
}
#ihmainNav {
width: 100%;
margin: 16px 0px 0px 0px;
padding: 0px;
}
#ihmainNav ul {
margin: 0px 0px 0px 16px;
padding: 0px;
}
#ihmainNav ul li {
margin: 0px;
padding: 8px 32px 8px 0px;
float: left;
}
/* Tabbed interface */
#tabbed-interface {
background: #D98D00;
height: 304px;
margin: 0px 0px 32px 0px;
}
.tabTitle {
color:#ffffff !important;
padding: 0px 0px 0px 0px;
margin: 0px 16px 0px 0px;
}
div.project {
background: #3C4653 url(uploads/images/structure/bgr-dots.gif) no-repeat top right ;
height: 304px;
width:960px;
position: absolute;
}
.projectText {
color: #fff;
float:right;
width:360px;
}
.projectText h1 {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 24px;
line-height: 28px;
margin: 32px 0px 16px 0px;
}
.projectText p {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
margin: 0px 64px 32px 0px;
}
/* ******** Home Page Items******* */
#homeProdHighlight {width:480px;float:left;}
#homeProdHighlight img {float:left;margin: 8px 8px;}
#homeProdHighlight h1 {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 14px;
margin: 16px 0px 8px 0px;
}
#homeProdHighlight p {
font-size: 11px;
margin: 0px 0px 4px 0px;
}
#homePanelRight {width:480px;float:left;}
#homePanelImg {width:240px;text-align:center;}
.bgrwrapper {background-image: url(testbgr.jpg) !important;}Cheers
