I have a problem with my website. It works fine in all the main browsers except for FireFox. The images are not displaying, the menu isn't working and the overall lay-out isn't showing. I know I haven't placed any alt attributes inside the img tags, but I think this isn't the problem because it works in all the other browsers.
Do you guys have an idea how to solve this?
The link is http://portfolio.io.utwente.nl/student/roosmalenjjvan/
Thanks!
That's because you used
<link href="css\style.css" rel="stylesheet" type="text/css">
<!-- ^^^ see incorrect slash here -->
notice \ while it should be / like
<link href="css/style.css" rel="stylesheet" type="text/css">
<!-- ^^^ this is correct slash here -->
Your css path is not correct link http://portfolio.io.utwente.nl/student/roosmalenjjvan/css\style.css
Here you using <link href="css\style.css" rel="stylesheet" type="text/css">
Try this way <link href="css/style.css" rel="stylesheet" type="text/css">
Try use http://portfolio.io.utwente.nl/student/roosmalenjjvan/css/style.css
Please correct your css path...
Currently it is
<link href="css\style.css" rel="stylesheet" type="text/css">
please change to
<link href="css/style.css" rel="stylesheet" type="text/css">
That you are using backslash( \ ) instead of forwardslash(/) in so many places(have a look on below Examples) of your code you just replace the backslashes,
<link href="css\style.css" rel="stylesheet" type="text/css">
<link rel="icon" href="img\favicon.jpg" type="image/x-icon">
<img src="img\jopvanroosmalen.png">
Replace this with
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="icon" href="img/favicon.jpg" type="image/x-icon">
<img src="img/jopvanroosmalen.png"> and so on
Related
I want to make a calendar view in javascript. I'm using this plugin, but the theme won't show, just trying to use standard theme. Does anyone know why?
https://fullcalendar.io/docs/theming
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.print.css">
<script>
$(function() {
$('#calendar').fullCalendar({
themeSystem : "standard",
dayClick: function() {
alert('a day has been clicked!');
}
})
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
https://jsfiddle.net/03d1ahwy/
The problem is that
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.print.css">
must be changed to
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.print.css" media="print">
(i.e. you must add the attribute media="print" to the link tag)
otherwise you'll always get the print layout, even on-screen. See here for more details about the "media" attribute.
Once you add that, it tells the print CSS to only take over when the user is trying to print the page, and lets the standard theme be used in the in-browser version.
Demo: https://jsfiddle.net/40f1z3ts/
P.S. If you just want to use the standard theme, you don't actually need to write themeSystem : "standard", in your code at all - this is the default value, so you can just omit it.
P.P.S. Of course if you want to use any other themes you have to set the theme system appropriately and include the relevant CSS files in your page.
looks like you are having problems with the libraries
download full calendar from here:
https://fullcalendar.io/download
make a folder and name it "lib" add fullcalendar.min.css, fullcalendar.print.min.css and moment.min.js inside it and use the next headers
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='lib/fullcalendar.min.css' rel='stylesheet' />
<link href='lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script>
<script src='lib/fullcalendar.min.js'></script>
Edit:
for bootstrap 4 theme add:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
for jquery-ui theme add:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
I've built a web site using jQuery and Fancybox. It works fine on the web but I'd like to put it on a Hoo-Too Tripmate Titan to access it offline. The thing is it doesn't work although jQuery and Fancybox are included in the web site tree.
Here's the code of the the calls to the libraries.
<link rel="stylesheet" href="css/general.css">
<link rel="shortcut icon" href="images/icone_site.png">
<link rel="apple-touch-icon" href="images/icone_site.png">
<link rel="apple-touch-icon-precomposed" href="images/icone_site.png">
<link rel="icon" type="image/png" href="images/icone_site.png" />
<script src="jquery/jquery-2.1.3.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
Any idea ?
I have created a small mvc application using Ckeditor that should use some css files that are stored on a local server
<head>
<link href="http://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/new/all.css?v=1" media="all" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/new/templates.css?v=1" media="all" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/pre_review/colors.css?v=1" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/pre_review/paged_test.css?v=2" media="paged" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/pre_review/bootstrap.min.css?v=1" media="all" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/pre_review/main.css?v=1" rel="stylesheet" type="text/css" />
<style type="text/css">html { -ro-editable: true; }
</style>
</head>
At the initialization of the editor i call setData and pass in a string with that html block to apply the remote css files to the content of the editor. However they are not being applied correctly
if i set config.fullPage = true then the html block gets put in between the body tags and thus can be deleted if the user presses the backspace key enough.
I have also tried setting config.fullPage =false, this inserts the content fine however it strips the head tags from the block so it can also be deleted by the user if they press backspace.
Is there anyway of getting this html block to go specifically in the head section so that it cannot be edited?
I recommend to use the config.contentsCss property in your ckeditor config, to set a specific css file or a list of css files.
See API Docs: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss
Since version 4.4 it is also possible to add more than one stylesheet during runtime to the editor instance with editor.addContentsCss(), see http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-addContentsCss for more info.
May the source be with you. Have Fun.
Okay my problem is that the less files are not working on the live server. I have made double sure that they are there and that the paths are correct, but it just is not working.
This does however work fine on the localhost.
My script is as follows
<link href="fonts/fonts.css" rel="stylesheet">
<!-- CSS files for plugins -->
<link href="stylesheets/pace.preloader.css" rel="stylesheet">
<link href="stylesheets/animate.css" rel="stylesheet">
<link href="stylesheets/parallax.css" rel="stylesheet">
<link href="stylesheets/owl.carousel.css" rel="stylesheet">
<link href="stylesheets/owl.theme.css" rel="stylesheet">
<link href="stylesheets/magnific-popup.css" rel="stylesheet" >
<link href="stylesheets/jquery.tweet.css" rel="stylesheet"/>
<link href="stylesheets/foliohover.css" rel="stylesheet">
<link href="stylesheets/fancymenu.css" rel="stylesheet">
<link href="stylesheets/intro.css" rel="stylesheet">
<link rel="stylesheet" type="text/less" href="less/color.less" />
<!-- Main Template Styles -->
<link href="stylesheets/main.css" rel="stylesheet">
<!-- Main Template Responsive Styles -->
<link href="stylesheets/main-responsive.css" rel="stylesheet">
<!-- Main Template Retina Optimizaton Rules -->
<link href="stylesheets/main-retina.css" rel="stylesheet">
<!-- LESS stylesheet for managing color presets -->
<!-- LESS JS engine-->
<script src="less/less-1.5.0.min.js"></script>
<script src="javascripts/modernizr.custom.js"></script>
If you open inspect element you will see the 404 errors for the less files
View the site live here: www.codethis.co.za
Please any help would be much appreciated
I have deployed my ASP.NET on the production server. It has been working properly but recently I came to know that in one of the client machine with IE9 (of same version as mine) the site is not rendering properly - does not load up the CSS and javascripts.
When I got the screenshot of F12 (dev tool in IE9) from client, I found that all the CSS errors had this message - "css was ignored due to mime type mismatch" and the javascript showed - 'SCRIPT1002: Syntax Error'
Any suggestion is highly appreciated. I have tried all that came to my mind... I am lost now/
here is the response HTML that is recieved at client -
Site
<script src="/Utility/global.js?Version=2.1.61120.2" type="text/javascript"></script>
<script src="/Scripts/jquery-1.4.1.min.js?Version=2.1.61120.2" type="text/javascript"></script>
<script src="/Scripts/global.js?Version=2.1.61120.2" type="text/javascript"></script>
<style type="text/css"> body { font-size: 84%; } </style>
<link rel="stylesheet" href="/Themes/default/style/Global.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/Themes/default/style/Common.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/Themes/default/style/common_print.css" type="text/css" media="print" />
<link rel="stylesheet" href="/Themes/default/style/forum.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/Themes/default/style/forum_print.css" type="text/css" media="print" />
<script src="/Utility/global.js?Version=2.1.61120.2" type="text/javascript"></script>
<link rel="stylesheet" href="/Themes/default/style/projects.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/Themes/default/style/sticky-footer.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/Themes/default/style/blog.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/Themes/default/style/menu.css" type="text/css" media="screen" />
Is CSS inline (inside <style> tags), imported (#import inside <style>) or external (<link>)? If imported or external, is it on CDN and what is the "Content-Type" HTTP response header sent? If internal, does your <style> contains the "type" attribute?
Check the headers with curl
curl -I http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css
Next go to AWS S3 console, go to the file > properties > metadata and confirm they are set.
IE can be very particular about content types.