CSS not working in ASP.NET

Posted by Tux on Stack Overflow See other posts from Stack Overflow or by Tux
Published on 2011-01-17T08:12:10Z Indexed on 2011/01/17 8:53 UTC
Read the original article Hit count: 445

Filed under:
|
|

Hi, I have created a simple page in HTML which works fine. But when I import that to ASP.NET, the page design clutters up.

Here is my Site.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Elite.WUI.Site" %>

<!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" >
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <asp:ContentPlaceHolder ID="headerCPH" runat="server">
        <div id="header">
            <h1>WUI</h1>
        </div>
        <hr />
    </asp:ContentPlaceHolder>
    <asp:ContentPlaceHolder ID="navigationCPH" runat="server">
        <div id="navigation">
            <ul>
                <li>Home</li>
                <li>Users</li>
                <li>Campaigns</li>
                <li>Settings</li>
            </ul>
        </div>
    </asp:ContentPlaceHolder>
    <asp:ContentPlaceHolder ID="contentCPH" runat="server">
    </asp:ContentPlaceHolder>
    </form>
</body>
</html>

my stylesheet styles.css

#navigation
{
    float: left;
    border: 1pt solid;
}

#navigation ul
{
    list-style-type: none;
    padding: 5 5 5 5;
    margin: 0;
}

#content
{
    margin-left: 9%;
    border: 1pt solid;
    padding-left: 5;
}

and the actual page derived from master page

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ABC.aspx.cs" Inherits="Elite.WUI.ABC" %>
<asp:Content ID="Content3" ContentPlaceHolderID="contentCPH" runat="server">
    <div id="content">
        <p>Test content</p>
    </div>
</asp:Content>

Here is how it is displayed in Firefox (ver 3.6)

The margin property isn't working

As you can see that the border, list-style-type properties are working but margin isn't working. Can anyone tell me what am I doing wrong? I have tested it in Google Chrome but same issue. While the HTML and CSS works fine when there is no ASP.NET i.e. simple .html file.

© Stack Overflow or respective owner

Related posts about ASP.NET

Related posts about css