IE7 and justify / word wrap css

Question

i have a page with a sort of tag cloud section on it. the markup for said cloud is something similar to this..

<div class="ContentColumnB">
    <div class="tagcloud">
        <p>
        <span style="font-size: larger;">Office 2010 Issues </span>
        <span style="font-size: x-large;">Windows 7 </span>
        <span>SharePoint </span>
        <span style="font-size: large;">Migration Management Tools</span>
        <span style="font-size: small;">75% Upgrading </span>
        <span style="font-size: smaller;">Desktop Virtualisation</span>
        <span style="font-size: x-large;">Microsoft Jump Start </span>
        <span style="font-size: medium;">Buying Solutions</span>
        <span style="font-size: large;">What-if Planning</span>
        </p>
    </div>
</div>

here is the associated css

.ContentColumnB {
height:85px;
padding:5px 10px;
width:460px;
}
.tagcould p{
color:#6192B6 !important;
text-align:justify;
}
div.tagcloud span {
color:#6192B6 !important;
display:inline !important;
padding:0 3px;
word-wrap:break-word;
text-align:inherit;
}

as usual I am having problems with IE, IE7 to be precise. it refuses to split the spans with the style tag onto seperate lines : so migration management tools for instance in FF and IE8 the word migration is on one line and the management tools is on the next. for IE 7 however if refuses to stick the latter words on a new line and hence fits a great deal less in the block. this is generated by a WYSIWYG editor, so the solution wont be to change the way the markup is generated.. here is what IE looks like : http://www.dumpt.com/img/viewer.php?file=cgyd1xbpig61kr39kn74.gif

and FF: http://www.dumpt.com/img/viewer.php?file=iuw5o3cgl5k52m5i1afw.gif

taking the justify off doesnt make any difference to the wrapping either ( i put that in so it at least didnt look all squished over to one side).. why is it that a span wont run over 2 lines? clearly im missing something... just to confirm that IE8 is ok and of course FF is too.

any suggestions?

thanks

nat

Answer 1

You say removing style="font-size:whatever" also removes the problem?

You could run a small javascriptscript replacing the style="font-size:whatever" for something that will accomplish the same visual effect, but not the problem.

Answer 2

it seems the problem related to an inherited zoom:1; so in order to avoid one IE bug I ran headlong into another

zoom:0 on the span, all is well

nat