Go to Topic: Previous•Next
Go to: Forum List•Message List•New Topic•Search•Log In•Print View
CSS not being rendered
Posted by: songboy (---.range81-157.btcentralplus.com)
Date: August 16, 2016 11:45PM

I have activated the latest version of Wampserver and I have followed all the rules to create virtual hosts. Unfortunately, when I choose a virtual host and then choose the page to be viewed from the list, I find the CSS code is not operating. However, if I add localhost to the url in front of the virtual host name, everything works as it should. If I once again remove localhost from the url the same problem occurs. How do I get CSS to work without adding localhost to the url (something that we are advised not to do).
Thanks for a solution
Alan

Options: Reply•Quote
Re: CSS not being rendered
Posted by: RiggsFolly (Moderator)
Date: August 17, 2016 12:53AM

Hi

First lets see the contents of you httpd_vhosts.conf file

---------------------------------------------------------------------------------------------
(Windows 10 Pro 64bit) (Wampserver 3.3.4 64bit) Aestan Tray Menu 3.2.5.4
<Apache versions MULTIPE> <PHP versions MULTIPLE> <MySQL Versions MULTIPLE>
<MariaDB versions MULTIPLE> <phpMyAdmin versions MULTIPLE> <MySQL Workbench 8.0.23>
Read The Manuals Apache -- MySQL -- PHP -- phpMyAdmin
Get your Apache/MySQL/mariaDB/PHP ADDONs here from the WAMPServer alternate Repo
-X-X-X- Backup your databases regularly Here is How dont regret it later! Yes even when developing -X-X-X-

Options: Reply•Quote
Re: CSS not being rendered
Posted by: songboy (---.range81-157.btcentralplus.com)
Date: August 17, 2016 01:41AM

This is the code:

#
# Virtual Hosts
#

<VirtualHost *:80>
ServerName localhost
DocumentRoot c:/wamp64/www
<Directory "c:/wamp64/www">
Options +Indexes +FollowSymLinks +MultiViews
AllowOverride All
Require local
</Directory>
</VirtualHost>

<VirtualHost *:80>
ServerName localroot4
DocumentRoot c:/wamp64/www/localroot4
<Directory "c:/wamp64/www/localroot4">
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Require local
</Directory>
</VirtualHost>

PS I am not using style sheets. My CSS is actually sitting at the top of the page.

Thanks
Alan

Options: Reply•Quote
Re: CSS not being rendered
Posted by: RiggsFolly (Moderator)
Date: August 17, 2016 01:48AM

And you amended your HOSTS file?

127.0.0.1  localhost
::1  localhost

127.0.0.1  localroot4
::1  localroot4

And you enter localroot4 in the browser address bar?

---------------------------------------------------------------------------------------------
(Windows 10 Pro 64bit) (Wampserver 3.3.4 64bit) Aestan Tray Menu 3.2.5.4
<Apache versions MULTIPE> <PHP versions MULTIPLE> <MySQL Versions MULTIPLE>
<MariaDB versions MULTIPLE> <phpMyAdmin versions MULTIPLE> <MySQL Workbench 8.0.23>
Read The Manuals Apache -- MySQL -- PHP -- phpMyAdmin
Get your Apache/MySQL/mariaDB/PHP ADDONs here from the WAMPServer alternate Repo
-X-X-X- Backup your databases regularly Here is How dont regret it later! Yes even when developing -X-X-X-



Edited 2 time(s). Last edit at 08/17/2016 01:48AM by RiggsFolly.

Options: Reply•Quote
Re: CSS not being rendered
Posted by: songboy (---.range81-157.btcentralplus.com)
Date: August 17, 2016 01:59AM

This is what I have:


# localhost name resolution is handled within DNS itself.
# 127.0.0.1 localhost
# ::1 localhost


127.0.0.1 localhost
127.0.0.1 localroot4

::1 localhost
::1 localroot4


The problem is that when I have localroot4/file name in the address bar, the CSS parts of the code don't operate.
If I have localhost/localroot4/file name the CSS operates.

Thanks
Alan

Options: Reply•Quote
Re: CSS not being rendered
Posted by: RiggsFolly (Moderator)
Date: August 17, 2016 02:12AM

Ok so lets have a look at some of this code that is not working

---------------------------------------------------------------------------------------------
(Windows 10 Pro 64bit) (Wampserver 3.3.4 64bit) Aestan Tray Menu 3.2.5.4
<Apache versions MULTIPE> <PHP versions MULTIPLE> <MySQL Versions MULTIPLE>
<MariaDB versions MULTIPLE> <phpMyAdmin versions MULTIPLE> <MySQL Workbench 8.0.23>
Read The Manuals Apache -- MySQL -- PHP -- phpMyAdmin
Get your Apache/MySQL/mariaDB/PHP ADDONs here from the WAMPServer alternate Repo
-X-X-X- Backup your databases regularly Here is How dont regret it later! Yes even when developing -X-X-X-

Options: Reply•Quote
Re: CSS not being rendered
Posted by: songboy (---.range81-157.btcentralplus.com)
Date: August 17, 2016 02:23AM

