IE7 CSS problem: cannot get correct span width

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 开发者_Python百科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.

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

It's possible that IE7 is throwing a fit because you have a span surrounding a div, and inline elements cannot have block level children. Try applying:

.outer-span { display:block }

If that works, then I recommend changing the span in question to a div.

By default, spans are inline and divs are block elements. Having a div inside a span doesn't make a lot of sense without changing the default CSS display attribute. Try using nested divs with a CSS width on both of them, or changing the inner div into a span, or using display: inline on the inner div.