Unwelcomed Breaks

HTML & CSS
1

I’m using a work CMS that has an unfortunate habit of automatically inserting a break after all div and UL tags like this:

</div><br>

</ul><br>

This creates unsightly gaps below the text blocks. If I have nested bullets inside a bullet list it creates a </ul><br> at the end of the indented/nested bullets, again unsightly as there is a big gap in the middle of the list.

I can’t block this behaviour as the CMS scans and inserts the code and I don’t have high enough admin access to alter it. Is there any way through the stylesheet to say “if br follows div or /ul then 0px” or somesuch?

2

Sounds like a yucky CMS! One easy way around it is to add this to your stylesheet:

br {display: none;}

If that’s too absolute, you could target those more specific instances like so:

div + br, ul + br {display: none;}

That’s a specific way to say “if br follows div or /ul then …”

3

And people wonder why I don’t like CMSs. Do you not have access to a code view at all? If not, I find a good technique is to pester the people who do have that level of access with so many incessant requests for changes to the codebase that eventually they give up and give you the access you need!

4

it’s prolly not the CMS, exactly. Some versions of TinyMCE save blank characters as line returns or vice versa… a text filter may read those as "
" and conver them to <br>… it’s kinda a pain, but it may simply mean that you need to adjust the character filter on your CMS, if you can, or try NOT spacing your paragraphs, list etc when you enter them…

yeah, it’s still a pain I know.

5

The CMS templates and code were produced years ago and so many pages built on them that they won’t touch them for fear of breaking something. They were created before wide use of CSS. Think Win NT SOE in a workplace and you get the idea.

6

Have you tried the CSS solution I posted? It will do the trick.

7

I’ve just been testing. Display none makes the tags disappear, but this worked well to counteract the extra spacing:

br + ul, br + ol, ul + br, ol + br {margin-top: -5px;}

However you can’t specify any width or side margins as IE 7 is buggy with width in ordered lists.

Thanks for your assistance.

8

Personally, I think display: none is cleaner and more reliable, but it’s up to you. I guess another solution might be position: absolute; left: -9999px, but I don’t see the point. Display: none just hides them from everything.