2
<div class="w-box-header" style="text-align: right;">
<div class="footer-text">
My Support Representative
</div>
<div>
<asp:Label ID="mcr_Name" runat="server" Text="Test Joe" /><br />
<asp:Label ID="mcr_email" runat="server" Text="mailto@gmail.com" /><br />
<asp:Label ID="mcr_phone" runat="server" Text="P: (800) 555-5555 ext. 143" /><br />
<asp:Label ID="mcr_fax" runat="server" Text="F: (555) 555-5555" />
</div>
</div>

The <br> is causing a lot of space to be put above/below the labels. Is there any way to override this spacing and have them be right under each other?

It looks like this:

Test Joe

mailto@gmail.com

P: (800) 555-5555 ext. 143

F: (555) 555-5555

How to force it like this:

Test Joe
mailto@gmail.com
P: (800) 555-5555 ext. 143
F: (555) 555-5555

James Wilson
  • 5,074
  • 16
  • 63
  • 122

7 Answers7

2

Using divs, and remove BR's

  <div class="w-box-header" style="text-align: right;">
        <div class="footer-text">
            My Engagex Support Representative
        </div>
        <div>
            <div>
                <asp:Label ID="mcr_Name" runat="server" Text="Test Joe" />
           </div>
            <div>
                <asp:Label ID="mcr_email" runat="server" Text="mailto@gmail.com" />
            </div>
            <div>
                <asp:Label ID="mcr_phone" runat="server" Text="P: (800) 555-5555 ext. 143" />
            </div>
            <div>
                <asp:Label ID="mcr_fax" runat="server" Text="F: (555) 555-5555" />
            </div>
        </div>
    </div>
Mate
  • 4,976
  • 2
  • 32
  • 38
2

First of all, this is probably a misuse of <label>. You aren't labeling anything, just displaying text.

The label element represents a caption for a form control (w3)

Secondly, <br> should be used where the division of lines is significant, not for style purposes (see here).

For ASP.Net, I would use a simpler structure:

<div><asp:Literal runat="server" text="Foo" /></div>
<div><asp:Literal runat="server" text="Bar" /></div>
<div><asp:Literal runat="server" text="Baz" /></div>

Also see: Marking up contacts using semantic HTML5 & microformats for more advanced techniques.

Tim M.
  • 53,671
  • 14
  • 120
  • 163
  • This is the design phase, next phase I will be updating the label with information obtained from a login. Could still use a literal for that I suppose. – James Wilson Nov 22 '12 at 05:17
  • A label should usually be paired with a form element. If you just need to display text (even if it's form-related) a label isn't necessary (although nothing bad will happen). – Tim M. Nov 22 '12 at 05:20
  • As a note, an `asp:label` will increase the size of your viewstate. – Tim M. Nov 22 '12 at 05:21
  • 1
    I have switched them to literals. Getting better and better each day. :) – James Wilson Nov 22 '12 at 05:49
0

I would add padding to your labels via CSS, change their display to block, and remove the br tags entirely

m4nw17h4pl4n
  • 149
  • 4
0

Use CSS:

<div class="w-box-header" style="text-align: right;">
<div class="footer-text">
My Engagex Support Representative
</div>
<div>
<asp:Label ID="mcr_Name" runat="server" Text="Test Joe"  style="display:inline-block;"/><br />
<asp:Label ID="mcr_email" runat="server" Text="mailto@gmail.com" style="display:inline-block;"/><br />
<asp:Label ID="mcr_phone" runat="server" Text="P: (800) 555-5555 ext. 143" style="display:inline-block;"/><br />
<asp:Label ID="mcr_fax" runat="server" Text="F: (555) 555-5555" style="display:inline-block;"/>
</div>
</div>
Akhil Sekharan
  • 12,467
  • 7
  • 40
  • 57
0

Yes, this problem is not to hard to fix. You need to write a CSS style for the
tag to change its default settings (which are determined by a users web browser). The are two properties that can effect the distance between the
tags. The first is called the margin, this has a default value within web browsers.

Here is some code for adjusting the margin:

<html>
<head>
...
<style type="text/css">
br {
margin-top: 5px;
margin-bottom: 5px;
}

</style>

Alternatively, you might need to change the padding

...
<style type="text/css">
br {
padding-top: 5px;
padding-bottom: 5px;
}
</style>

If neither of these work after setting their values to "0px" and spacing still remains, then the issue is not with the
tags. It could be either the padding or margin of other tag elements like <img /> , <p> or whatever else is adjacent to your
tags.

Although this answer was not chosen as a solution to this question, here is a diagram of the properties used by html and CSS for stylizing layouts for the web: enter image description here

In most cases of programming, there are many ways to arrive at the same answer. Just make sure that you are consistent in how you solve similar problems across the site.

Matt
  • 879
  • 9
  • 29
  • Using the
    tag is more appropriate for structuring layout like this as changing the style for the
    tags will change how all the br tags appear on entire page, not just the ones used in your cited code. There is a balance between creating the right ammount of divs and creating too many. Mate's answer is a little div heavy, you can still use the
    tags, but also give the wrapping div an id or class. This would enable you to be able to write a compound style for the given
    tags. Check out www.w3schools.com to see references on CSS styles.
     – Matt Nov 22 '12 at 05:20
  • Thank you for the extra work, I really as just looking for the quick and dirty for this solution. I know it is a bit div heavy, but it got me past a hurdle and then a task which allowed me to move onto my next task in this project with a deadline. =( – James Wilson Nov 22 '12 at 05:42
  • @James No worries, thanks for the support. I just want to help out those who may search this topic and arrive at your question. I use stack overflow to find a lot of answers I can't find in other references. – Matt Nov 22 '12 at 05:47
0

A simple solution could be to remove the <br /> tags and instead use CSS to style those lines the way you wish. If you want to display each piece of information on individual lines you can specify that they should be displayed as "blocks" in CSS.

<div> 
    <asp:Label ID="mcr_Name" runat="server" Text="Test Joe" style="display:block;" />
    <asp:Label ID="mcr_email" runat="server" Text="mailto@gmail.com" style="display:block;" />
    <asp:Label ID="mcr_phone" runat="server" Text="P: (800) 555-5555 ext. 143" style="display:block;" />
    <asp:Label ID="mcr_fax" runat="server" Text="F: (555) 555-5555" style="display:block;" />
</div>

To reduce verbosity and duplication of that CSS code, you can move the style definition to the <head> element in your markup like so:

<head>
    <style type="text/css">
        .block {
            display: block;
        }
    </style>
</head>
<body>
    <div> 
        <asp:Label ID="mcr_Name" runat="server" Text="Test Joe" class="block" />
        <asp:Label ID="mcr_email" runat="server" Text="mailto@gmail.com" class="block" />
        <asp:Label ID="mcr_phone" runat="server" Text="P: (800) 555-5555 ext. 143" class="block" />
        <asp:Label ID="mcr_fax" runat="server" Text="F: (555) 555-5555" class="block" />
    </div>
</body>

I personally avoid using the <br /> tag as much as I can. I've found it to be much better to use HTML markup (like <div>, <br /> etc.) to provide only the structure of the document and not the style.

When dealing with the style of your web page (spacing, fonts, colours etc.), I've had much better success sticking to CSS.

jpennell
  • 631
  • 1
  • 5
  • 14
0

put this in your CSS

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}
Patrick Guimalan
  • 990
  • 9
  • 11