Menu
I have a layout page thusly
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/content/main_layout.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/content/menu.css")" rel="stylesheet" type="text/css" />
@RenderSection("JS", required:false)
@RenderSection("CSS", required:false)
</head>
<body>
@RenderBody()
</body>
</html>
And then a view like so
@{
ViewBag.Title = "Home";
Layout = "~/views/shared/_layout.cshtml";
}
@using RS.Common.HtmlHelpers;
@section JS
{
<script src="@Url.Content("~/scripts/fue.js")" type="text/javascript"></script>
<script src="@Url.Content("~/scripts/jquery.flexslider-min.js")" type="text/javascript"></script>
}
@section CSS
{
<link href="@Url.Content("~/content/hp.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/content/hp_form.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/content/flexslider.css")" rel="stylesheet" type="text/css" />
}
<h4>Test!</h4>
The page loads fine as I expect. However, I am getting 3 warnings:
Validation (XHTML 1.0 Transitional): Element 'link' cannot be nested within element 'link'
This error, one for each of the tags in the CSS section on the view.
It is only really an annoyance at this stage, but I wondered what the cause (and thus solution) for this error might be?
625
You have specified HTML5 DOCTYPE and yet trying to validate as XHTML 1.0 Transitional. I suppose that the final rendered HTML looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<link href="/content/main_layout.css" rel="stylesheet" type="text/css" />
<link href="/content/menu.css" rel="stylesheet" type="text/css" />
<script src="/scripts/fue.js" type="text/javascript"></script>
<script src="/scripts/jquery.flexslider-min.js" type="text/javascript"></script>
<link href="/content/hp.css" rel="stylesheet" type="text/css" />
<link href="/content/hp_form.css" rel="stylesheet" type="text/css" />
<link href="/content/flexslider.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h4>Test!</h4>
</body>
</html>
You might want to invert the order of the two RenderSection in your layout so that the links and scripts are grouped together. Or you might also consider moving the script declarations to the end of the page:
Like this:
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/content/main_layout.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/content/menu.css")" rel="stylesheet" type="text/css" />
@RenderSection("CSS", required:false)
</head>
<body>
@RenderBody()
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
@RenderSection("JS", required:false)
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
