Masterpage CSS file not linking correctly versus HTML equivalent

Question

I've a little problem. I put a div in a html with no mastrerpage and it works perfectly - the css work but when i put this in a html with masterpage it doesn't. the css:

@import url(http://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);

.cont {
width: 93%;
max-width: 350px;
text-align: center;
margin: 4% auto;
padding: 30px 0;
background: #111;
color: #EEE;
border-radius: 5px;
border: thin solid #444;
overflow: hidden;
}

hr {
margin: 20px;
border: none;
border-bottom: thin solid rgba(255,255,255,.1);
}

div.title { font-size: 2em; }

h1 span {
font-weight: 300;
color: #Fd4;
}

div.stars {
width: 270px;
display: inline-block;
}

input.star { display: none; }

label.star {
float: right;
padding: 10px;
font-size: 36px;
color: #444;
transition: all .2s;
}

input.star:checked ~ label.star:before {
content: '\f005';
color: #FD4;
transition: all .25s;
}

input.star-5:checked ~ label.star:before {
color: #FE7;
text-shadow: 0 0 20px #952;
}

input.star-1:checked ~ label.star:before { color: #F62; }

label.star:hover { transform: rotate(-15deg) scale(1.3); }

label.star:before {
content: '\f006';
font-family: FontAwesome;
}

the html without masterpage:

<head runat="server">
<link rel="Stylesheet" href="StyleSheetStars.css" type="text/css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/fontawesome/4.2.0/css/font-awesome.min.css">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="stars" >
  <input class="star star-5" id="star5" type="radio" name="star" runat="server"/>
  <label class="star star-5" for="star5"></label>
  <input class="star star-4" id="star4" type="radio" name="star" runat="server"/>
  <label class="star star-4" for="star4"></label>
  <input class="star star-3" id="star3" type="radio" name="star" runat="server"/>
  <label class="star star-3" for="star3"></label>
  <input class="star star-2" id="star2" type="radio" name="star" runat="server"/>
  <label class="star star-2" for="star2"></label>
  <input class="star star-1" id="star1" type="radio" name="star" runat="server"/>
  <label class="star star-1" for="star1"></label>
  </div>

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

the html with masterpage:

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link rel="Stylesheet" href="StyleSheetStars.css" type="text/css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
 <div class="stars" >
  <input class="star star-5" id="star5" type="radio" name="star" runat="server"/>
  <label class="star star-5" for="star5"></label>
  <input class="star star-4" id="star4" type="radio" name="star" runat="server"/>
  <label class="star star-4" for="star4"></label>
  <input class="star star-3" id="star3" type="radio" name="star" runat="server"/>
  <label class="star star-3" for="star3"></label>
  <input class="star star-2" id="star2" type="radio" name="star" runat="server"/>
  <label class="star star-2" for="star2"></label>
  <input class="star star-1" id="star1" type="radio" name="star" runat="server"/>
  <label class="star star-1" for="star1"></label>
 </div>

</asp:Content>

Than't suppose to look like that: whene I choose nothing

whene I choose someting

The cource code(The page with the masterpage):

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
<link rel="Stylesheet" href="StyleSheetStars.css" type="text/css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<body>
<form method="post" action="Default2.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTk3NjIwNTUxMGQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgUFH2N0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkc3RhcjUFH2N0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkc3RhcjQFH2N0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkc3RhcjMFH2N0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkc3RhcjIFH2N0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkc3RhcjFwT8uSu9sOfORC1N0/HVYkxqPn1CouicTkSUkSxVv1uA==" />
</div>

<div class="aspNetHidden">

<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="9397DC0D" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAcCx8QyBKNwgVY6o3mkNcKvfQCB0pUsOJpy4fnv8J365PqbTooLxpm6rqKM1qnpL0WKM6j7xyqFjsDqMxeM+3DfnbRT9DeSeStRy6aSOUv9JHI5MYLCO3LtU7cAJVvEBlyMO7fmjkJSfq6Zbgk2kTWnqiOGYOCf0K23WNfp2M1RTaC01aLKYB4/+EAAYp0t4jA=" />
</div>
<div>

<div class="stars" >
  <input value="star5" name="ctl00$ContentPlaceHolder1$star" type="radio" id="ContentPlaceHolder1_star5" class="star star-5" />
  <label class="star star-5" for="star5"></label>
  <input value="star4" name="ctl00$ContentPlaceHolder1$star" type="radio" id="ContentPlaceHolder1_star4" class="star star-4" />
  <label class="star star-4" for="star4"></label>
  <input value="star3" name="ctl00$ContentPlaceHolder1$star" type="radio" id="ContentPlaceHolder1_star3" class="star star-3" />
  <label class="star star-3" for="star3"></label>
  <input value="star2" name="ctl00$ContentPlaceHolder1$star" type="radio" id="ContentPlaceHolder1_star2" class="star star-2" />
  <label class="star star-2" for="star2"></label>
  <input value="star1" name="ctl00$ContentPlaceHolder1$star" type="radio" id="ContentPlaceHolder1_star1" class="star star-1" />
  <label class="star star-1" for="star1"></label>
</div>
<br />
<input type="submit" name="ctl00$ContentPlaceHolder1$Button1" value="Button" id="ContentPlaceHolder1_Button1" />
<span id="ContentPlaceHolder1_Label1">Label</span>
<br />

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

The html with the masterpage don't do the yellow part.. What can I do?

Thank you :)

That's the ASP for the master page. Can you show the actual HTML that makes it down to the browser? — Paul Roub
– Paul Roub, Commented May 8, 2015 at 14:36
sorry, I didn't really understand.. do you want me to take a pic of the screen? :) — Dvir Samuel
– Dvir Samuel, Commented May 8, 2015 at 14:37
No. View Source. Post that instead of, or in addition to, the ASP. — Paul Roub
– Paul Roub, Commented May 8, 2015 at 14:38
That is my view sorce,, I work with Visual Studio Web Developer... — Dvir Samuel
– Dvir Samuel, Commented May 8, 2015 at 14:43
Visual Studio Web Developer is not a browser. ASP is not HTML. At some point, this will be a web page, in HTML, viewed in a browser (otherwise, why build it at all)? Visit the page in a browser, see the HTML that ASP is creating for you, and post that here. Otherwise, there's too many possible variables to guess at - we can't see the problem, and we can't even see the HTML that demonstrates the problem. — Paul Roub
– Paul Roub, Commented May 8, 2015 at 14:45

Community · Accepted Answer · 2017-05-23 11:51:02Z

1

It seems to me that the path to your css file isn't correct from the masterpage.

Is your masterpage or css file or aspx in a separate folder? If so, you should link the css file as so in the masterpage file:

<link rel="Stylesheet" href="~/StyleSheetStars.css" type="text/css" runat="server" />

Where ~/ goes to the root of the application. Again, it depends on your directory structure, but I have a hunch that this is the root of your issue. You will also need the runat="server" attribute.

Please note that ~/ does not work in traditional HTML, but is a valid path when used in an aspx file.

Please see similar SO question here.

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered May 8, 2015 at 15:14

Soturi

1,4961 gold badge14 silver badges30 bronze badges

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

3 Comments

Dvir Samuel Over a year ago

Thank you very very much for the answer but it still not working. :( some css properties are working, for example: the hover is working(The stars moving) but the filling isn't(they don't paint in yellow).. It's like the masterpage decided to ignore some css code...

Soturi Over a year ago

In your browser hit F12 (both IE, Chrome) and you can find if the css file is linked correctly in the Resources tab or similar. If it is loaded, then your css might have other issues. For example, if your yellow stars are an image, then possible the path to the image is incorrect. For CSS the img path is relative to the CSS file, not the actual page. (i.e. ../images/sample.png instead of images/sample.png or similar)

Dvir Samuel Over a year ago

As I can see the css is working exept that part: <code> input.star-5:checked ~ label.star:before { color: #FE7; text-shadow: 0 0 20px #952; } input.star-1:checked ~ label.star:before { color: #F62; } </code> Do you have idea why everything works excpet those lines?

Collectives™ on Stack Overflow

Masterpage CSS file not linking correctly versus HTML equivalent

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related