Problem updating jQuery element width

Question

I want to get the width of an element using jQuery. The problem is that I am changing the html inside this element. I want its width and width () to return the parent width instead, it looks like html () is not updating the width of the element at all.

But ... It works fine when no DOCTYPE is specified. I am using IE in a WebBrowser control.

CSS

p { margin: 0; padding: 0; } .name { font-weight: bold; } .description { color: #444; width: 190px; white-space: nowrap; overflow: hidden; } #container { } 

html is as follows:

 <div id="container"> <div id="friend0"><p class="name">Name</p><div class="description"><p>Description</p></div> </div> 

JS:

 var x1 = GetFriend(id).children('.description').width(); var x2 = GetFriend(id).children('.description').children('p').width(); 

(some jQuery animation code) and after that:

 GetFriend(id).children('.description').children('p').html('some now text here...'); var x3 = GetFriend(id).children('.description').children('p').width(); 

and x3 is the same as the description with the value 190 but when I do not declare DOCTYPE at the beginning of html, it returns a correctly updated value.

I need to declare a DOCTYPE because some animation code causes the scroll bars to flicker.

Does anyone know how to do this correctly?

Answer 1

You are already doing it right. Block elements such as <p> will use the width of their parent; that the standard box model works. It changes when you delete DOCTYPE because you switch the browser to quirks mode and exit it.

(Comment sent as an answer ...)