I've got 3 of this error when validating.
DOCTYPE: HTML5
Error: Element link is missing required attribute property.
<link type="text/css" href="/wp-content/themes/aykamakina/bxslider/jquery.bxslider.css" rel="stylesheet" />
<script src="/wp-content/themes/aykamakina/tabs/js/easyResponsiveTabs.js" type="text/javascript"></script>
<link rel="stylesheet" href="/wp-content/themes/aykamakina/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
So I've used rel - type - href and one of them has the media attribute. What others I have to use in this case?
And I don't get why I don't get the same error for the other links I've used only with the same attributes...
Thanks for your time!
The information in the error message is outdated. Error messages are apparently not updated as fast as the basic functionality of the validator. The validator is actually validating against HTML5 + RDFa, and RDFa defines the property attribute.
Put you <link> in the <head> at the top of the document.
In HTML5 the link element is allowed in the document body but with an itemprop attribute.
Did you post all non-validating code? Because this validates, try it out:
<!DOCTYPE html>
<html>
<head>
<title>sample</title>
<link type="text/css" href="/wp-content/themes/aykamakina/bxslider/jquery.bxslider.css" rel="stylesheet" />
<script src="/wp-content/themes/aykamakina/tabs/js/easyResponsiveTabs.js" type="text/javascript"></script>
<link rel="stylesheet" href="/wp-content/themes/aykamakina/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
</head>
</html>
Related
I have used these lines inside head tag
<link href="~/Content/site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
Bootstrap seems to work, but site.css is not loading..I even tried
<link href='#Url.Content("~/Content/site.css")' rel="stylesheet" type="text/css" />
I couldn't find any solution. Where am I going wrong?
I'm new to web development and am using Laravel. For this, I purchased a HTML admin page template which already included Laravel (so basically Laravel plus the theme in HTML already set up). Now I'm using some elements from everywhere inside the template and I ended up having heavily long reference lists. I don't think this is necessary or even considered good code (rather HTML markup), and I even tried to remove some of the references, but then for some reason some elements of the page do not properly work anymore.
For example, I choose a certain button element from a HTML page included in the template, I copy the code and paste it inside where I need it. I also copy the references, but not necessarily all the references (because there were not only buttons on the page). However, not having -all- the references ended in a messed-up page with few things working. I wonder if there is like any tool which automatically removes these statements since I feel that the following is ridiculous compared to the actual size/content of the page (which is merely a form to enter your personal data):
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrapvalidator/css/bootstrapValidator.min.css')}}"/>
<!--page level styles-->
<link type="text/css" rel="stylesheet" href="{{asset('assets/css/pages/wizards.css')}}"/>
<!--End of page styles-->
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/inputlimiter/css/jquery.inputlimiter.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/jquery-tagsinput/css/jquery.tagsinput.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/daterangepicker/css/daterangepicker.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/datepicker/css/bootstrap-datepicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-timepicker/css/bootstrap-timepicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-switch/css/bootstrap-switch.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/jasny-bootstrap/css/jasny-bootstrap.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/datetimepicker/css/DateTimePicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/j_timepicker/css/jquery.timepicker.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/clockpicker/css/jquery-clockpicker.css')}}" />
<!-- end of plugin styles -->
<link type="text/css" rel="stylesheet" href="{{asset('assets/css/pages/colorpicker_hack.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-switch/css/bootstrap-switch.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/switchery/css/switchery.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/inputlimiter/css/jquery.inputlimiter.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/chosen/css/chosen.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/daterangepicker/css/daterangepicker.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/datepicker/css/bootstrap-datepicker.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-timepicker/css/bootstrap-timepicker.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-switch/css/bootstrap-switch.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/jasny-bootstrap/css/jasny-bootstrap.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/fileinput/css/fileinput.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/multiselect/css/multi-select.css')}}"/>
<!--End of plugin styles-->
<!--Page level styles-->
<link type="text/css" rel="stylesheet" href="{{asset('assets/css/pages/form_elements.css')}}"/>
(Not to forget all the JS at the bottom!)
Just simply go to Google's developer by clicking Short cut (control + shift+ I) and then go to Audit tab, you will find all the details and performance audit report. From there you can find the used and unused css and JavaScript codes.
You can inspect the particular webpage. During inspecting, you can find out the error/unused portion of css/js files in console. They basically name the unused file with line number.
I have a problem with creating pdf file. I include css3 file into head section in view, but it's doesn't work.
Included file is twitter bootstrap css and main css of application theme.
...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link type="text/css" media="all" rel="stylesheet" href="packages/bootstrap/css/bootstrap.min.css">
<link type="text/css" media="all" rel="stylesheet" href="css/dashboard/style.min.css">
</head>
...
Have an idea?
Can you try to use a full path? (eg. use the asset() helper)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link type="text/css" media="all" rel="stylesheet" href="{{ asset('packages/bootstrap/css/bootstrap.min.css') }}">
<link type="text/css" media="all" rel="stylesheet" href="{{ asset('css/dashboard/style.min.css') }}">
</head>
I'm assuming you are using https://github.com/barryvdh/laravel-dompdf ?
An alternative is using wkhtmltopdf, which is possible with the same interface etc: https://github.com/barryvdh/laravel-snappy (but requires to install wkhtmltopdf)
I solve this problem by typing the public_path in href attribute, following instruccions from https://github.com/barryvdh/laravel-dompdf/issues/121#issuecomment-358245406:
<link href="{{ public_path('css/pdf.css') }}" rel="stylesheet">
NOTE: I'm using a local virtual server. I hope this works for you.
I solve this problem by using external CSS's full path. This one worked on my linux ubuntu server :
<link rel="stylesheet" href="/var/www/mysite/public/css/main.css" media="all" />
You also can solve not loaded image problem by using this solution.
I'm sure there is something ridiculously simple here that I am missing but I just cant see it. I have a number of template pages which are currently in the root folder of my project, as are 2 of my CSS sheets. I have more contained in a "CSS" folder. I want to take the the template pages (call them home.aspx and dashboard.aspx) and put them in a folder called "Template_Design_Pages". I am happy to keep the CSS pages in the root directory, or move them. When I move my template pages to the folder the CSS is lost. I have tried updating the href's on the pages I have moved to no effect. Say the href is href="css/Reset.css" - i have tried changing to:
href="/css/Reset.css"
href="~/css/Reset.css"
href="Orion_Admin/css/Reset.css" NB Orion_Admin is root.
I have seen this mentioned
href="<%=ResolveUrl("~/css/reset.css.css") %>"
but it does not work either and I am not sure what it does. I'm pretty new to all this. The project is ASP.VB btw. The following is the code which seems to be causing the trouble, although none of my images are showing up either. I presume that it is all tied into the one issue though:
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/text.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/grid.css" media="screen" />
<link rel="stylesheet" type="text/css" href="layout.css" media="screen" />
<link rel="stylesheet" type="text/css" href="nav.css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" /><![endif]-->
<!-- BEGIN: load jquery -->
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-ui/jquery.ui.core.min.js"></script>
<script src="js/jquery-ui/jquery.ui.widget.min.js" type="text/javascript"></script>
<script src="js/jquery-ui/jquery.ui.accordion.min.js" type="text/javascript"></script>
<script src="js/jquery-ui/jquery.effects.core.min.js" type="text/javascript"></script>
<script src="js/jquery-ui/jquery.effects.slide.min.js" type="text/javascript"></script>
If I were you, I would use an absolute path instead of a relative one.
<link rel="..." type="..." href="http://www.your.site/whatever/folder/reset.css" media="..:">
Also, instead of ~, try using ../ when moving up a folder.
I'm quite new to the Spring|Hibernate|Eclipse setup. For some reason, My index.jsp files are not picking on the css files (css & css01).
Any clue why?
<link rel="stylesheet" href="css/theme_switcher.css" type="text/css">
<link rel="stylesheet" href="css01/job_blue.responsive.css" title="job_blue" type="text/css">
You have not provided the end tag of the link tag. Provide it like this.
<link rel="stylesheet" href="css/theme_switcher.css" type="text/css" />
<link rel="stylesheet" href="css01/job_blue.responsive.css" title="job_blue" type="text/css" />
OR
<link rel="stylesheet" href="css/theme_switcher.css" type="text/css"></link>
<link rel="stylesheet" href="css01/job_blue.responsive.css" title="job_blue" type="text/css"></link>