I have a j2ee application I'm building and deploying to gae, and for some reason, when there is a trailing slash at the end of my url, the CSS does not load.
For example:
mysite.com/account works perfectly
but
mysite.com/account/ loads the page without the CSS
Any idea what I can do to fix this?
CSS Stylesheets:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="/css/rrstyles.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/grayscale.css" rel="stylesheet">
<link href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<title>My app</title>
</head>
I am including this header as a separate jsp, but it works when I go to /account but not /account/ for some reason. I don't understand how that could be.
Most of your CSS links have relative URLs. This means they will be interpreted relative to the directory of the URL of the calling page. When the caller URL is mysite.com/account, the URL css/grayscale.css is interpreted as mysite.com/css/grayscale.css. But when the caller URL is mysite.com/account/, the CSS URL is treated as mysite.com/account/css/grayscale.css.
The simplest solution is to use absolute paths in your URLs:
<link href="/css/grayscale.css" rel="stylesheet">
it will work 100%
step 1
<mvc:resources location="/WEB-INF/assets/" mapping="/resources/**"></mvc:resources>
setp 2
<spring:url var="css" value="/resources/css/"/>
<spring:url var="js" value="/resources/js/"/>
<spring:url var="image" value="/resources/image/"/>
add a slash after value
step 3
add your style sheet like this
<link rel="stylesheet"
href="${css}/common/bootstrap.min.css">
Related
[UPDATE]
Please not that most of these elements are loaded from the cache so no need to connect to the database which means it's not a database or server delay.
I'm using Laravel in my project and here's the main header code
<!DOCTYPE html>
<html lang="{{ $lang }}" dir="#if($lang == 'ar') rtl #else ltr #endif">
<head>
<meta charset="utf-8">
<meta name="_token" id="main_token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<script src="<?=config("app.public_path")?>js/jquery-2.2.4.min.js"></script>
<script src="<?=config("app.public_path")?>js/bootstrap.3.4.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="<?=config("app.public_path")?>js/modernizr-2.7.1.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="<?=config("app.public_path")?>bootstrap/css/bootstrap.min.css">
#if($lang == 'ar') <link rel="stylesheet" href="<?=config("app.public_path")?>css/bootstrap-rtl.css"> #endif
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" type="text/css" href="<?=config("app.public_path")?>css/style_{{$lang}}.css">
And the config public path
'public_path' => 'http://www.example.com/public/',
The elements load in wrong places with wrong sizes then in seconds the stylesheet loads and elements get positiined correctly and resized too which makes the page look ugly at the beginning and I'm talking about css not javascript or jQuery. Why does this happen and how to solve it?
You should be using the asset function instead of PHP shorthand echo tags and config paths.
For example, instead of this:
<?=config("app.public_path")?>js/jquery-2.2.4.min.js
You are supposed to do this:
{{ asset('js/jquery-2.2.4.min.js') }}
Also, consider using defer for your scripts e.g.:
<script src="{{ asset('js/jquery-2.2.4.min.js') }}" defer></script>
I Have the following perplexing css /browser related (I assume) error that causes the H3 tags to be displayed incorrectly in Google Chrome, but correctly in Internet Explorer - this has never happened before. It displays fine in Internet Explorer (but the H1 tag is messed up there), but in Google Chrome, the h3 tag is white.
The main.css is shown below and you will see that the H3 tag is defined #000 (black), - this shows up fine when the site is opened in IE but is white in Google Chrome.
Main CSS Code
https://repl.it/Js8F/0
Highlight (above) over the blank white spaces to see the H3 tag headings.
Is anyone able to shed any light on why this might be happening and help please? If this indeed some browser related css issue, it would be of huge help to other users.
Update: this is the additional code on the php page that is in question:
<!-- Bootstrap Css -->
<link href="bootstrap-assets/css/bootstrap.min.css" rel="stylesheet">
<link href="css/prism.css" rel="stylesheet" />
<!-- Style -->
<link href="plugins/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="plugins/owl-carousel/owl.theme.css" rel="stylesheet">
<link href="plugins/owl-carousel/owl.transitions.css" rel="stylesheet">
<link href="plugins/Lightbox/dist/css/lightbox.css" rel="stylesheet">
<link href="plugins/Icons/et-line-font/style.css" rel="stylesheet">
<link href="plugins/animate.css/animate.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link rel="stylesheet" href="css/expanding-list.css" type="text/css" media="screen, projection">
<script type="text/javascript" src="js/expanding-list.js"></script>
<!-- Icons Font -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
There is a stackoverflow previous answer which suggests a fix for a similar problem as follows:
<link href="/css/dropit.css" rel="stylesheet" type="text/css"></link>
..but I cannot seem to see where this would fit in with my code
I'm a newbie in node.js and I just made a chat based on socket.io example.
I did a login form on the index of my application but the images and css are not working when I access to my application on localhost:3000. However, when I launch my index.html directly on my browser the css and the images are correctly loaded.
That's the tree of my application :
Tree view
And that is what I see when I launch my node js server and I access to localhost:myPort:
index.html on localhost
That the head of index.html :
<meta charset="UTF-8">
<title>Khoya Talk</title>
<link rel="shortcut icon" href="public/assets/images/favicon.ico" type="image/x-icon">
<link rel="icon" href="public/assets/images/favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Optional theme -->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">-->
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="public/css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
Thank you for your help.
Add / before all public and:
App.js
app.use(express.static(__dirname + '/public'));
index.html
<link rel="shortcut icon" href="/assets/images/favicon.ico" type="image/x-icon">
And make this for all path. And src property in images:
<img src="/assets/images/halftone.png">
When you load the page in your browser, check the developer tools / debugger to see whats happening.
If it cant find the css (or the images), its because you need to use Express like this (in your js file):
At the top add:
var express = require("express");
var app = express();
Then add folders with the content like this:
app.use(express.static(__dirname + '/public'));
Apparently, you have to use the / with the static directory
app.use(express.static(__dirname + '/public/'));
Then in your CSS:
background-image('img/pic.png')
where img is the folder you store your images in, and make sure it is in the public folder.
Hope that helps.
so i don't think my website is picking up the css as when i make it live, the content is there but the style is not. The background is black when it should be white, the font isnt taking effect & the nav isnt showing either. I have done 2 sites the same way only difference is i have uploaded the site to a HTDOCS folder rather than a public_html as this what the hosting said to do...
this is what it looks like live
but should look like this
HEAD OF INDEX
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- PAGE TITLE -->
<title>Peacehaven Golf & Fitness</title>
<!-- MAKE IT RESPONSIVE -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO -->
<meta name="description" content=peacehavengolfcourse">
<meta name="author" content="">
<!-- BOOTSTRAP -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- STYLES -->
<link href="css/style.css" rel="stylesheet" media="screen">
<!-- FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
If you're sure that CSS is there, it may be a cache issue. The old assets are cached by your browser and the new assets are not loaded.
To test, load the website in incognito mode, and the browser won't cache/load the cache.
Mac:
Cmd + Shift + N
Windows/Linux:
Ctrl + Shift + N
hi your site is working but can you change this code line 10:
<meta name="description" content=peacehavengolfcourse">
to
<meta name="description" content="peacehavengolfcourse">
and remove line 38 and 40 </li> </ul>
add line 309 <footer>
You have syntax errors...
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>