I am suddenly finding problems with alignment of some divs – especially those with borders. On examining the output (using the inspector built into Chrome) I can see that empty paragraphs <p></p> are being inserted. As paragraphs have site wide styling (margins) these empty paragraphs cause alignment issues.
For example I recently created some ‘cards’ in CSS that worked fine, but now they are picking up the empty paragraphs so are displaying incorrectly. I have attached a screenshot of the page with the inspector open showing the offending empty paragraph on the middle card. The one on the left I have hidden the empty paragraph, so it has returned to normal. As these paragraphs are not in the HTML I cannot correct them, but as you can see from the inspector, they come from ‘user agent stylesheet’ – and this is greyed out, so I can’t even try changing it from the inspector.
I have inspected the circumference demo site, and only found one instance of this which you can see by inspecting the progress bars on the ‘left hand column’ demo page. In fact I’ll add a screenshot… As you can see the same empty paragraph, styled from the same ‘user agent stylesheet’.
Please advise on what I can do to prevent these being inserted into my pages, apparently arbitrarily, and seemingly increasingly.
My website is under construction, but can be viewed here: http://rosemarycottageclinic.co.uk/site/
Thanks
.
