Hi,
my Website is https://www.sufcindia.com/ . when we go to page ECOSYSTEM (https://www.sufcindia.com/eco-system.html). First time Page display with bad layout .then if we refresh the page its working fine.
please find tha attached file for your refrence
Try fixing some of the errors:
https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.sufcindia.com%2Feco-system.html&showsource=yes
after resolve issue can be design will be proper…
Fix the errors then see what issues (if any) remain.
It’s most likely that your images haven’t loaded yet so the JS doesn’t know how wide those icons are.
As they are all the same size I suggest you hard code the width into the icons.
e.g. Add this:
.icon{
width:199px;
height:235px;
}
Actually my issue is design is not in center alignment and body part is at overlap at footer section.
already done but its not working.
You don’t appear to have fixed any of the errors in your code.
Actually My issue is designing …if i will change it rest page layout will bad.
The errors tell you there is a missing > which needs to be fixed if you want your website to work.
https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.sufcindia.com%2Feco-system.html&showsource=yes Resolved… But Still same issue
Have you set the image dimensions, as PaulOB suggested?
i was done… code issue was still same…hence i removed.
It’s always a good idea to give image dimensions, so I would leave it there, even if it doesn’t seem to have fixed the issue.
Off Topic
It’s also a good idea to ensure your page works without JavaScript. 
No put it back and I will check if you have done it correctly. I copied your page locally and with my additions the issue was fixed.
Please add the code back in and tell me when you have done it and I will see if there is still an issue.
Code Updated
Thanks.
I’ve just had to nip out for an hour or so and will check as soon as I get back to my computer.
Please leave the code in place until then as it will do no harm anyway and will also allow me to build on it should it not work on the live site.
Yes that’s because the JS is grabbing the height and width of those icons and absolutely placing them into position. On first load the images are not loaded/cached so all the JS calculations are out by the width and height of the images.
Ok…thanks
The code has not been added to the CSS.
The only rule applying to .icon is position:absolute as shown in the developer tools. What did you do with the code I suggested adding?
Also you should always include the image width and height attributes in the html.
e.g.
<img src="images/eco-system/eco-system-4.png" alt="">
There should be width height and height attributes in there so the browser can allocate the correct space before the image loads.
e.g.
<img src="images/eco-system/eco-system-4.png" alt="Football Club" width="199" height="230">
The alt attribute also needs to be filled in with the correct image description otherwise assistive devices will ignore it.
On closer inspection of the html you seem to have added the css directly inline rather than in the CSS But you are getting an html error as you have not put a space between attributes.
. Error : No space between attributes.At line 149, column 42 `0" class="icon"style="width:19
e.g. class="icon"style="width:199px;height:235px;">
It should be:
<div id="icon-0" class="icon" style="width:199px;height:235px;"><img src="images/eco-system/eco-system-0.png" alt=""></div>↩
You only needed to add the css rather than manually adding all those rules. After all that’s what CSS is for.
Looking at your page even with the error it seems to be working now and not mis-aligning.