2

I am creating a homepage currently with sharepoint designer 2010 and I am trying to sandbox the main page. Though when using my CSS sheet with the aspx file it works file in the designer application, but when I preview with the browser nothing happens as if I did no css at all.

here is my code if that helps, and the name of my style sheet is "Style"

<%@ Register TagPrefix="WpNs3"       Namespace="Microsoft.SharePoint.Publishing.WebControls"       Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>
<%@ Register TagPrefix="WpNs2" Namespace="Microsoft.Office.Visio.Server.WebControls"Assembly="Microsoft.Office.Visio.Server, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>
<%@ Register TagPrefix="WpNs1" Namespace="Microsoft.Office.Excel.WebUI" Assembly="Microsoft.Office.Excel.WebUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>
<%@ Register TagPrefix="WpNs0" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>
<%@ Page language="C#" MasterPageFile="~masterurl/default.master"    Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" meta:webpartpageexpansion="full"  %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral,   PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities"    Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint,     Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import     Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI,     Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register     Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"     Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral,     PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
<SharePoint:EncodedLiteral runat="server" text="<%    $Resources:wss,multipages_homelink_text%>" EncodeMethod="HtmlEncode"/> 
- 
<SharePoint:ProjectProperty Property="Title" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server"><img     src="/_layouts/images/blank.gif" width='1' height='1' alt="" /></asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">
        <label class="ms-hidden">
<SharePoint:ProjectProperty Property="Title" runat="server"/></label>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderTitleAreaClass" runat="server">
<SharePoint:UIVersionedContent runat="server" UIVersion="<=3">
<contenttemplate>

    <style type="text/css">
    td.ms-titleareaframe, .ms-pagetitleareaframe 
    {
        height: 10px;
    }

    div.ms-titleareaframe 
    {
        height: 100%;
    }

    .ms-pagetitleareaframe table 
    {
        background: none;
        height: 10px;
    }

    </style>
</contenttemplate>

</SharePoint:UIVersionedContent>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<meta name="CollaborationServer" content="SharePoint Team Web Site" />
<script type="text/javascript">
// <![CDATA[
var navBarHelpOverrideKey = "WSSEndUser";
// ]]>
</script>
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderSearchArea" runat="server">
<SharePoint:DelegateControl runat="server"
    ControlId="SmallSearchInputBox"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderLeftActions" runat="server">
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageDescription" runat="server"/>
<asp:Content ContentPlaceHolderId="PlaceHolderBodyAreaClass" runat="server">
<style type="text/css">
.ms-bodyareaframe {
padding: 0px;
 }    

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<div id="header"><img alt="banner" class="banner" src="images/Homepage     banner.png" /></div>
<div id="navigation">
<ul id="naviagtion">
<li><a href="#">CustomerPortal</a></li>
<li><a href="#">KnowledgeBase</a></li>
<li><a href="#">NewEmployee</a></li>
<li><a href="#">StatusReport</a></li>
</ul>
</div>
<div id="ticketapp"></div>
<div id="public"></div>
</asp:Content>
  • Have you used a profiler (opened via F12 in all the major browsers) to validate the CSS file is indeed being loaded & not throwing a 404? In my experience, people will have issues with relative paths that work in SPD but not the browser - because they create the path as relative to the masterpage (i.e. inside _catalogs) instead of relative to the ASPX page that is inheriting from the masterpage at runtime. – Stevangelista Jun 5 '14 at 18:16
1

Here are the things you can do:

  1. Use Inspect Element to check is your CSS file properly loading.

  2. Try to clear the "Cached images and files" in your browser and reload your page again.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.