I was able to get myExample.ddns.net to point to my local computer successfully. Unfortunately, only the text shows up. All of the CSS styling is missing, and same with the images. If I go to another virtual host that points to the same folder on my computer, everything displays perfectly.
Any idea on why the CSS styling and images are missing ONLY when coming in through the dynamic DNS service offered by noIP.com ?
Thanks!
It sounds like you have a <base> tag rewriting all your urls to something not related. Remove the base tag from your page HEAD, and your CSS and JS will start to load correctly:
<base href='...' />
Read more about the base tag here.
Related
I have placed my CSS and Images folders and index.html on GitHub. Only the html displays without the CSS formatting. I have cleared my cache and cookies. I'm using Chrome. I can't seem to get the CSS formatting to work.
Can anyone help?
uploaded web files to Github: https://github.com/Dennybribri/cv
I have attached a picture of how the top part of the website should look like. Here is a link to the site from Github that just displays the html: https://dennybribri.github.io/cv/
Rename your folder from CSS to css.
The filesystem used on the servers of Github pages sites is case sensitive.
You'll need to import your css from the CSS folder:
<link rel="stylesheet" href="CSS/styles.css">
Also because of the same problem your images will not show up. You will need to specify the path to Images/someimage.jpg instead of images/someimage.jpg
Thank you Mahmoud and Merlin. I changed the folder names to lower case and forever have this issue stuck in my brain. It works great!
My site is in a Host. (Not localhost)
Framework: CodeIgniter.
Changes made using CSS: Flot chart's legend
I did changes to front end using Chrome tools/developer tools.
I can see all the changes I made instantly.
I FTP to the site, downloaded the CSS file, did necessary changes (same as chrome developer changers) and uploaded the CCS file.
I access the site, but I cannot see the changes I made using CSS file.
Check if your hosted CSS contains the latest changes
If CSS is ok try to open chrome dev tools and inspect the element that you are trying to modify. Scroll through the CSS applied to that element and check if your styles are there.
If you didn't find any of the styles that you are tring to apply to the element probably you misspelled the selector name. Remember to check .class #id
also, in order to ensure that your CSS files are not cached suffix your php files like this
<link href="/stylesheet.css?<?php echo time(); ?>" rel="stylesheet" type="text/css" /&glt;
EDIT
tip above also works for any resource! (css, javascript files, images ...)
Try Ctrl+F5. It's hard refresh
change the name of the css file so there are no cache issues and then check. if that does not work then look at your source code and copy paste the address of the css file to make absolutely certain you have the link correct.
I think your CSS is still cached so have a Look at this popular question: How to force browser to reload cached CSS/JS files?
There are some solutions how you can force your browser to refresh the CSS or js.
The easiest answer you will get is using something like this:
/styles/screen.css?v=1234
If you did a change all you have to do is to +1 the counter!
In PHP you van also use this:
<link rel="stylesheet" href="mycss.css?v=<?php echo filemtime('mycss.css') ?>"/>
It's like an autocounter using the timestamp of the CSS file.
In the DevTools Settings (F1) or in the Network panel (depends on what version of Chrome you are using) tick the Disable cache (while DevTools is open) checkbox. If caching is your problem, it should get fixed.
I have just recently implemented the five star rating system from ajax, into my asp.net site. Everything works fine in locall debug mode.However. Once i publish it, the css does not show up. I have declared all of the css within the content page, not sure if this is why. I am very in-experienced with working with css; so i am sorry if it something simple.
I have checked the spelling of the image url, and have also tried implementing it into the site.css. But as i said, i am in-experienced; so am not sure what to do here.
This is my code as it stands:
The css declared at the top of the content page:
http://codepad.org/m1w39Hep
The reference to the css from my rating control:
http://codepad.org/Kl0BKets
Thanks in advance!
Check if your css links is right and your css files loaded successfully
I have seen your code.
Give extention as ".css" and not ".c"
I dont think that you can use Codepad for that because it does not give support for CSS.
If you are not using Codepad
Then as you are deploying it in server then check the URLs of the Images that are present in the CSS file for rating/.
https://friends-with-you.myshopify.com/
I'm trying to develop my first shopify theme. I'm trying to load a stylesheet which is hosted on another server, but the CSS is not loading. If I copy and paste that CSS directly into a file in the shopify theme, it works.
<link type="text/css" rel="stylesheet" href="http://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
What am I doing wrong at the above URL, and why isn't the css loading?
thanks!
Can you load your CSS file over both http and https? If so, change your tag to look like this:
<link type="text/css" rel="stylesheet" href="//fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
That way whether a user visits using http://yourstore.com or https://yourstore.com, they'll get the stylesheet served using the protocol they're on (and you won't get any mixed content warnings).
A little more background: http://paulirish.com/2010/the-protocol-relative-url/
Under IE7 and IE8, using this in a <link> tag will result in your content being fetched twice.
Change your link tag to use a secure URL:
<link type="text/css" rel="stylesheet" href="https://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
^
The URL you're using now works fine on its own, but since you're browsing to the Shopify store over SSL, many web browsers are going to be hesitant to load the CSS over an unsecured connection.
I just checked and pagodabox serves the CSS file just fine over SSL.
In normal HTML documents one can load stylesheets from anywhere, as long as they exist and you're able to load them by typing the URL in (which I can).
I see the page as two navigation bars with a logo on the left hand side. There are hover states with transitions to a colour background on each item. Although, when I loaded the page, Chrome warned me not to load supposedly insecure content. Before this is loaded I just see text in Times New Roman. I think this is you problem.
I use themes with WordPress and style-sheets come with them (mostly). I don't see why you couldn't just put the style-sheet in with the rest of the theme.
Overall, the answer is yes (normally) but in this case browsers may regard it as un-safe and therefore not load it.
Yes you can! But it is faster to host the stylesheet on your server/where the other files reside. If you plan to include a stylesheet from elsewhere, you could run into problems of that server being down/busy and hence your theme will not display as required. As #Blieque mentioned, some browsers may question external content causing unnecessary warning popups to a user/user-agent.
The web dev toolbar for Firefox is quite an impressive tool.
What I am completely clueless about is how does this tool get the css stylesheet file of a site? This is hosted on a host which is secure etc. I am completely stumped.
I must be thinking about this in all the wrong way.
Thanks
The client (in this case Firefox) has to download the CSS file in order to render the page correctly. The plugin (in this case Firebug) simply requests the proper URL and the browser it gets it--most likely from the cache. There is no real mystery here.
In every HTML file, there's a link to the CSS stylesheet, or else the browser wouldn't know where to find it, thus losing the ability to render the page correctly.
It's in the form of <link rel="stylesheet" type="text/css" href="theme.css">,
I'd like to add that regardless of whether the host is 'secure' or not, it still is presenting the file to the client.
Unless, of course, you're looking at a XML file. Then you need to consult the XSL which'll tell you where the stylesheet is.