Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    CPW
    CPW is offline
    Member
    Join Date
    Sep 2006
    Posts
    53
    Member #
    13935
    Hello.
    I am working on a webpage, and in the footer I have a line of text with address & phone numbers. I have multiple spaces between the address and phone numbers, but only 1 space is displayed when viewed in a browser. I tried it in IE and in Firefox, so it must be something with the html.
    Any ideas on how to make the multiple spaces show up? Thanks.

  2.  

  3. #2
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    It's a normal "feature" of HTML. What you want to do is either add padding to an element, or do the likely wrong thing of using non-breaking spaces instead (type   in the code where you want a space to go). The latter will work, but it's almost never a clean solution.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  4. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    To insert more than one space, you'll have to use the HTML entity [minicode] [/minicode] (non-breaking space). However, it would be wiser to wrap these two in [minicode]span[/minicode] tags, give these tags a class, say `spaced', and then give this class a left or right margin:
    HTML Code:
    <span class="spaced">Address</span><span class="spaced">Phone Number</span>
    With the CSS:
    Code:
    span.spaced
    {
        margin-right: 3em;
    }

  5. #4
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    The whole wrap with spans is the normal way to do things but it adds too much to what should be a simple thing, this is how i would go about it.

    HTML Code:
    span.preformat {white-space: pre;}
    HTML Code:
    <span class="preformat" >address  phone</span>
    The 'white-space' property will accept three values, 'pre' will cause the element to act like the PRE element.

    If you notice there are two spaces between address and phone, you can put as many as you wish and it will render properly in most browsers. As a consequence though as with the PRE element whitespaces will not be collapsed and line breaks will only occure if you specify them in the markup. So as with with most things use when approperiate.

    Depending on your layout this might be a better decision such as if you would like the whitespace to adjust if you change the size of your font.. Of course you could argue that you could still use the 'span method' but specify your margins and or paddings in terms of 'em' instead of a fixed unit of measure like 'px', as shown in Shadowfiend's example above. Wich would also cause the whitespace to adjust when 'font-size' is adjusted..


  6. #5
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    And I'll point out that I did use ems ;-)

  7. #6
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    I noticed that, but wanted to point that feature out to CPW. Just forgot to give you credit for doing that in your example, im such a selfish tart!! I will correct that.


  8. #7
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Hahaha. I was mostly kidding, but hey, why not :-D

  9. #8
    CPW
    CPW is offline
    Member
    Join Date
    Sep 2006
    Posts
    53
    Member #
    13935
    Thanks for the help everyone. I am currently using &nbsp in place of the spaces and it works how I want. If I encounter any problems, I will try using the span element instead. Thanks everyone.

  10. #9
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    The issue with &nbsp; isn't that it won't work -- it will. It's just that it's a very dirty way of doing it

  11. #10
    ljm
    ljm is offline
    Senior Member ljm's Avatar
    Join Date
    Aug 2006
    Location
    Manchester, England
    Posts
    284
    Member #
    13684
    Liked
    1 times
    You could always save on space too. Just put half of the footer in <span> tags (make them a direct descendant in your CSS), with the margin applied, rather than both. Just as long as the footer as a whole is contained within a <div> or <p> element, or whatever, and not lying bare within your <body> tags.

    That might not be a clean solution either, but I'm using a similar idea for a site I'm developing.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:07 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com