Site displays wrong in CSS editor

[JL_photo]

Good day all,

I'm working on a client site and this is my first time using Weebly. I noticed that when I edited in the CSS editor for the About page it isn't displaying correctly. In fact the page is pretty messed up but in the Weebly editor it's fine. The full site isn't live yet as the client has to give final approval so I can't give it the full test.

Any thoughts on if I should be concerned about the difference or will it publish correctly?

Many thanks!

[Adam7]

It sounds like there might be some broken code somewhere. I would review the changes you made to the theme, and also look at any code you added to the page itself or to the header or footer code field for the page on the Pages tab.

[JL_photo]

Thanks for the reply Adam. It's definitely broken code but I can't find it. I've gone in and reset everything I can think of at this point. I'm wondering if this is a Weebly issue at this point as I don't know of anything I could have done to cause this to begin with.

[PaulMathews]

@JL_photo You can use an iterative approach to home in on where you might have broken code on a page. First, create a copy of the page and hide it from the site navigator. This way you can play around with the page without affecting the pages visitors see on your live site. Next, start iteratively deleting page content starting at the top of the page. Delete an item of content, re-publish, check the page on the front end. If the rendering issue persists, go back to the Site Editor and delete the next content item, Re-publish, check the front end. Rinse and repeat, until you find the content that, after deletion, allows the page to render properly. Now, you take a closer look at that last content item to figure out where the error is.

If you know how to use the browser code inspector and have a nominal understanding of html (in Google Chrome, right-click and select "Inspect" to see the page html), you could potentially do this iterative check process entirely on the front end (with liberal use of the "display:none;" css attribute to iteratively turn off html elements).

[JL_photo]

Hi Paul,

Thanks for the great breakdown. I actually did everything you mention here except for the display:none idea but it was to no avail. The solution was to create a new page and copy over each section one at a time and test them. 

The really weird part is after everything was copied over the new page works perfectly and I didn't change a thing. So I have no idea what caused this but I'm all good now. Many thanks for the help.

And I have to say the Weebly chat support is worthless based on this experience and they need to seriously invest in their customer support there.

[PaulMathews]

@JL_photo Your iterative page rebuild was a good solution as well. If the rebuilt page uses the same Page Header type (e.g., header, no header) as the original, this suggests that there's something specific to the original page outside of the content you copied over that affected page rendering. Since you copied the original page, that would have carried over any page-specific header or footer code that might potentially have been the problem source. It is possible that you missed a particular content element that had special code and thus didn't present any actual content on the page. With the right css, these type of elements can be nearly hidden on the Site Editor page. In any event, you managed to arrive at a solution and we may simply have to chalk this one up to a one-off, weirdo event.