| View previous topic :: View next topic |
| Author |
Message |
salihonur
Joined: 21 Mar 2020
Posts: 22
|
| Why neither style codes nor CSS file doesn't work? [Solved] |
 Posted: Fri Jun 12, 2020 5:55 pm |
 |
|
Hi,
Stylesheet codes and CSS files don't work even if placed in empty htm file. Also tried with Opera, Google Chrome and MS Edge browsers. How can the problem be resolved?
Designed page:
https://imgur.com/dFWb4Jx
Page in webserrver of PIC24
https://imgur.com/LKHe7eI
Compiler version: 5.091
MCU: PIC24FJ256GB106 |
|
 |
Ttelmah
Joined: 11 Mar 2010
Posts: 19589
|
|
| Posted: Sat Jun 13, 2020 1:36 am |
|
|
I'd guess you are not actually sending the stylesheet. (css file).
When you use a stylesheet, there will be a reference in the main page to this,
and it too has to be available to complete drawing the page. When you draw
the page locally this is available, but to draw it on a remote browser, this
also has to be available to the browser.... |
|
|
salihonur
Joined: 21 Mar 2020
Posts: 22
|
|
| Posted: Sat Jun 13, 2020 1:45 am |
|
|
Hi Ttelmah,
I have already tried embedded style codes too. Still it doesn't work. The codes from w3schools.
https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_styles
| Code: |
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css" media="screen">
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</div>
</body>
</html>
|
|
|
|
Ttelmah
Joined: 11 Mar 2010
Posts: 19589
|
|
| Posted: Sat Jun 13, 2020 2:33 am |
|
|
OK.
I'd have expected the embedded style to work. What extension are you
using on the page on your server?.
Try changing the file extension to .asp, instead of .htm or .html
This affects how the browser actually interprets the page. Local .html
pages will often work, while they have to be .asp to work on the server.... |
|
|
salihonur
Joined: 21 Mar 2020
Posts: 22
|
|
| Posted: Sat Jun 13, 2020 6:12 am |
|
|
asp and php files are processed on server side, then html output is sent to the browser. The browser processes html, javascript and css codes.
I'm trying to run a designed html file on PIC based embedded webserver. So there is no extensions on it.
I will provide 2 pages for the client. One is "login page" the other one is "settings page" to set network settings.
Actually this project isn't new. It is a tranformation project from old TCP stack to new stack with new upgraded MCU.
I have been using TCP Stack v3.18 since 2013 with PIC18F46K22 and 18F46K80 with webserver and TCP/IP. I embedded html files into C files on v3.18 stack. But now my client requested something which requires HTTP client feature. There is problem on HTTP client on v3.18 stack. The new stack (5.42) requires much more memory. So I have upgraded MCU to PIC24 too. (PIC24 has much more feature against to 18F87K22 with same price) |
|
|
Ttelmah
Joined: 11 Mar 2010
Posts: 19589
|
|
| Posted: Sat Jun 13, 2020 7:43 am |
|
|
The point is that drawing a coloured rectangle does require the
browser to do this. It is not pure basic html. If you open a page on a local
machine, the browser, looks at the file header, and 'knows' if has to interpret
the code inside. On a file over the net, it is the filename extension that
determines the interpretation to be done. It is behaving as if the browser
is treating this as pure html only and not interpreting the scripting....
Add the extension.
Two things tell the browser what to do when a page is loaded. The extension,
and the Mime header. So either give an extension, or adjust the Mime
settings for the server. The former is easier.... |
|
|
salihonur
Joined: 21 Mar 2020
Posts: 22
|
|
| Posted: Sat Jun 13, 2020 2:07 pm |
|
|
I have found the problem but I don't know the solution.
The problem is caused by % character in files under /pages folder. makempfsimg.bat replaces % with something. I see that it is IP address.
I tried a trick to create CSS codes by javascript. But no success.
Also escape character doesn't work (such as .col-1 {width: 8.33\%;} )
I can design my page without % (percent). But this is a bug.
1st try
Original file:
| Code: | .col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;} |
On PIC's webserver:
| Code: | .col-1 {width: 8.33192.168.1.100
.col-2 {width: 16.66192.168.1.100
.col-3 {width: 25192.168.1.100
.col-4 {width: 33.33192.168.1.100
.col-5 {width: 41.66192.168.1.100
.col-6 {width: 50192.168.1.100
.col-7 {width: 58.33192.168.1.100
.col-8 {width: 66.66192.168.1.100
.col-9 {width: 75192.168.1.100
.col-10 {width: 83.33192.168.1.100
.col-11 {width: 91.66192.168.1.100
.col-12 {width: 100192.168.1.100 |
2nd try
Original:
| Code: | function onLoad()
{
var css = ".col-1 {width: 8.33"+"%; }";
css = css + ".col-2 {width: 16.66"+"%; }";
css = css + ".col-3 {width: 25"+"%; }";
css = css + ".col-4 {width: 33.33"+"%; }";
css = css + ".col-5 {width: 41.66"+"%; }";
css = css + ".col-6 {width: 50"+"%; }";
css = css + ".col-7 {width: 58.33"+"%; }";
css = css + ".col-8 {width: 66.66"+"%; }";
css = css + ".col-9 {width: 75"+"%; }";
css = css + ".col-10 {width: 83.33"+"%; }";
css = css + ".col-11 {width: 91.66"+"%; }";
css = css + ".col-12 {width: 100"+"%; }";";
document.getElementsByTagName("HEAD")[0].innerHTML = css;
setStartTime();
} |
| Code: | | <body onload="onLoad();"> |
on PIC's webserver:
| Code: | var css = ".col-1 {width: 8.33"+"192.168.1.100}";
css = css + ".col-2 {width: 16.66"+"192.168.1.100}";
css = css + ".col-3 {width: 25"+"192.168.1.100}";
css = css + ".col-4 {width: 33.33"+"192.168.1.100}";
css = css + ".col-5 {width: 41.66"+"192.168.1.100}";
css = css + ".col-6 {width: 50"+"192.168.1.100}";
css = css + ".col-7 {width: 58.33"+"192.168.1.100}";
css = css + ".col-8 {width: 66.66"+"192.168.1.100}";
css = css + ".col-9 {width: 75"+"192.168.1.100}";
css = css + ".col-10 {width: 83.33"+"192.168.1.100}";
css = css + ".col-11 {width: 91.66"+"192.168.1.100}";
css = css + ".col-12 {width: 100"+"192.168.1.100}";";
document.getElementsByTagName("HEAD")[0].innerHTML = css; |
_________________
Compiler v5.091+ Windows 10 |
|
|
Ttelmah
Joined: 11 Mar 2010
Posts: 19589
|
|
| Posted: Sun Jun 14, 2020 1:14 am |
|
|
You do realise that the standard escape for % in C, is %%.
This is a 'read the manual' one:
| Quote: |
A %% will output a single %.
|
|
|
|
salihonur
Joined: 21 Mar 2020
Posts: 22
|
|
| Posted: Sun Jun 14, 2020 6:54 am |
|
|
| Ttelmah wrote: | You do realise that the standard escape for % in C, is %%.
This is a 'read the manual' one:
| Quote: |
A %% will output a single %.
|
|
This is it. It works properly now. Thanks very much Ttelmah 
_________________
Compiler v5.091+ Windows 10 |
|
|
|
FAQ 
Search
Register
Profile 
Log in to check your private messages 
Log in
