When I load my page , I get an ERROR 403 message.
It seems that the browser cannot access the CSS file,
but in fact i don't have a CSS file.
My style is between the head tag:
GET https://s3-us-west-1.amazonaws.com/strong-lifts-5x5/stylesheet.css
<!DOCTYPE html>
<html lang="en">
<head>
<title> New Responsive design web page </title>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<meta name="viewport" content= "width=device-width , initial-scale = 1.0">
<style>
body {
background-image: url(https://s3-us-west-1.amazonaws.com/strong-lifts-5x5/light-grey+5x5.jpg);
color:#000305;
font-size:89.5%; /* Base font size is 14px*/
font-family: Arial, 'Lucida Sans Unicode';
line-height:1.5;
text-align:left;
width: 99%;
margin: 0 auto;
}
</style>
</head>
It is because this code: <link rel="stylesheet" href="stylesheet.css" type="text/css" />
if you do not have a stylesheet.css relative to your index page then it will give you an error. Remove that and you will be fine.
When you get 403 error, it means you don have permission to access it. For some reason your request is forbidden. For example, I had this problem with login. When I wasn't login my css wouldn't load. But when I logged in it works. You should check your htaccess configuration or anything where you can edit permissions for your project.
Related
I'm working on creating resizable DIVs in html and have found some code online as reference.
When running the HTML source code on chrome, the resizable function does not work and I can only see plain text with no functionality. However, the code works fine on JSFiddle.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#resizable" ).resizable();
} );
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>
This is the exact code that I'm working with. Any ideas why it's not functioning properly on chrome?
I can only see plain text
Your CSS is not loading.
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
This is a scheme relative URL.
It will work fine providing the HTML document you are viewing is loaded over HTTP or HTTPS.
Since it is not, you must be loading it directly from your local filesystem with a file: scheme URL (typically this will be because you double clicked the HTML document in Windows Explorer).
You need to load the HTML document from a web server or change the URL to the CSS so it uses an absolute URL (one which starts https:).
I'm trying to download the source of https://outline.com/rUdmgC. (I want to get the same file I get when I save that url using Chrome.)
I first tried wget and curl, which didn't work. (By didn't work, I mean the downloaded source was mostly empty; The page probably uses Javascript to create its content.)
Then I did some googling, and tried this https://gist.github.com/giocomai/247d54e097b5083e2451. It didn't work, and exited with these exceptions:
TypeError: undefined is not a constructor (evaluating 'suffix.startsWith('http:')')
https://outline.com/app.js:20767
https://outline.com/app.js:17217
https://outline.com/app.js:17113 in onEachEvent
https://outline.com/app.js:17210 in value
https://outline.com/app.js:18695
https://outline.com/app.js:18792
https://outline.com/app.js:19000 in each
https://outline.com/app.js:18792 in toggle
https://outline.com/app.js:18683
https://outline.com/app.js:19498 in mountTo
https://outline.com/app.js:19638 in pushTags
https://outline.com/app.js:19000 in each
https://outline.com/app.js:19642 in pushTags
https://outline.com/app.js:19693 in mount
https://outline.com/app.js:20112
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" lang="en" class=" js csstransforms3d csstransitions" style=""><head>
<title>Outline - Read & annotate without distractions</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,height=device-height">
<meta name="description" content="Outline is a free service for reading and annotating news articles. We remove the clutter so you can analyze and comment on the content.">
<meta name="keywords" content="clean links readable readability medium typography annotations annotate">
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/daoolpmoieinofbnddaofhkhmbagfmnj">
<link rel="stylesheet" href="https://outline.com/css/outline.css?v=1.0.1">
<link rel="shortcut icon" href="https://outline.com/favicon.png">
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script async="" src="https://www.google-analytics.com/analytics.js"></script><script src="https://outline.com/js/modernizr.custom.js"></script>
<script src="https://outline.com/app.js"></script>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-2748618594698147",
enable_page_level_ads: true
});
</script>
<style type="text/css">.yue { max-width: 650px; margin: 0 auto; }</style></head>
<body>
<outline-app></outline-app>
<script>
var riot = require('riot')
require('initialize')
</script>
</body></html>
What can I do?
Oh yes, it does. To see the resulting page you should open the page in browser and see it in the developer mode.
I've a piece of code that's been working fine until I include some css.
Here is the link to the code (the code editor here didn't like the mix of script and html and was testing my patience sorry).
Gist code snippet can be viewed here
It's using Bootstrap. The issue is this works fine (it displays a text input with a x to clear it and when you press the x it clears the text input box). When I include the...
<!-- CSS -->
<link href="css/app.css" rel="stylesheet">
though, clicking the x in the input box does nothing. Can anyone see any obvious reasons?
Without CSS included it's fine. With CSS included it fails.
The css file is basically a massive compiles .less file and probably not appropriate to place in a code box here so here it is in another gist link.
UPDATE: Here are the console logs if that helps: enter link description here
The locations of your javascript file links and event handler code are incorrect. You are calling $("#searchclear").click(..... before you load jQuery and all of the linked js files should be just before the closing body tag, not after it. Changing your html to the below will fix this issue:
Working Demo
(note that I changed some of the links to link to the CDN versions of the files to avoid errors in my demo):
<!DOCTYPE html>
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>create appt</title>
<!-- Vendor CSS -->
<link href="vendors/animate-css/animate.min.css" rel="stylesheet">
<!-- CSS -->
<link href="css/app.css" rel="stylesheet">
<!-- Following CSS codes are used only for specifics in this test-->
<style type="text/css">
.margin-bottom > * {
margin-bottom: 20px;
}
#searchclear {
position: absolute;
right: 5px;
top: 0;
bottom: 0;
height: 14px;
margin: auto;
font-size: 14px;
cursor: pointer;
color: #ccc;
}
</style>
</head>
<body>
<div class="btn-group">
<input id="searchinput" type="search" class="form-control" value="LUNCH">
<span id="searchclear" class="glyphicon glyphicon-remove-circle"></span> </div>
<!-- Javascript Libraries -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="vendors/nicescroll/jquery.nicescroll.min.js"></script>
<script src="vendors/waves/waves.min.js"></script>
<script src="vendors/bootstrap-growl/bootstrap-growl.min.js"></script>
<script src="vendors/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
<script src="vendors/sweet-alert/sweet-alert.min.js"></script>
<script src="js/functions.js"></script>
<script>
$("#searchclear").click(function(){
$("#searchinput").val('');
});
</script>
</body>
</html>
<!-- css -->
<link href="css/app.css" rel="stylesheet" type="text/css">
EDIT
I had my index.css overriding my original header layout. Watch your ID's and classes!
EDIT
I'm using jQuery to load my website header and footer sections. Then display them on my index & other pages. However, it seems to resize my header whenever I try to load it. Anyone have any clue as to why that may be? I did some research on this problem but didn't found anything that helps.
Here's the websites it's affecting.
INDEX
HEADER
and here's the JSFiddle that has my code in it for the header
JSFiddle for Header
and my index code how I'm calling header
<html>
<head>
<title>HobbsBear Studios</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href='http://fonts.googleapis.com/css?family=Exo' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="_css/index.css" type="text/css" />
<link rel="stylesheet" href="_css/photobanner.css" type="text/css" />
<script type ="text/javascript" src="_javascript/photobanner.js"></script>
<link rel="icon" href="../favicon.ico" type="image/x-icon">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!-- A buncha stuff in the middle --!>
<div id="footer"></div>
</body>
</html>
So it is displaying all of the elements just not in the correct layout. Any ideas?
The root cause of this is because the 'Slidy container' that you are using overrides the class names that you are using in your header. You may have to change these class names. Within 2 minutes i found that the following 2 classes were breaking it for you and they are coming from the index.css page.
#menu {
position: absolute;
top: 80%;
left: 25%;
width: 50%;
font-family: 'Exo', sans-serif;
font-weight: bold;
}
#logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 550px;
}
Thing is you will HAVE to change the ID's either in the content or the header because having more then one of the same ID on a page is not good practice and on some browsers will throw out an error cause it's not 'valid' html structure. ID's are meant to be used to target exact specific elements on a page where as classes are used for targeting multiple elements at once.
Fix this and you should be good to go.
I added the fancybox 2 plugin to my site and it works fine when I test it in Chrome and Safari, but in Firefox it doesn't. The page loads fine, but when you click on a thumbnail to open fancy box, the margin styles in my body tag are cancelled (I determined this using firebug) and my whole layout shifts entirely to the right side of the viewport. When you click out of fancy box the layout remains pushed to the right. Has anyone had a similar problem and would you have any tips on how to fix it? I've posted my DOCTYPE and head bellow along with my css rules for the body. If more info is needed let me know. The site is not yet up so I can't link to it. I'm new to this so sorry if I've missed anything obvious. Thanks so much to anyone who thinks they can help!!
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Commercial</title>
<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="styles/commercial_new.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Scripts/fancyapps-fancyBox-e4836f7/source/jquery.fancybox.pack.js"></script>
<link href="Scripts/fancyapps-fancyBox-e4836f7/source/jquery.fancybox.css" rel="stylesheet" type="text/css">
</head>
body {
width: 1050px;
background: #c7c7c7;
margin: 0 auto;
overflow: scroll;
}
I actually had this same problem this morning. The solution I went with (there's probably a better option) is to create a div wrapping the body content and set the width on that, then set the body width to 100%;
<body>
<div id="container">
// Page content
</div>
</body>
CSS:
body { width: 100%; }
#container { width: 1050px; margin: 0 auto; }
Seemed to fix issues with Firefox, and we tested it back to IE7 without any issues.