Random empty paragraphs being inserted

[Keir Watson]

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

[Keir Watson]

I have just noticed the darned empty paragraph is present in the Circumference Demo in another place: the Media boxes page

Weirdly its there in media box 2 (just after the img tag), but not in media box 3. Why?

What is it for? What is inserting it? I think I was wrong about ‘user agent stylesheet’ as that is present even in normal (non empty) text paragraphs.

[Binaya D]

Hi Keir,

We are really sorry but we are unable to view your screenshots, so please check once.

And regarding the media boxes which is kept in the demo is in different styles, so if you go to the theme package you can find the html snippets folder where you can get the code of media boxes in different or you can check it in the tutorial.

“User agent stylesheet” is from the browser itself, if you want to overwrite these stylesheet then you need to take a proper css selector and write the custom css accordingly. For Reference:- http://www.w3schools.com/cssref/css_selectors.asp

Please let us know if we are understanding you fully or if perhaps this is not what you meant.
We look forward to your response

Thanks

[Author]

Posts