CODEWITHSUNDEEP
htmlcssasp.net
Viralwarrior012
Viralwarrior012

Reputation: 195

ASP.NET - Master Page CSS Not displaying properly

for some reason my css just does not want to work at all. The DIV's just don't want to align in the way that i declared them at all. It essentially just wraps around the text, if some text is shown. It doesn't adjust the page at all like a normal css file would.

My css is as show below: 

body {
height: 95%;
width:100%;
margin:0 auto;}

#HEADER{
height: 15%;
width: 100%;
border-bottom: 2px solid black;}

#CONTAINER{height:85%;}

#CONTENT{
height:100%;
border-left: 2px solid black;
}

The CSS should control the following divs

<body>
<div id="HEADER">
    TITLE HERE
</div>
<div id="CONTAINER">
    <div id="MENU">

    </div>

    <div id="CONTENT">
        <asp:ContentPlaceHolder ID="CPH_Content" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    <div id="FOOTER">

    </div>
</div>

I've declared my css in the head as shown below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Labo 2</title>
<link href="/CSS/main.css" rel="stylesheet" type="text/css"/>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>

I've also tried it with href="~/CSS/main.css" without any luck.

To my knowledge, the external page is not secured in any shape or form, but to make sure i declared the following in web.config to make sure it's accessible

 <location path="CSS">
  <system.web>
    <authorization>
      <allow users="*"/>
    </authorization>
  </system.web>
</location>

Can anyone give me some help or some much needed explanations, any JavaScript i call works like a charm, it's only the css that's really edging me off.

Thanks!

Upvotes: 2

Views: 519

Answers (1)

Viralwarrior012
Viralwarrior012

Reputation: 195

Alright, I have figured out the issue

In order for the % values to kick in, i had to the declare the html tag, not just the body tag in the css file.

Everything is perfect now! Thanks for the help guys!

like so:

html,body {
height:100%;
width:95%;
margin:0 auto;
border: 2px solid red;
}

Upvotes: 1

Related Questions