Click here to Skip to main content
15,867,762 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Hey everyone,

I have a slight CSS problem but I cannot get it fixed.

What I want. a Body tag with a backcolor and basic font family and padding of 10px.
In the body I have a form tag and that part of the screen should be filled with a different backcolor defined in the css.

My css:
CSS
body
{
    background-color: #c9cbce;
    font-family: 'Segoe UI';
    padding: 10px;
    display:inline-block;
}
form
{
    padding: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    display:inline-block;
    background-color: #bbecc4;
}
h1
{
    float: left;
    font-size:xx-large;
    font-weight:lighter;
    width:auto;
    padding: 10px;
}


How to get this fixed?

My HTML after page is rendered:
HTML
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Cache-Control" content="no-cache" /><link href="SesameSheet.css" rel="stylesheet" /><title>
	Sesame
</title>
</head>
<body>
    
    <form method="post" action="Login.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="ZkcSqYLyK2H6gv0PWZLC1XdUF4ODhcAc1+numAGCmtZCp+RUrvAP7Hzk7sSu92gXoMnhNQpi1vjy9ioa+nupwxAbNpZnu5KxsjnUdx2yEco=" />
</div>

<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="C2EE9ABB" />
</div>
    <h1>Sesame Web</h1>
    <div>
        

        
    </div>
    </form>
</body>
</html>


My Masterpage:
ASP.NET
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Sesame.master.cs" Inherits="SesameWeb.Sesame" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv='Pragma' content='no-cache' />
    <meta http-equiv='Cache-Control' content='no-cache' />
    <link href="SesameSheet.css" rel="stylesheet" />
    <title>Sesame</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
        
    </asp:ContentPlaceHolder>
</head>
<body>
    
    <form id="form1" runat="server">
    <h1>Sesame Web</h1>
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />
        
    </div>
    </form>
</body>
</html>
Posted
Updated 5-Nov-14 10:38am
v3
Comments
Sergey Alexandrovich Kryukov 5-Nov-14 16:33pm    
It does work.
—SA

1 solution

It should work. I just tested it; your greenish background color for forms is properly rendered. The problem is: you did not provide your HTML sample, so who knows what have you written to use this CSS.

However, you are not using the best approached. First of all, form if not really a rendered element. It is used to group the input controls participating in the HTTP request. So, instead of form, apply your class for some other element: table itself, or, if you want, to some div with a class name.

One more important improvement: in most cases, instead of
CSS
body { /* ... */ }

write:
CSS
body, html { /* ... */ }

If you don't include "html" element, it can be possible, with some rendering engines, to render some border of different color around the body. Usually, you don't want that.

Also, you need to remember that CSS means Cascading Style Sheet, so you can use cascading. If you have style for div, you elements div.someClass will inherit the style properties of div, so you can add only the differences to some special div element, segregated by classes, pseudo-classes, ids, etc.

—SA
 
Share this answer
 
v2
Comments
Herman<T>.Instance 5-Nov-14 16:37pm    
added my HTML to this question
Sergey Alexandrovich Kryukov 5-Nov-14 16:40pm    
This is not HTML. Do you need help on how to extract HTML?
Anyway, I confirm that your CSS still works, if I replace your ASP.NET code with HTML.
—SA

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900