Solved

Double Space with <br>

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

ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

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

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.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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 how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

777 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