1

I have created a new content type, Plants, for my web site. One of the fields, scientific name, requires special formatting. Usually it is all italics, but sometimes a mixture of italics and non-italics such as Abelia x grandiflora 'Kaleidoscope'.

To make this work I defined the field as long text. I have tried several combinations of formats and field templates using Display Suite. The only one that seems to preserve the proper italics is Format Default and Field Template Drupal default. This preservers the proper italics, but results in an empty blank line that looks pretty crummy. See image.enter image description here

Generated HTML according to Firebug:

<section class="field field-name-field-scientific-name field-type-text-long field-label-inline clearfix view-mode-full"><h2 class="field-label">Scientific name:&nbsp;</h2><div class="field-items"><div class="field-item even"><p><em>Abelia x grandiflora</em> 'Kaleidoscope'</p>

How can I eliminate the blank line or trim the white space at the end?

Improve this question
4
  • 1
    I'd like to see a browser's inspector view of this output. Is that an extra line return, or, rather, CSS margin or padding pushing down the next line?
    – Screenack
    Commented Sep 22, 2015 at 14:33
  • Thanks for asking! I meant to put that in my original question. I have updated it.
    – Sam Stamport
    Commented Sep 22, 2015 at 17:27
  • It's difficult to say without full context, but there's a number of things going on that are semantically seriously problematic. To simply address the immediate question, I'm still wondering if either your H2 or P elements have a margin-bottom or padding-bottom that is pushing the next element down? Seeing the HTML is helpful, but hovering your mouse over the various HTML elements, and watching how the Inspector shows you padding and margin information will help you figure this out.
    – Screenack
    Commented Sep 23, 2015 at 0:52
  • What do you mean by "semantically seriously problematic"? Anything that is semantically seriously problematic was generated by Drupal. I found different padding settings throughout. When I removed <p></p> the formatting was correct. The question is: How can I use Display Suite (or some other UI) to permanently remove <p></p>?
    – Sam Stamport
    Commented Sep 24, 2015 at 20:48

1 Answer 1

Reset to default
1

Sorry for the digression — but semantic markup does matter. This articles speaks well to what it is: https://boagworld.com/dev/semantic-code-what-why-how/

Your input filter (or, less possibly, your rich text editor) is adding the paragraph tag. Check out the input filter you're using for this field. If this filter has "Convert line breaks into HTML (i.e. <br> and <p>)" enabled, found here: admin/config/content/formats/<inputfiltername> — this could be adding paragraph tags. Keep in mind changing this will impact how all your fields that use this input filter are rendered. You can always create an additional input filter to suite your needs.

Improve this answer
1
  • 1
    Unchecking Convert line breaks ... did not fix the problem, but removing <p> from allowed HTML tags did work.
    – Sam Stamport
    Commented Sep 25, 2015 at 8:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.