- PHP, Apache, MySQL, Windows : WampServer

Go to: Forum List•Message List•New Topic•Search•Log In•Print View

Very strange - part of CSS missing / Virtual host / IE11

Posted by: backpenther (---.dip0.t-ipconnect.de)

Date: February 05, 2016 03:13PM

Hello,

i have a very strange behaviour. I have Wampserver 2.5 on Windows 7. If I put the same html file and CSS file at the /wamp/www folder or at a virtual host, Internet Explorer 11 reads both files, but different.

The first difference is <!DOCTYPE html> to  , the second is that at www folder it shows the wamp icon and at the document folder none. But more imporant is that in the CSS not everything is executed. For example, an input:checked is read at the www folder but not in the folder for the virtual host. Same for a few other settings. Anyone an idea why the CSS gets only partly read? For Firefox, the file is the same like it should. Very strange. The virtual host is set for /localhost and /xyz

The question is: What can be propably different between the www folder and some other folder, that only part of a CSS isn't executed and only for one kind of browser?

Edited 1 time(s). Last edit at 02/05/2016 03:16PM by backpenther.

Options: Reply•Quote

Re: Very strange - part of CSS missing / Virtual host / IE11

Posted by: RiggsFolly (---.dynamic.dsl.as9105.com)

Date: February 05, 2016 04:11PM

Hi

First and formost never Never NEVER put anything of yours into the \wamp\www folder, thats where the WAMPServer homepage lives and also a few little tools

Always either create a subfolder under \wamp\www for your projects i.e.

- \wamp\www\project1
- \wamp\www\project2

and then only for simple playground projects

Or create a totally seperate folder for your projects with a matching Apache Virtual Host for each seperate project.

eg
- C:\websites\project1\www
- C:\websites\project2\www

<!DOCTYPE html> to 
No idea on this one, where are you seeing that this has been done i.e. where are you looking to see this apparent change?
It might just be that when you "View Page Source" in whichever browser, the page source viewer does it so that you can actually see that statement, so its likely just cosmetic to the source viewer. But I admit this is a guess at this time.

FAVICONS
Look up what a favicon is and then look in the \wamp\www folder to see why you get the WAMPServer favicon when you run pages from inside the \wamp\www folder

Why strange things are happening to your CSS

There could be a number of reasons for this. Without seeing your code I can only guess!

However, if you create a Virtual Host for your project this will likely stop happening, unless your <link...> statements are badly coded.

See here for instructions on The need for Virtual Hosts

If you have another question, you had better show us your httpd-vhost.conf file and some HTML code for the page that exibits strange CSS usage

---------------------------------------------------------------------------------------------
(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 4 time(s). Last edit at 02/05/2016 04:15PM by RiggsFolly.

Options: Reply•Quote

Re: Very strange - part of CSS missing / Virtual host / IE11

Posted by: backpenther (---.dip0.t-ipconnect.de)

Date: February 05, 2016 05:10PM

I put my files into a subfolder of /www. And if I open the html locally, the display is correct. And I made this most basic example, same if styles are in the header:

HTML File: checkbox.html
=======

<!DOCTYPE html>
<head>

<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0" name="viewport">

<title>CSS Toggle Switch Example</title>

<style type="text/css">
 .toggle {
	position: relative;
	display: none;
}

.toggle + label {
	display: block;
	position: relative;
	cursor: pointer;
	border: 1px solid black;
	padding: 2px;
	width: 33px;
	height: 33px;
	color: #fff;
	background-color: red;
	content: " "   
}

input.toggle:checked + label {	
	background-color: green;
}
	  
</style>
  
</head>

<body>
	
<div style="margin:20px;">
<input id="toggle-1" class="toggle" type="checkbox">
<label for="toggle-1" ></label>
</div>

</body>

Works (square changing color on click) fine if called locally, also works if put in a (sub)folder of /wamp/www, but doesn't work for IE11 with virtual host access via Wamp. Only one example, seems to be some other CSS parts which also doesn't work. Works in all cases with Firefox 44.

What is strange is that the CSS is actually read (the background is red), but the :checked isn't. So, the virtual host is set up correctly as far as i know, but there is definitively something different in the default values. Because the top and left margins change if you access the file differently. Somebody any clue about that?

EDIT:
====
perhaps got a clue. In the console view, the IE via virtual host says something about "Document mode 7" and "compability mode". Why this is only via virtual host and what it affects - unknown. But a breadcrumb to follow.

Edited 5 time(s). Last edit at 02/05/2016 06:17PM by backpenther.

Options: Reply•Quote

Re: Very strange - part of CSS missing / Virtual host / IE11

Posted by: backpenther (---.dip0.t-ipconnect.de)

Date: February 05, 2016 06:29PM

OOOKAY, that did it. For Virtual Hosts, IE11 uses "Compatibility View" for Virtual hosts. So, the :checked option didn't work. To circumvent that, use the tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge">