By JayD on

I am trying to create an hierarchical list using <ol> and <ul> tags in an article node using standard Bartik template. The problem is that after I enter the code, <br> tags are instered in the html when they are displayed leaving unwanted breaks between the lines. Here is a copy of the html I entered and the resulting html when the article is previewed or displayed

HTMLE ENTERED:

<ol>
<li><big><a name="Name1" /><a href="doc1.pdf">sample text 1</a></big></li>
<li><big><a href="doc2.pdf"> sample text 2</a>
</big>
<ul>
<li><big><a href="doc3">Sample Text 3</a> </big></li>
</ul>
</li>

HTML DISPLAYED:

<ol>
<li><big><a name="Name1" id="Name1"></a><a href="doc1.pdf">sample text 1</a></big></li>
<li><big><a href="doc2.pdf"> sample text 2</a><br />
</big>
<ul>
<li><big><a href="doc3">Sample Text 3</a> </big></li>
</ul>
</li>

Any help eliminating the unwanted <br> would be appreciated

⋅ Categories: Drupal 7.x

Comments

peterjlord’s picture

peterjlord commented

More than likely it's the input filter.
Have a mess in http://example.com/admin/config/content/formats/default
Perhaps changing the order or disabling "Convert line breaks into HTML (i.e.
and

) " will help this.

Peter J Lord
http://peterjlord.co.uk

JayD’s picture

JayD commented

Thanks for your suggestions. While this did remove the <br> codes, there is still very large space between the list entries. Could this caused by css?

JayD’s picture

JayD commented

Still haven't solved this. Would appreciate any comments.

charlie-s’s picture

charlie-s commented

What kind of input filter are you using? Try creating a new filter that does NO markup, NO corrections, etc., and see if that works. Call it something like "Raw input".

JayD’s picture

JayD commented

Thanks for your reply. Plord's suggestion regarding filters did remove the extra tags, but the display still has way too much space between the line items. Could this be related to css?

JayD’s picture

JayD commented

I still have not solved this problem; however, I discovered that when viewing the node preview mode, the list is rendered correctly (without extra spaces between lines). Does this point to a CSS issue?

kingandy’s picture

kingandy
he/him
commented

I would guess so. The quick way to find out is to inspect the list element with an in-browser development tool - Chrome and IE9 come with this built in (Chrome: Right-click and Inspect Element; IE9: hit F12 to activate Developer Tools and use the cursor icon in the "HTML" tab), and Firefox has the "Firebug" extension (once it's installed, right-click and Inspect Element). Any of these should tell you how much padding and/or margin the UL/OL elements have been given by your CSS - Chrome and Firebug are a little better as they highlight the element's padding/margin in the browser, but it's possible to get at it through IE's Dev Tools too (on the Layout tab in the right pane).

++Andy

JayD’s picture

JayD commented

Viewing in Firebug, it appears that the ul and ol elements both have the same padding:

.region-content ul, .region-content ol {
margin-bottom:1em;
margin-left:0;
margin-right:0;
margin-top:1em;
padding-bottom:0.25em;
padding-left:2.5em;
padding-right:0;
padding-top:0;
}

But, when viewed, the ul elements have a much larger space between them.

charlie-s’s picture

charlie-s commented

Can you post a link?

JayD’s picture

JayD commented

http://ephemurl.com/3d/pli

charlie-s’s picture

charlie-s commented

It's not that the LI has too much space below it, it's that the UL has too much space above it.

Add this to your CSS:

ol ul,
ul ul {
margin-top: 0px !important;
}

This will make any UL inside another UL (or OL) have no top margin (or set to whatever you want the top margin to be).