Question

I am having a problem getting the correct width of a span. It works in the following browsers and NOT in IE7:
Works in:
Firefox
Chrome
Safari
IE8

I need to get the correct width of the span so I can pass it as an argument to a jquery function.

Example code is identical to code with problem, but with generic class names substituted in to make the example easier to understand/refer to.

Related HTML:

...
<span class="outer-span">
 <div class="inner-div">
  <a href="http://www.google.com">
   <span class="selected">
    <c:out value="${somestring}" />
   </span>
  </a>
 </div>
</span>
...

Related CSS:

.outer-span { width: 120px; }

When I alert($(‘.outer-span’).width()) in all browsers EXCEPT IE7 I get 120.
In IE7, the alert shows me that the width of ‘outer-span’ is 700px, which is probably the width of one of its parents.

I know that to accurately reason about the problem, you probably have to see the html above the block that I’ve posted. What I’m looking for however, is some tips for debugging the problem, or a clue as to why IE7 acts this way or how IE7 handles things differently. I’m not looking for you to rewrite my code or come up with some CSS hack. Comment if you need more clarification on the problem.

Answer 1

You can’t put a <div> (block element) inside a <span> (inline element). It’s invalid and doesn’t make sense.

Browsers may try to fix your mistake, for example by closing the <span> when it sees the opening <div>. This would cause the span to be empty and hence have no width. But this behaviour will vary across browsers.

Also, you can’t put a width on an inline element. It will have no effect, unless you have IE in Quirks Mode… which may be the case if this is working for you. You really want to avoid Quirks Mode (use a proper <!DOCTYPE>!).

If you want a simple block wrapper to contain a <div>, it should probably also be <div>.