Archived topic
Footer element and page structure unstable
7 replies · Started by Nicky on January 17, 2022
Since optimising litsalon.co.uk last week the footer element remains unchanged, but on many of the website pages the type in the footer (which appears on every page) has been italicised. Until now I had assumed that an element could not be overwritten by code elsewhere on the page but it seems I'm wrong.
Since the same optimisation/cache clearing operation last week I also have some pages (https://www.litsalon.co.uk/classical-philosophy-studies/, https://www.litsalon.co.uk/literature-studies/, https://www.litsalon.co.uk/poetry-studies/) where the left hand (primary?) content section has been narrowed although the settings remain unchanged. At the same time, in these and many other pages, much of the content of the sidebar has been italicised and I cannot overcome this with CSS in EventOn (the source of the content inserted via the shortcode). I think I may have a problem with page structure and location of 'em' code, but I'd be grateful for your advice on how to fix this as simply as possible and avoiding further occurrences. As requested, I have switched off optmisation and cacheing for now.
Thank you!
Hi there,
this kind of thing happens when there is some broken HTML in the code eg. a missing closing </div> or </p> or as in this case a missing emphasis </em> which is generally used for displaying italic text. Or it can be some-other broken or invalid HTML between those element tags.
I took a screen shot of the DOM Element tree from this URL: https://www.litsalon.co.uk/poetry-studies/
https://www.screencast.com/t/tPk2pvpIR0
You can see the last sep_month_events div highlighted in the screen shot. below that in the DOM Tree is a bunch of <em> tags that shouldn't be there. It looks to me as one of those Event posts has some bad or invalid HTML within its content.
In the Event post content are there are parts where you added HTML or used editor formating for adding emphasis/italics or other html styles ?
Thank you. I'll see what I can do.
Hope you find it !
Thanks. I'm looking now. Am I right in assuming from your screenshot and suggestion that the error is arising in EventOn code and then influencing GP, it looks as though the superfluous code is in both? I'm trying to work out whether I've added additional code to any of the event listings, I didn't think I had because EventOn styles are determined from a central CSS style sheet.
Either way, I'll be going through it carefully!
The majority of HTML Elements ( not all ) require a closing tag. For example:
Valid: <p>Some text that contains <em>an emphasised string</em> within.</p>
Invalid: <p>Some text that contains <em>an emphasised string within.</p>
And must contain only valid HTML for example this is invalid:
Invalid: <p>Some text that contains <em>an emphasised string <div> with a bad div inside it </div></em> within.</p>
as EM tags only allow Phrasing Content elements inside them, which a DIV isn't.
When a browser reads the HTML and creates the DOM tree it tries to fix these kinds of issues by closing missing tags, and ejecting invalid HTML into a new line.
Problem is it can't always do it that correctly and creates a chain event of ejected and closing tags... which is whats occurring on your site by the looks of it.
If we inspect the sites Source code we can search for errors, or we can use a service like this to find problems:
If you scroll down to issue 68 - we find the first closing EM tag issue -> : Error: Unclosed element em.
Which relates to this HTML on your site:
https://www.screencast.com/t/6PMYoKDmm
It could be a case that the Event plugin doesn't like the media/text blocks thats being used there....
But it could also be some other broken HTML that causing the issue....
Might be worth checking with the Event plugin support as they may have a better insight to whats going on with their HTML
Thanks very much for the guidance, that's very helpful (as always). I'll let you know!
You're welcome
