Solved

Double Space with <br>

Posted on 2013-02-07
4
200 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 43

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

920 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

17 Experts available now in Live!

Get 1:1 Help Now