3

For the life of me I cannot figure out why the CSS I am trying to apply won't work and hoping someone can help me out.

Index.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Index.master.cs" Inherits="IGS.Index" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <meta charset="utf-8" />
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 7]>
    <style>
    .content { margin-right: -1px; }
    ul.nav a { zoom: 1; }
    </style>
    <![endif]-->
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <div class="container">
        <div class="header">
            <asp:ContentPlaceHolder ID="HeaderContentBar" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="sidebar1">
            <asp:ContentPlaceHolder ID="LeftNavBar" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="content">
            <asp:ContentPlaceHolder ID="MainContentBar" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="footer">
            <asp:ContentPlaceHolder ID="FooterContentBar" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>
    </form>
</body>
</html>

default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="IGS._default"
    MasterPageFile="Index.Master" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <title>Site Index</title>
</asp:Content>
<asp:Content ID="HeaderContentBar" runat="server" ContentPlaceHolderID="HeaderContentBar">
    Header
</asp:Content>
<asp:Content ID="LeftNavBar" runat="server" ContentPlaceHolderID="LeftNavBar">
    <ul class="nav">
        <li><a href="news.aspx">News</a></li>
        <li><a href="admin/default.aspx">Administration</a></li>
    </ul>
</asp:Content>
<asp:Content ID="MainContentBar" runat="server" ContentPlaceHolderID="MainContentBar">
    <h1>
        Latest News</h1>
    <asp:Repeater ID="newsRepeater" runat="server">
        <ItemTemplate>
            <div class="newsHeadline">
                <b>
                    <%# Server.HtmlEncode(Eval("newsHeadline").ToString())%></b>
                <div class="newsStory">
                    <%# Server.HtmlEncode(Eval("newsStory").ToString())%>
                </div>
                <div class="newsFooter">
                    Posted By:
                    <asp:HyperLink ID="newsSubmittedBy" runat="server" NavigateUrl='<%# string.Format("User.aspx?id={0}", Eval("id")) %>'
                        Text='<%# Server.HtmlEncode(Eval("newsSubmittedBy").ToString())%>' />
                    - Submitted By:
                    <%# Server.HtmlEncode(Eval("newsDate").ToString())%>
                </div>
                <div style="text-align: right;">
                    <asp:HyperLink ID="newsReadMore" runat="server" CssClass="newsReadMore" NavigateUrl='<%# string.Format("News.aspx?id={0}", Eval("id")) %>'
                        Text="Read More..." />
                </div>
                <hr />
        </ItemTemplate>
    </asp:Repeater>
    <p class="newsDaySelector">
        <asp:TextBox ID="TextBox1" runat="server" Width="30" Text="7"></asp:TextBox>
        days</p>
</asp:Content>
<asp:Content ID="FooterContentBar" runat="server" ContentPlaceHolderID="FooterContentBar">
</asp:Content>

EDIT: How unfortunate. I did everything recommended below and it still isn't working. It is very bizzare. The page was being partially styled before so it was seemingly grabbing it correctly at least. If anyone else has any ideas I'd love to hear them.

And here is my CSS. As I said, very basic and it is half working. Main issue is the Footer won't run along the bottom, but is aligned to the left side of the content area.

body
{
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
}
.container
{
    width: 960px;
    background-color: #FFF;
    margin: 0 auto;
}

.header
{
    background-color: #ADB96E;
}

.sidebar1
{
    float: left;
    width: 180px;
    background-color: #EADCAE;
    padding-bottom: 10px;
}
.content
{
    padding: 10px 0;
    width: 780px;
    float: left;
}

.footer
{
    padding: 10px 0;
    background-color: #6F7D94;
    position: relative;
    clear: both;
}
4
  • Your code is correct, do one thing clean the solution and rebuild and check again , may be this can help you Jun 13, 2013 at 5:40
  • Are you sure your css file is correct? If it styles SOME of your document, maybe you have misspelled some ids/classes.
    – Nicolai
    Jun 13, 2013 at 6:45
  • I had thought that which is why I cut everything out but the bare minimum and it still won't work. That is what I am focusing on now though since everything else has seemingly been eliminated.
    – Trido
    Jun 13, 2013 at 6:47
  • If what you are trying to achieve, is a footer that stays at the bottom, check out this article: matthewjamestaylor.com/blog/… It sounds like your css IS applied, but isn't working as you think it will work.
    – Nicolai
    Jun 13, 2013 at 8:04

4 Answers 4

1

When linking to stylesheets in your masterpage, its always good to use the asp.net link instead of html link. This ensures that asp.net will resolve the paths from your root directory. All that you need to do for this is add the attribute runat="server".

<link href="~/css/main.css" rel="stylesheet" type="text/css" runat="server"/>

Now even if your master page is not in the same directory as the aspx page, the css will get loaded correctly.

1

i dont know where you put yours css file sow this are things that have to work

1- <link href="..css/main.css" rel="stylesheet" type="text/css" />
2- <link href="/css/main.css" rel="stylesheet" type="text/css" />
3-<link href="../css/main.css" rel="stylesheet" type="text/css" />

if no one of them work there is step 4 the 100% way to do it you just need to drag you css file to yours head and this will automatically buil the right link to css and if this is not helping you need to check all you id"s all css file his is not written right

i recommend to start with step 4 it"s 100% way to get write link to your scc

0

Try this [I assuming css folder on root directory, css file path might be not correct.]

<link href="~/css/main.css" rel="stylesheet" type="text/css" />

instead of

<link href="css/main.css" rel="stylesheet" type="text/css" />

and place <!DOCTYPE before <html> tag.

0

Your code seems have no error. Only possibility that i can assume is issue in the paths. Use one the following depending on your stylesheet location:

/     -Site root
~/   -Root directory of the application

try adding:

runat="server"

in your path as well.

Good luck!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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