CCS C Software and Maintenance Offers
FAQFAQ   FAQForum Help   FAQOfficial CCS Support   SearchSearch  RegisterRegister 

ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

CCS does not monitor this forum on a regular basis.

Please do not post bug reports on this forum. Send them to support@ccsinfo.com

Why neither style codes nor CSS file doesn't work? [Solved]

 
Post new topic   Reply to topic    CCS Forum Index -> General CCS C Discussion
View previous topic :: View next topic  
Author Message
salihonur



Joined: 21 Mar 2020
Posts: 22

View user's profile Send private message

Why neither style codes nor CSS file doesn't work? [Solved]
PostPosted: Fri Jun 12, 2020 5:55 pm     Reply with quote

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: 19195

View user's profile Send private message

PostPosted: Sat Jun 13, 2020 1:36 am     Reply with quote

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

View user's profile Send private message

PostPosted: Sat Jun 13, 2020 1:45 am     Reply with quote

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: 19195

View user's profile Send private message

PostPosted: Sat Jun 13, 2020 2:33 am     Reply with quote

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

View user's profile Send private message

PostPosted: Sat Jun 13, 2020 6:12 am     Reply with quote

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: 19195

View user's profile Send private message

PostPosted: Sat Jun 13, 2020 7:43 am     Reply with quote

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

View user's profile Send private message

PostPosted: Sat Jun 13, 2020 2:07 pm     Reply with quote

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: 19195

View user's profile Send private message

PostPosted: Sun Jun 14, 2020 1:14 am     Reply with quote

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

View user's profile Send private message

PostPosted: Sun Jun 14, 2020 6:54 am     Reply with quote

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 Smile
_________________
Compiler v5.091+ Windows 10
Display posts from previous:   
Post new topic   Reply to topic    CCS Forum Index -> General CCS C Discussion All times are GMT - 6 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group