ASP.NET Website doesn't recognize css files called in a div

Question

I have encountered a very strange issue.

As I was reconstruction my login page using divs instead of a table, I obviously added an id to each div to call it from css.

Here's some HTML CODE as an example:

<div id="divLogin">
    <div id="divLblLogin"><asp:Label ID="lblLogin" runat="server">LOGIN</asp:Label>        
    </div>
</div>

and some CSS CODE:

#divLogin
{
    margin-top:10px;
    margin-bottom: 0px;
    margin-left: 28%;
    margin-right: 28%;
    height: 300px;
    border: 2px solid black;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-family: Good Times;
    font-size: xx-large;
}

#divLblLogin
{
    margin-top: 10px;
    margin-left: 25px;
}

The thing is that when I run the website from visual studio (local host) it appears to be normal and according to what I have defined (graphically).

But when I publish the website, and run it on the web, it shows only the controls without all the stylings (as if there is no css code at all)

So I decided to write all the css inside the div itself as:

<div 
        style="margin-top:10px; margin-bottom: 0px; margin-left: 28%; margin-right: 28%; height: 300px; border: 2px solid black;
        border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
        font-family: Good Times; font-size: xx-large;" 
>
    <div style="margin-top: 10px; margin-left: 25px;"><asp:Label ID="lblLogin" runat="server">LOGIN</asp:Label>
    </div>
</div>

and that settled it, but I don't like this solution since its almost unreadable.

This is war, and I must win this thing whatever it is, I.e. How to make the css work on the web without defining the style inside the div itself???

Help will be much appreciated!

EDIT:

Here is my MasterPage having the css references and the files & foldes hierarchy in the solution explorer

Folder Hierarchy and css reference in MasterPage:

As you're styling a class, you need to use the dot notation in your CSS - ie .divLogin { - as the hash notation is for selecting by ID.. — stuartd
– stuartd, Commented Jan 10, 2013 at 12:13
My bad, it actually is id and not a class. Posted wrong code accidentally. Updated! — Yanker
– Yanker, Commented Jan 10, 2013 at 13:15
In that case, how are you referencing the CSS, is in inline in the file or in a file? If it's in a file, is the file being published correctly? — stuartd
– stuartd, Commented Jan 10, 2013 at 13:25
Not quiet sure I understood the question, but I've added an image that might clarify things a bit. I know that it is published correctly since basically, css is readable and working on the rest of my pages. It fails only when I call a css in a div like above <div id="SomeDivID"> and #SomeDivID { // some css code } — Yanker
– Yanker, Commented Jan 10, 2013 at 13:38
ohh now I understood, it's in a css file, and the file is referenced in the masterpage (see edited image above) — Yanker
– Yanker, Commented Jan 10, 2013 at 13:41

Michal Klouda · Accepted Answer · 2013-01-10 12:13:19Z

5

In the style sheet use class selector .divLogin instead of your ID selector #divLogin.

See CSS selectors for reference.

answered Jan 10, 2013 at 12:13

Michal Klouda

14.6k7 gold badges58 silver badges79 bronze badges

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

6 Comments

Yanker Over a year ago

My bad, it actually is id and not a class. Posted wrong code accidentally. Upadated!

Michal Klouda Over a year ago

Have you checked the CSS file has correct path? Inspect HTML code, or check with Fiddle..

Yanker Over a year ago

I have posted an image of the css references in the master page, and you can find in the solution explorer the folders hierarchy. As far as I know, the file paths are correct since other css functions are working.

Michal Klouda Over a year ago

That looks fine, but I would start from the other end, checking what is rendered in browser. I recommend using Google Chrome, e.g. right clicking on your div and choosing Inspect Element can help you identify what styles are being applied.

fegemo Over a year ago

Your browser can be blocking the access to the site resources. I suggest you click to show the page source, then grab a url from a javascript or css file from your source and paste it on the browser. It is probably going to ask if you're sure that you want to load it. Choose yes to permit and then reload your page.

|

Collectives™ on Stack Overflow

ASP.NET Website doesn't recognize css files called in a div

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related