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, May 08 '15 at 14:36
sorry, I didn't really understand.. do you want me to take a pic of the screen? :) — Dvir Samuel, May 08 '15 at 14:37
No. View Source. Post that instead of, or in addition to, the ASP. — Paul Roub, May 08 '15 at 14:38
That is my view sorce,, I work with Visual Studio Web Developer... — Dvir Samuel, May 08 '15 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, May 08 '15 at 14:45
Sorry.. I didn't know.. I will post it in a min.. Thank you very much :) — Dvir Samuel, May 08 '15 at 14:48

score 1 · Answer 1 · edited May 23 '17 at 11:51

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 '17 at 11:51

Community

1
1

answered May 08 '15 at 15:14

Soturi

1,486
1
14
30

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... – Dvir Samuel May 08 '15 at 16:00
1

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) – Soturi May 08 '15 at 16:58
As I can see the css is working exept that part: input.star-5:checked ~ label.star:before { color: #FE7; text-shadow: 0 0 20px #952; } input.star-1:checked ~ label.star:before { color: #F62; } Do you have idea why everything works excpet those lines? – Dvir Samuel May 09 '15 at 18:01

Masterpage CSS file not linking correctly versus HTML equivalent

1 Answers1