This is one of my test pages for a CSS animation style:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>These Are Our Words</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
#wrapper {
position: relative;
overflow: hidden;
background: blue;

}
.scroller {
position: absolute;
left: 0;
top:50%;
font-size:200px;

font-family: 'Open Sans', sans-serif;

-webkit-animation: scroll-left 10s linear infinite;
-moz-animation: scroll-left 10s linear infinite;
animation: scroll-left 10s linear infinite;
white-space: nowrap;
}
.front {
z-index: 100;
text-align: center;
left:-8rem;
}
.scrText {
display:inline-block;
}
@-moz-keyframes scroll-left {
0% {
-moz-transform: translate(0, -50%);
}
100% {
-moz-transform: translate(-50%, -50%);
}
}
@-webkit-keyframes scroll-left {
0% {
-webkit-transform: translate(0, -50%);
}
100% {
-webkit-transform: translate(-50%, -50%);
}
}
@keyframes scroll-left {
0% {
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0%, -50%)
}
100% {
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
}
.scroll-container {
padding-left:8rem;
padding-right:8rem;
width:100%;
box-sizing:border-box;
}
.scroll-image {
position: relative;
z-index: 20;

}
.scroll-image img {
width:100%;
height:auto;
}
.overflow-hidden {
overflow:hidden;
}
.relative {
position:relative;
}
.dark {
color: #3a3a3a;
}
.light {
color:#fff;
}
</style>

</head>

<body>

<div id="wrapper">

<span class="scroller">
<span class="scrText dark">These&nbsp;Are&nbsp;Our&nbsp;Own&nbsp;Words</span>
&nbsp;
<span class="scrText dark">These&nbsp;Are&nbsp;Our&nbsp;Own&nbsp;Words</span>
&nbsp;
</span>


<div class="scroll-container">
<div class="scroll-image">
<div class="overflow-hidden relative">

<img src="images/bg.jpg"/>

<span class="scroller front">
<span class="scrText light">These&nbsp;Are&nbsp;Our&nbsp;Own&nbsp;Words</span>
&nbsp;
<span class="scrText light">These&nbsp;Are&nbsp;Our&nbsp;Own&nbsp;Words</span>
&nbsp;
</span>

</div><!--overflow-hidden-->
</div><!--scroll-image-->
</div><!--scroll-container-->

</div><!--wrapper-->

</body>
</html>


It produces a piece of scrolling text. With localhost/localroot4/scrolling text real code.html, it works. If you remove localhost, the CSS does not function.

Options: Reply•Quote
Re: CSS not being rendered
Posted by: RiggsFolly (Moderator)
Date: August 17, 2016 02:43AM

Hmmm

That code works for me anywhere I put it, except for the background image which I dont have.

I get a blue page with scrolling text.

As the css is all in the file there is no reason why it shoudl not work anywhere.

What browser are you using, try all the obvious ones like IE, FF, Chrome, Edge(if you are W10)

---------------------------------------------------------------------------------------------
(Windows 10 Pro 64bit) (Wampserver 3.3.4 64bit) Aestan Tray Menu 3.2.5.4
<Apache versions MULTIPE> <PHP versions MULTIPLE> <MySQL Versions MULTIPLE>
<MariaDB versions MULTIPLE> <phpMyAdmin versions MULTIPLE> <MySQL Workbench 8.0.23>
Read The Manuals Apache -- MySQL -- PHP -- phpMyAdmin
Get your Apache/MySQL/mariaDB/PHP ADDONs here from the WAMPServer alternate Repo
-X-X-X- Backup your databases regularly Here is How dont regret it later! Yes even when developing -X-X-X-

Options: Reply•Quote
Re: CSS not being rendered
Posted by: songboy (---.range81-157.btcentralplus.com)
Date: August 17, 2016 02:43AM

Actually, I have realised that colours, sizes etc are being rendered. The CSS which isn't working is anything to do with animation (unless you add localhost to the url).

Thanks
Alan

Options: Reply•Quote
Re: CSS not being rendered
Posted by: songboy (---.range81-157.btcentralplus.com)
Date: August 17, 2016 02:52AM

I am using Windows 10 Edge.
I will try the others tomorrow.
At least you've proved that it works within WAMP - that is helpful.

Thanks for your help.
Alan

Options: Reply•Quote
Re: CSS not being rendered
Posted by: songboy (---.range81-157.btcentralplus.com)
Date: August 17, 2016 09:06PM

I have changed the target browser to Chrome and everything works off the virtualhost ie all the animations are working. It appears that the browser I had originally was IE 11. Maybe this was the problem - not sure.
All the best -
Alan

Options: Reply•Quote
Re: CSS not being rendered
Posted by: RiggsFolly (Moderator)
Date: August 18, 2016 01:16AM

Some modern browser have issues with localhost and the local ip address. I thinks its intended to be a security "feature".

I know Chrome also can be funny about this as well.

Rather than me reproducing any info on this, if you do a Google search on "Edge localhost" and "Chrome localhost" you will get detail of the situation and probably some info on how to configure it/them to allow this kind of access.

Glad it was as simple to solve as this.

---------------------------------------------------------------------------------------------
(Windows 10 Pro 64bit) (Wampserver 3.3.4 64bit) Aestan Tray Menu 3.2.5.4
<Apache versions MULTIPE> <PHP versions MULTIPLE> <MySQL Versions MULTIPLE>
<MariaDB versions MULTIPLE> <phpMyAdmin versions MULTIPLE> <MySQL Workbench 8.0.23>
Read The Manuals Apache -- MySQL -- PHP -- phpMyAdmin
Get your Apache/MySQL/mariaDB/PHP ADDONs here from the WAMPServer alternate Repo
-X-X-X- Backup your databases regularly Here is How dont regret it later! Yes even when developing -X-X-X-

Options: Reply•Quote
Re: CSS not being rendered
Posted by: srinath (---.186.127.50.dvois.com)
Date: December 01, 2020 08:45PM

Have you tried to remove the cache memory of the site.

You can do that by pressing 'Ctrl+F5'

This should work, please try, worked for me.

For details to know why this works contact me by replying or something.

Options: Reply•Quote


Go to: Forum List•Message List•Search•Log In
Sorry, only registered users may post in this forum.
Click here to login