Problem in adding CSS for a webserver using Ethercard (enc28j60)

Hi. I’m using ethercard library and enc28j60 module with my arduino uno. I have a simple project which can control on/off status of 2 led through a web page. All parts are working fine except when i want to add some inline css code to my html part. When i add some specific css feature, after downloading to arduino the web page won’t open and when i remove that css part, it works fine again. for example , this code works fine(it’s only some part of the code which contains html and css code) :

 bfill.emit_p(PSTR(
 "   HTTP/1.0 503 Service Unavailable\r\n"
"Content-Type: text/html\r\n"
"Retry-After: 600\r\n"
"\r\n"
"<html>"
"  <head><title>"
"    Arduino Controller - Pooyan Samimi"
"  </title></head>"
"  <body> "
"        <h1> <center> Remote Control Lab of Sutech</center></h1>"
"    <p>LED1</p>   "
"    <a href='http://$D.$D.$D.$D/?FAN=ON'>ON</a>
"
"    <a href='http://$D.$D.$D.$D/?FAN=OFF'>OFF</a>
"
"    
"
"    <p>LED2</p>"
"    <a  href='http://$D.$D.$D.$D/?BULB=ON'><button style=" 
"\"background: #55ff55;border: 3px solid #0099cc;" 
"margin: 5px;font-size: 36px;\"" 
">ON</button></a>
"
"    <a href='http://$D.$D.$D.$D/?BULB=OFF'>OFF</a>
"
"  </body>"
"</html>"),ether.myip[0],ether.myip[1],ether.myip[2],ether.myip[3],
ether.myip[0],ether.myip[1],ether.myip[2],ether.myip[3],
ether.myip[0],ether.myip[1],ether.myip[2],ether.myip[3],
ether.myip[0],ether.myip[1],ether.myip[2],ether.myip[3]);
  return bfill.position();

but if i add (for example) position: relative ; to the style part , the web page won’t open again , although the html part works fine when i test it using text editor.

for example , this code works fine

that's not going to help us help you... show us a code that does not work fine...

ok , the following code has problem (the web page won’t load) :

#include <EtherCard.h>

#define STATIC 0  // set to 1 to disable DHCP (adjust myip/gwip values below)

#if STATIC
// ethernet interface ip address
static byte myip[] = { 192,168,133,6 };
// gateway ip address
static byte gwip[] = { 192,168,132,1 };
#endif

// ethernet mac address - must be unique on your network
static byte mymac[] = { 0x74,0x69,0x69,0x2D,0x30,0x30 };
byte Ethernet::buffer[500]; // tcp/ip send and receive buffer
BufferFiller bfill;

// Using a Variable for the Pin, but it is not necessary 
const int ledPin2 = 2;
const int ledPin4 = 4;

// Some stuff for responding to the request
char* on = "ON";
char* off = "OFF";
char* statusLabel;
char* buttonLabel;
const char messageToBroadcast[] = {"Arduino Controller Board "};
// Small web page to return so the request is completed


void setup(){
// Set Pin2 to be an Output
  pinMode(ledPin2, OUTPUT);
// Set Pin4 to be an Output
  pinMode(ledPin4, OUTPUT);

  if (ether.begin(sizeof Ethernet::buffer, mymac) == 0) 
    Serial.println( "Failed to access Ethernet controller");
#if STATIC
  ether.staticSetup(myip, gwip);
#else
  if (!ether.dhcpSetup())
    Serial.println("DHCP failed");
#endif

  Serial.begin(57600);
  ether.printIp("IP:  ", ether.myip);
  ether.printIp("GW:  ", ether.gwip);  
  ether.printIp("DNS: ", ether.dnsip);  

  Serial.println(ether.myip[0]);
  Serial.println(ether.myip[3]);
}


static word homePage() {
  bfill = ether.tcpOffset();
  bfill.emit_p(PSTR(
 "   HTTP/1.0 503 Service Unavailable\r\n"
"Content-Type: text/html\r\n"
"Retry-After: 600\r\n"
"\r\n"
"<html>"
"  <head><title>"
"    Arduino Controller - Pooyan Samimi"
"  </title></head>"
"  <body> "
"        <h1> <center> Remote Control Lab of Sutech</center></h1>"
"    <p>LED1</p>   "
"    <a href='http://$D.$D.$D.$D/?FAN=ON'>ON</a>
"
"    <a href='http://$D.$D.$D.$D/?FAN=OFF'>OFF</a>
"
"    
"
"    <p>LED2</p>"
"    <a  href='http://$D.$D.$D.$D/?BULB=ON'><button style=" 
"\"background: #55ff55;border: 3px solid #0099cc;" 
"margin: 5px;font-size: 36px;position: relative ;\"" 
">ON</button></a>
"
"    <a href='http://$D.$D.$D.$D/?BULB=OFF'>OFF</a>
"
"  </body>"
"</html>"),ether.myip[0],ether.myip[1],ether.myip[2],ether.myip[3],
ether.myip[0],ether.myip[1],ether.myip[2],ether.myip[3],
ether.myip[0],ether.myip[1],ether.myip[2],ether.myip[3],
ether.myip[0],ether.myip[1],ether.myip[2],ether.myip[3]);
  return bfill.position();
}

