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: 528
        
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)

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