CSS not working in ASP.NET

Question

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.

Have you looked at the page using FireBug in Firefox or the Element Inspector in Chrome? See what the derived CSS state is, I'm sure that'll point you in the right direction. — Lazarus
– Lazarus, Commented Jan 17, 2011 at 8:16
Hint: Look at the end code by doing a "View Source" in your browser. Chances are the actual markup is different from what you expect it to be. — Erik Funkenbusch
– Erik Funkenbusch, Commented Jan 17, 2011 at 8:27
I have both looked at it in Firebug and in actual source (in browser), but I didn't spot anything incorrect :( — Tux
– Tux, Commented Jan 17, 2011 at 8:45
A bit unrelated, and I may be wrong, but shouldn't the <asp:Content> tag be empty in the master page, as its content could be overridden in a page derived from it? — Dan
– Dan, Commented Jan 17, 2011 at 8:52
@Dan: If you are talking about the asp:ContentPlaceHolder, I only want the last contentPlaceHolder to be overridden in derived pages, so I have left it empty. — Tux
– Tux, Commented Jan 17, 2011 at 8:55

Dan · Accepted Answer · 2011-01-17 08:55:27Z

1

Change

padding-left: 5;

to

padding-left: 5px;

and

padding: 5 5 5 5;

to

padding: 5px 5px 5px 5px;

Note: last one can also be written: padding:5px;

answered Jan 17, 2011 at 8:55

Dan

2,3423 gold badges29 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tux Over a year ago

OMG that did it :) So can we conclude that ASP.NET doesn't process values without units?

Dan Over a year ago

@Tux it is not ASP.NET, this is a browser issue. I don't understand how it was working in your normal HTML page. Are you sure you didn't have units in it?

Tux · Accepted Answer · 2011-01-17 08:52:24Z

EDIT: As suggested in the comments I inspected the source of the static HTML file and that generated by ASP.NET and I saw few differences

The CSS for <ul> in the ASP.NET source is

div#navigation ul {
list-style-type: none;
margin: 0px;
}

and that in the static file is

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

Note the difference of padding (missing in the ASP.NET source)

Likewise, in the content div there is the padding-left missing in the ASP.NET source. But AFAIK, this shouldn't matter. The problem is that not even the margin property is applied to the div.

P.S: I couldn't edit the question because, I don't have enough rep and someone has added a image in the post (it won't allow me to post images.)

Collectives™ on Stack Overflow

CSS not working in ASP.NET

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related