void loop(){  
  word len = ether.packetReceive();
  word pos = ether.packetLoop(len);

// IF LED2=ON turn it ON
  if(strstr((char *)Ethernet::buffer + pos, "GET /?FAN=ON") != 0) {
      Serial.println("Received ON command");
      digitalWrite(ledPin2, HIGH);
    }

// IF LED2=OFF turn it OFF  
    if(strstr((char *)Ethernet::buffer + pos, "GET /?FAN=OFF") != 0) {
      Serial.println("Received OFF command");
      digitalWrite(ledPin2, LOW);
    }

// IF LED4=ON turn it ON
  if(strstr((char *)Ethernet::buffer + pos, "GET /?BULB=ON") != 0) {
      Serial.println("Received ON command");
      digitalWrite(ledPin4, HIGH);
    }

// IF LED4=OFF turn it OFF  
    if(strstr((char *)Ethernet::buffer + pos, "GET /?BULB=OFF") != 0) {
      Serial.println("Received OFF command");
      digitalWrite(ledPin4, LOW);
    }

//Return a page so the request is completed.
    if (pos)  // check if valid tcp data is received
    ether.httpServerReply(homePage()); // send web page data
  //   static byte remoteip1[]= {255,255,255,255};     //USE 255.255.255.255 FOR BROADCAST MESSAGE. Otherwise , insert your custom ip.
 static byte remoteip1[]= {192,168,132,242};
  ether.sendUdp(messageToBroadcast, sizeof(messageToBroadcast), 5151,remoteip1, 5151 );
}

but if i just remove this part from html code :
poistion: relative;

it works really fine and web page will come up well.

Have you checked the length of the resulting string? Does it fit in the buffer?

(The EtherCard.h from JeeLabs is totally outdated)

You're right , my problem was the buffer size.
So, with larger buffer size i got the result, but there are limits for increasing buffer size. What's the best solution for creating more complex webserver (with more html and css linse of code) without exceeding the buffer size?

You noticed that the ethercard.h is outdated, is there a better library for enc28j60 module?

pooyan_s95:
You're right , my problem was the buffer size.
So, with larger buffer size i got the result, but there are limits for increasing buffer size. What's the best solution for creating more complex webserver (with more html and css lines of code) without exceeding the buffer size?

Well basically that means sending stuff by chunks instead of in one go.

pooyan_s95:
You noticed that the ethercard.h is outdated, is there a better library for enc28j60 module?

well you could use this arduino_uip library (which is compatible with the Arduino Ethernet library) but personally I would get rid of the ENC28J60 altogether and use a module based on the W5100 instead given your need.

The reason is that the ENC28J60 is an ethernet chip, and you deal with at the level of Ethernet packets - pretty low level. The Wiznet W5100 is a TCP/IP Networking chip, and you deal with it at a TCP/UCP/IP (Socket level) API (built-in UDP and TCP or ARP in the chip). All this complex code no longer needs to be written, maintained and running in your arduino - it's done in the chip for you.

J-M-L:
Well basically that means sending stuff by chunks instead of in one go.

Would you please explain this part in more details?

J-M-L:
well you could use this arduino_uip library (which is compatible with the Arduino Ethernet library) but personally I would get rid of the ENC28J60 altogether and use a module based on the W5100 instead given your need.

I wish i could get rid of the ENC28J60, but i'm forced to use this module for my current project.

pooyan_s95:
Would you please explain this part in more details?

I havent used that library for years for the reason exposed above but what prevents you to do multiple bfill.emit_p() instead of a giant one?

Well actually i tried it before, but it didn’t work.(Same problem, web page wouldn’t load) I don’t know if i did it properly or not.
Is the following part right or i should split bfill.emit_p() part in multiple functions ?

static word homePage() {
  bfill = ether.tcpOffset();
  bfill.emit_p(PSTR(
 "   HTTP/1.0 503 Service Unavailable\r\n"
"Content-Type: text/html\r\n"
"Retry-After: 600\r\n"
"\r\n"));
 bfill.emit_p(PSTR(
"<html>"
"  <head><title>"
"    Arduino Controller - Pooyan Samimi"
"  </title></head>"
"  <body> "
"        <h1> <center> Remote Control Lab of Sutech</center></h1>"
"    <p>LED1</p>   "
"    <a href='http://$D.$D.$D.$D/?FAN=ON'>ON</a>
"
"    <a href='http://$D.$D.$D.$D/?FAN=OFF'>OFF</a>
"
"    
"
"    <p>LED2</p>"
"    <a  href='http://$D.$D.$D.$D/?BULB=ON'><button style="
"\"background: #55ff55;border: 3px solid #0099cc;"
"margin: 5px;font-size: 36px;position: relative ;\""
">ON</button></a>
"
"    <a href='http://$D.$D.$D.$D/?BULB=OFF'>OFF</a>
"
"  </body>"
"</html>"),ether.myip[0],ether.myip[1],ether.myip[2],ether.myip[3],
ether.myip[0],ether.myip[1],ether.myip[2],ether.myip[3],
ether.myip[0],ether.myip[1],ether.myip[2],ether.myip[3],
ether.myip[0],ether.myip[1],ether.myip[2],ether.myip[3]);
  return bfill.position();
}

In other examples of this library i saw that this approach is possible, but it didn’t work for me.