problems displaying telephone number

[guido2004]

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:

        <p class="telefono">
          <img src="img/phone.png">+9999999999999
        </p>

.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:

        <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.

[Stevie D]

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.

[PicnicTutorials]

Try display inline-block on the p or float left. Either should fix

[guido2004]

Try display inline-block on the p or float left. Either should fix

inline-block resolved the length problem, thanks for that

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>.

        <p class="telefono">
          <img src="img/phone.png">+9999999999999
        </p>

.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

[felgall]

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.

[PicnicTutorials]

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.

[guido2004]

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.

[guido2004]

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

[felgall]

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.

[guido2004]

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

<div class="telefono">
  <p><img src="img/phone.png">+9999999999999</p>
</div>

.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;
}

[guido2004]

Ok solved it.
I forgot to eliminate the float: left; on the image (a leftover from previous tests).

Finale code:

<div class="telefono">
  <p><img src="img/phone.png">+9999999999999</p>
</div>

.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;
}