ASP.NET - Master Page CSS Not displaying properly

Question

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!

Are you sure that the CSS actually works on the masterpage? Try by creating an aspx page that uses the masterpage, but in the same folder as the masterpage. That will help you narrow down the issue, because I suspect this has more to do with directories/paths than anything else. It's also worth noting that ~ refers to the root directory of the application - the Virtual Directory defined by IIS which might be very different from the app's directory. — rlb.usa
– rlb.usa, Commented Sep 21, 2015 at 23:20
I have indeed created a page that uses the master page. Its the only way to test it anyways. thats how i found out that the css did show but it didn;t adjust the page on a basic level — Viralwarrior012
– Viralwarrior012, Commented Sep 21, 2015 at 23:36
I might try just putting the CSS in a style block on the page itself and working backwards from there, to figure out what's going on, where, and why. If it were me, I'd also include a VERY obvious style so I can quickly deduce what's happening. I like to do something like body{ ... ; border:10px solid red;} - because it's easy to see, tells me that the element is in the right place, ordering/z-index, and if the style is applying all in 1-2 seconds of looking at it. With your body height, margin, and auto styles, it's a little harder to tell, you know? — rlb.usa
– rlb.usa, Commented Sep 21, 2015 at 23:50
Essentially when i define the heigh as px it works, but as % it does not — Viralwarrior012
– Viralwarrior012, Commented Sep 21, 2015 at 23:51
that's an issue with your CSS styles then. I like to put borders on everything so I can fine-tune quickly. % values can be very tricky to work with. — rlb.usa
– rlb.usa, Commented Sep 21, 2015 at 23:52

Viralwarrior012 · Accepted Answer · 2015-09-22 00:01:01Z

1

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;
}

answered Sep 22, 2015 at 0:01

Viralwarrior012

1951 silver badge14 bronze badges

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

Collectives™ on Stack Overflow

ASP.NET - Master Page CSS Not displaying properly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related