Cross browser alignment problem

[admin]

I'm having to align some ASP generated text using spans (I can't use tables due to the way the html is generated). The following code looks fine in IE6:



<style>
hr {
border: 1px dashed;
width: 100%;
color:#1C096F;
height:1px;
}

.toneText{
color:#1C096F;
font-weight:bold;
width:120px;
}
</style>

<span class=toneText>This text should wrap after 120px</span> [IMAGE]
<hr>
<span class=toneText>This text should wrap after 120px</span> [IMAGE]
<hr>
<span class=toneText>This text should wrap after 120px</span> [IMAGE]
<hr>
<span class=toneText>This text should wrap after 120px</span> [IMAGE]
<hr>



On firefox and opera the text does not wrap.

If I use float:left on .toneText and add a <br> before each <hr> it looks OK but this is no good since the text in the real code can be of different lengths (I would need a different number of <br>'s depending on how many lines the text goes onto).This worked for me...

.toneText{
display:block;
color:#1C096F;
font-weight:bold;
width:120px;
}For me that causes the image to end up on the next line.Oh, I thought that was the effect that your were going for.
How wide is the image?Actually it will be two images, only about 50 px wide each.


you can see the site if you want:

<!-- m --><a class="postlink" href="http://test.awol-ringtones.com">http://test.awol-ringtones.com</a><!-- m -->

Firefox and opera seem to ignore the width on the span.Spans don't have width. They're inline elements. You need divs and you probably need to float them left.Ah that's what I thought originally but I couldn't get it working.



<style>

.toneText{
width:120px;
float:left;
}
</style>

<div class=toneText>This text should wrap after 120px</div> [IMAGE]
<hr>
<div class=toneText>This text should wrap after 120px</div> [IMAGE]
<hr>
<div class=toneText>This text should wrap after 120px</div> [IMAGE]
<hr>
<div class=toneText>This text should wrap after 120px</div> [IMAGE]
<hr>



What I want is:

text that wraps [IMAGE]
like this
-------------------------
text that wraps [IMAGE]
like this
-------------------------
text that wraps [IMAGE]
like this
-------------------------

How can I achieve this with spans? Sorry I'm a bit new to css alignment - been reading a few resources but not getting anywhere.Hi,

I think I have a solution for you.
For this to work,will will have to move the image above the spans in your html.
I have tested in all of my mac browsers:
IE5.2, FF, OP, NN and Safari
All are displaying correctly.
File is attached.

-MikeAh... I never thought to float the image to the right. Good idea.
Thanks alot for your time The ringtones industry salutes you!