Solved

Double Space with <br>

Posted on 2013-02-07
4
195 Views
Last Modified: 2013-02-17
Hi,

When using a <br> it makes 2 spaces between lines:

			<span style="font-size: 12px"><font face=""><font face="Arial, Helvetica, sans-serif"><strong><span style="font-size: medium;"><span style="color: #cc0000;">John</span></span></strong> </font></font><span style="font-family: arial, helvetica, sans-serif"><strong><span style="font-size: medium;"><span style="color: #808080;">Doe</span></span></strong></span><font face=""><font face="Arial, Helvetica, sans-serif"><span style="font-family: arial, helvetica, sans-serif"><br />
			</span></font></font><span style="font-family: arial, helvetica, sans-serif"><span style="font-size: xx-small;"><em>Title 1</em></span></span><font face=""><font face="Arial, Helvetica, sans-serif"><span style="font-family: arial, helvetica, sans-serif"><span style="font-size: xx-small;"><span style="color: #cc0000;">?</span> </span></span></font></font><span style="font-family: arial, helvetica, sans-serif"><span style="font-size: xx-small;"><em>Title 2</em></span></span><font face=""><font face="Arial, Helvetica, sans-serif"><span style="font-family: arial, helvetica, sans-serif"><span style="font-size: xx-small;"> <span style="color: #cc0000;">?</span> </span></span></font></font><span style="font-family: arial, helvetica, sans-serif"><span style="font-size: xx-small;"><em>Title 3</em></span></span>

Open in new window

double-space.jpg
0
Comment
Question by:Computer Guy
  • 2
4 Comments
 
LVL 42

Expert Comment

by:sedgwick
ID: 38863473
0
 
LVL 42

Expert Comment

by:sedgwick
ID: 38863475
here's the solution from the link posted above:


Css:

br {
   display: block;
   margin: 10px 0;
}
The solution is probably not cross-browser compatible, but it's something at least. Also consider setting line-height:

line-height:22px;
For Google Chrome, consider setting content:

content: " ";
Other than that, I think you're stuck with a JavaScript solution.
0
 
LVL 27

Expert Comment

by:yodercm
ID: 38863502
I believe you are missing an end span in the first line, and the system is putting one in at the end, causing the extra line.
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 38863553
Wow. That is probably the worst HTML that I've seen for a long, long time. Is there a particular reason for it? Have a look at the following. It does the same thing, only properly:

<div class="person">
	<h2><em>John</em> Doe</h2>
	<p>Title 1 <em>?</em> Title 2 <em>?</em> Title 3</p>
</div>

<style type="text/css" media="screen">
	.person { font-size:12px; font-family: arial, helvetica, sans-serif; }
	.person h2 { margin:0px; color: #808080; font-size:medium; }
	.person p {  margin:0px; font-size: xx-small; font-style:italic; }
	.person em { color: #cc0000; font-style:normal; }
</style>

Open in new window

Adjust the space between the lines by either adding a top margin to the P or a bottom margin to the H2.

FYI: The font tag is deprecated.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Zoom web page in asp.net 2 37
Swiper slider stops between pages 11 32
css, html 6 31
Library to convert HTML to PDF. 8 46
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now