HTML display problem when connecting to Web Server.

Post by **Sasi** » Thu Oct 26, 2023 9:36 am

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

Post by **Steve-Matrix** » Thu Oct 26, 2023 9:49 am

Can you save the page from your browser and attach it in a post so we can have a look.

Post by **Sasi** » Thu Oct 26, 2023 10:53 am

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

Post by **Steve-Matrix** » Thu Oct 26, 2023 11:13 am

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.

Post by **Sasi** » Thu Oct 26, 2023 11:46 am

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>

Post by **Steve-Matrix** » Thu Oct 26, 2023 12:00 pm

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.

Post by **Sasi** » Thu Oct 26, 2023 12:32 pm

I tried your suggestion and now it's perfect.
Thank you very much for your help

Sasi

Post by **Steve-Matrix** » Thu Oct 26, 2023 12:39 pm

Excellent. Thanks for letting us know.

HTML display problem when connecting to Web Server.

HTML display problem when connecting to Web Server.

Re: HTML display problem when connecting to Web Server.

Re: HTML display problem when connecting to Web Server.

Re: HTML display problem when connecting to Web Server.

Re: HTML display problem when connecting to Web Server.

Re: HTML display problem when connecting to Web Server.

Re: HTML display problem when connecting to Web Server.

Re: HTML display problem when connecting to Web Server.