SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,496
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)

    problems displaying telephone number

    I'm trying to do something that sounds simple, but isn't. At least for me it isn't

    This is what I want:
    telok.png

    This is what I get when I put the image and the text in a <p>
    teltoolong.png
    code:
    Code HTML4Strict:
            <p class="telefono">
              <img src="img/phone.png">+9999999999999
            </p>
    Code CSS:
    .telefono {
      background: #fefefe; 
      border: 0.1em solid red;
      -webkit-border-radius: 1em;
      -moz-border-radius: 1em;
      border-radius: 1em;
      color: #000000;
    	padding: 0.1em;
    	margin: 0;
    }
     
    .telefono img {
    	vertical-align:middle;
    	margin: 0;
    	padding: 0;
    }
    The <p> stretches until the end of the containing div. I don't want that.
    Also the image and the text are slightly disaligned, but that might be caused by the round corners?

    This is what happens when I put a span around the image and the text:
    teloutsidespan.png
    code:
    Code HTML4Strict:
            <p>
              <span class="telefono"><img src="img/phone.png">+9999999999999</span>
            </p>
    the CSS doesn't change.
    As you can see, the box closes nicely around the text, and the text is aligned perfectly, but the image is going outside of the span (or the span doesn't include the entire image).

    When I add display: block; to the span's css, it behaves exactly as it did with the <p>.

    Is it possible to do? And if so, what am I doing wrong?
    I've searched the forum and googled around for some time, but haven't found anything yet.

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    I would start by adding a line-height to the <p>, to force it to the height of the icon and vertically centre the text within it.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Try display inline-block on the p or float left. Either should fix

  4. #4
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,496
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Try display inline-block on the p or float left. Either should fix
    inline-block resolved the length problem, thanks for that
    Quote Originally Posted by Stevie D View Post
    I would start by adding a line-height to the <p>, to force it to the height of the icon and vertically centre the text within it.
    The image has a 50px height, and I put a 2px margin above and under, so I set a line-height of 54px to the <p>.
    Code HTML4Strict:
            <p class="telefono">
              <img src="img/phone.png">+9999999999999
            </p>
    Code CSS:
    .telefono {
      background: #fefefe; 
      border: 0.1em solid red;
      -webkit-border-radius: 1em;
      -moz-border-radius: 1em;
      border-radius: 1em;
      color: #000000;
    	padding: 0 0.3em;
    	margin: 0;
    	display: inline-block;
    	line-height: 54px;
    }
     
    .telefono img {
    	vertical-align:middle;
    	margin: 2px 0;
    	padding: 0;
    }
    In Opera 12.10 it displays perfect. telopera.png
    In Chrome the image is a bit disaligned to the bottom, the text is aligned good. telchrome.png
    In IE9 the image is a bit disaligned to the bottom, and the text a bit to the top. telie.png
    FF16 is like IE9. telff.png

    Any idea how to solve those disalignments? I've tried with margins and paddings, but when I solve one I break another

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You could try setting a specific value for vertical-align on the paragraph - the default is baseline but one of the other values may work better - probably text-bottom since you are only displaying numbers in the text and no numbers have descenders.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    These numbers are static right? If you can't get it perfect then just wrap the text in a span > give the p position relative and a width in ems > and position the span absolutely where you want it.

  7. #7
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,496
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by felgall View Post
    You could try setting a specific value for vertical-align on the paragraph - the default is baseline but one of the other values may work better - probably text-bottom since you are only displaying numbers in the text and no numbers have descenders.
    This doesn't seem to have any effect.

  8. #8
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,496
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by EricWatson View Post
    These numbers are static right? If you can't get it perfect then just wrap the text in a span > give the p position relative and a width in ems > and position the span absolutely where you want it.
    The problem seems to be the image that isn't aligned in the middle, but pushed a bit down, stretching the <p> vertically, and therefor it looks like the text is also disaligned, but it isn't. It's the image. I'll continue testing tomorrow. Any ideas are welcome

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by guido2004 View Post
    image that isn't aligned in the middle, but pushed a bit down
    that would be because it iis vertically alighed to the baseline and that makes allowance for text that has descenders - eg. qypj

    Try wrapping the phone number in a span and apply the vertical-align just to the span.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,496
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by felgall View Post
    that would be because it iis vertically alighed to the baseline and that makes allowance for text that has descenders - eg. qypj

    Try wrapping the phone number in a span and apply the vertical-align just to the span.
    Couldn't get that to work.
    I'm almost there though
    This works fine in all browsers except chrome... telchrome2.png
    Code HTML4Strict:
    <div class="telefono">
      <p><img src="img/phone.png">+9999999999999</p>
    </div>
    Code CSS:
    .telefono {
      background: #fefefe; 
      border: 0.2em solid red;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
      color: #000000;
      padding: 0.1em 0;
      margin: 0;
      line-height: 50px;
      float: left;
    }
     
    .telefono img {
      vertical-align:top;
      margin: 0 0.3em 0 0;
      padding: 0; 
      float: left;
    }
     
    .telefono p {
      vertical-align:middle;
      padding: 0 0.3em 0 0.1em;
    }

  11. #11
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,496
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Ok solved it.
    I forgot to eliminate the float: left; on the image (a leftover from previous tests).

    Finale code:
    Code HTML4Strict:
    <div class="telefono">
      <p><img src="img/phone.png">+9999999999999</p>
    </div>
    Code CSS:
    .telefono {
      background: #fefefe; 
      border: 0.2em solid red;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
      color: #000000;
      padding: 0.1em 0;
      margin: 0;
      line-height: 50px;
      float: left;
    }
     
    .telefono img {
      vertical-align:top;
      margin: 0 0.3em 0 0;
      padding: 0; 
    }
     
    .telefono p {
      vertical-align:middle;
      padding: 0 0.3em 0 0.1em;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •