#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Posts
    60
    Rep Power
    5

    Whitespace not working


    I have an image which sits top right and text which sits to it's right:

    <p><img src="file:///c:/myImage/Documents/Images/me.jpg" alt="sometext" class="align-left"/></p>
    <p id="dpa1"><span class="dpi">line1*******</span><span class="aqis"> top right info<BR><BR>line 2 info<BR>line 3 info<BR>line 4 info<BR>line 5 info<BR><BR>Phone no: xxxxxxxxx<BR>Fax no: xxxxxxxxxx 3888<BR>www.me.com</span><BR><BR></p>

    with CSS of:

    <style type="text/css">
    p {font-family: Arial, Helvetica, sans-serif; font-size:12px}
    p#dpa1 {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
    .aqis {font-family:Arial, Helvetica, sans-serif; font-size:10px; white-spacere}
    .dpi {font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold}
    h3 {font-family:Arial, Helvetica, sans-serif}img.align-left {
    float: left; padding-right:20px;width: 120px;height: 120px;}
    </style>

    There are actually 2 issues: The whitespace in front of "top right info" is compressed into 1 space and, less important but annoying, the first line (line1*******) is 1 line down from the top of the image. This is my first go at css so I've probably made some (obvious to others) error.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    118
    Rep Power
    50
    It is helpful if you use the CODE widget to enclose your code.

    You say "I have an image which sits top right", but your code says to float the image left. I'm going to assume your code is correct and you misspoke, meaning to write, "I have an image which sits top left".

    In your first issue, you said, "The whitespace in front of "top right info" is compressed into 1 space." But there is nothing in the code indicating to expect anything else.

    You don't seem to be using the "white-space: pre" for anything. E.g., you are putting "<br>" in there, which normally, using "pre" allows you to avoid.

    If I understand your intent, what you are trying to do is just put more space between "line1*******" and "top right info". A simple way to do that without trying to add literal spaces is to change your CSS to add space at the end of the "dpi" span containing "line1". For the layout you have, you could use padding-right or margin-right.

    E.g.,
    Code:
    .dpi {... ; padding-right:3em; }
    I don't see your second issue: "... annoying, the first line (line1*******) is 1 line down from the top of the image." That's not not case in my browser. The top of the first line and top of the image are in line as expected. It could be something we don't see causing an issue?

    FWIW, it would be better not to repeat the font-family in every text type. It simplifies your CSS to accept the inheritance.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Posts
    60
    Rep Power
    5
    EEsterling, apologies for the typo (yes, top left NOT top right) and no use of the code widget. I thought that the CSS line:

    Code:
    .aqis {font-family:Arial, Helvetica, sans-serif; font-size:10px; white-space: pre}
    which didn't come out too well in my message - some little face in the way - would do the trick.

    As for the other issue...aaah, I never know how much info to include, afraid of saying too much. This code is used in cfdocument within a ColdFusion function which creates a pdf for printing or emailing. So, it's never seen in a browser.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Posts
    60
    Rep Power
    5
    EEsterling, many thanks for your assistance, the "padding" did the trick and the alignment issue is no longer a problem. Great work and have a Happy New Year!

IMN logo majestic logo threadwatch logo seochat tools logo