Page 1 of 1
HTML display problem when connecting to Web Server.
Posted: Thu Oct 26, 2023 9:36 am
by Sasi
Hello,
I would like to ask for a little help.
I put together a web server using ESP32 and an SD card. I used Flowcode 10.
The problem is that the content to be displayed is incorrect in the browser when I connect to the web server.
The components of the page slide apart and are displayed in the wrong size.
I used HTML 5.0 with CSS to create the page.
I noticed that Flowcode always inserts the following Document Type Declaration line at the beginning of the HTML file sent to the browser:
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\ ">
Maybe that's why the page is displayed incorrectly?
Is it possible to turn off this automation somehow?
Or am I doing something wrong?
Regards,
Sasi
Re: HTML display problem when connecting to Web Server.
Posted: Thu Oct 26, 2023 9:49 am
by Steve-Matrix
Can you save the page from your browser and attach it in a post so we can have a look.
Re: HTML display problem when connecting to Web Server.
Posted: Thu Oct 26, 2023 10:53 am
by Sasi
Hi Steve,
Content of index.htm :
<!DOCTYPE html>
<html>
<body>
<div style="position:relative;">
<div style="opacity:0.5;position:absolute;left:50px;top:-30px;width:300px;height:150px;background-color:#40B3DF"></div>
<div style="opacity:0.3;position:absolute;left:120px;top:20px;width:100px;height:170px;background-color:#73AD21"></div>
<div style="margin-top:30px;width:360px;height:130px;padding:20px;border-radius:10px;border:10px solid #EE872A;font-size:120%;">
<h1>CSS = Styles and Colors</h1>
<div style="letter-spacing:12px;font-size:15px;position:relative;left:25px;top:25px;">Manipulate Text</div>
<div style="color:#40B3DF;letter-spacing:12px;font-size:15px;position:relative;left:25px;top:30px;">Colors,
<span style="background-color:#B4009E;color:#ffffff;"> Boxes</span></div>
</div>
</div>
</body>
</html>
Thanks
Sasi
Re: HTML display problem when connecting to Web Server.
Posted: Thu Oct 26, 2023 11:13 am
by Steve-Matrix
That page looks like your second image to me with and without that '<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\ ">' line, so I don't think it's that.
Your first image ("page from the web server") is showing something different. Can you please post the html for that page - i.e. save the webpage from the browser when it is showing that page and then post that.
Also, what browser and device are you using when viewing the webpage? I have tried simulating your html code on different devices using Chrome and it all looks ok.
Re: HTML display problem when connecting to Web Server.
Posted: Thu Oct 26, 2023 11:46 am
by Sasi
I tried it on Chrome and Firefox, the result is the same.
I made a complete web page backup from the web server and the original file from Firefox.
Original:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"></head><body>
<div style="position:relative;">
<div style="opacity:0.5;position:absolute;left:50px;top:-30px;width:300px;height:150px;background-color:#40B3DF"></div>
<div style="opacity:0.3;position:absolute;left:120px;top:20px;width:100px;height:170px;background-color:#73AD21"></div>
<div style="margin-top:30px;width:360px;height:130px;padding:20px;border-radius:10px;border:10px solid #EE872A;font-size:120%;">
<h1>CSS = Styles and Colors</h1>
<div style="letter-spacing:12px;font-size:15px;position:relative;left:25px;top:25px;">Manipulate Text</div>
<div style="color:#40B3DF;letter-spacing:12px;font-size:15px;position:relative;left:25px;top:30px;">Colors,
<span style="background-color:#B4009E;color:#ffffff;"> Boxes</span></div>
</div>
</div>
</body></html>
Web Sever:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"></head><body>
<div style="position:relative;">
<div style="opacity:0.5;position:absolute;left:50px;top:-30px;width:300px;height:150px;background-color:#40B3DF"></div>
<div style="opacity:0.3;position:absolute;left:120px;top:20px;width:100px;height:170px;background-color:#73AD21"></div>
<div style="margin-top:30px;width:360px;height:130px;padding:20px;border-radius:10px;border:10px solid #EE872A;font-size:120">
<h1>CSS = Styles and Colors</h1>
<div style="letter-spacing:12px;font-size:15px;position:relative;left:25px;top:25px;">Manipulate Text</div>
<div style="color:#40B3DF;letter-spacing:12px;font-size:15px;position:relative;left:25px;top:30px;">Colors,
<span style="background-color:#B4009E;color:#ffffff;">Â Boxes</span></div>
</div>
</div>
</body></html>
Re: HTML display problem when connecting to Web Server.
Posted: Thu Oct 26, 2023 12:00 pm
by Steve-Matrix
Thanks. If you compare the html of each, the problem you are seeing is the font-size style. One has "120%" and the other has "120".
This could be because Flowcode uses the "%" symbol when substituting variable values. You could try using "%%" when you want a % symbol.
Re: HTML display problem when connecting to Web Server.
Posted: Thu Oct 26, 2023 12:32 pm
by Sasi
I tried your suggestion and now it's perfect.
Thank you very much for your help
Sasi
Re: HTML display problem when connecting to Web Server.
Posted: Thu Oct 26, 2023 12:39 pm
by Steve-Matrix
Excellent. Thanks for letting us know.