Get height of paragraph that includes text and image

Question

Im trying to get the height of a text element that has images in it.

The paragraph with text and two images:

<p id="txth">
    <ul>
        <li id="snow">
            <span class="title">Snow</span>
        </li>
        Hello
    </ul>
    <ul>
        <li id="rain">
            <span class="title">Rain</span>
        </li>
        Hello
    </ul>
</p>

The CSS:

.title {
  font-size: 17px;
  padding-left: 7px;
}

#snow {
  list-style-image:url("images/snow.png");      
}

#rain {
  list-style-image:url("images/rain.png");      
}

To get the height:

textHeight = sym.$("#txth").height();

This works if I'm not using lists, but I don't know how to write this without using a list. What can I do to get the height of this paragraph?

Answer 1

Instead of using a <p> tag rather use a <div>, as <ul> and <li> tags seem to always cause problems when it comes to their display properties (display:block or inline) when placed inside <p> tags.

<div id="txth">
  <ul>
    <li id="snow">
      <span class="title">Snow</span>
    </li>
    Hello
  </ul>
  <ul>
    <li id="rain">
      <span class="title">Rain</span>
    </li>
    Hello
  </ul>
</div>

Im not sure about the sym before the selector but this should work.

$(document).ready(function(){

    var textHeight = $("#txth").css("height");
    alert(textHeight);

});

Answer 2

You can't able to use element <ul> in <p>, so it's not work in your code.

User Either span or div or article instead of using p.