<span> tag breaking row in IE7

Question

Hi! My code is as follows:

<table> <tr> <td><div id='lunch'><a href='Lunchplace.aspx?c=1&id=110'><img style='margin-top: 3px;' src='./images/115x52_Brasseriet.jpg'class='imagealign'/><b>Brasseriet</b><br />Köttbullar med gräddsås & kokt pota...&nbsp;<span style='color:#f29400;font-size:small;float:right;'>80 Kr<span style='float:right;'>70 Kr</span>&nbsp;&nbsp;&nbsp;&nbsp;</span><br />Kycklinggryta med örtcremefraishe &...&nbsp;<span style='color:#f29400;font-size:small;float:right;'>80 Kr<span style='float:right;'>70 Kr</span>&nbsp;&nbsp;&nbsp;&nbsp;</span><br />Paj, Lasagne, Räksallad, Kycklingsa...&nbsp;<span style='color:#f29400;font-size:small;float:right;'>79 Kr<span style='margin-right:40px'></span></span></div></td></tr><tr><td><img src='./images/siteimages/linje_430.jpg'/></td></tr></table>

And it looks aweful in ie7, All other browsers render it correct, but it seems that ie7 make row breaks at the spans, even though the spans are inline elements.. Ill add a picture so you can understad!

http://img2.imageshack.us/img2/3130/humm.png

Im sure you can see my problem! Thanks in advance

As reply to rocket ronny Heres the code as it looks now(Auto generated some parts)

 Lunches = Lunches + "<table cellspacing='0' cellpadding='0' width='500px;'><tr> <td><div id='lunch'><a href='Lunchplace.aspx?c=1&id=110'><img style='margin-top:3px;' src='./images/" + Img + "'class='imagealign'/><strong>" + k.Name + "</strong><br />" + checkLength(k.Monday) + "&nbsp;" + "<span style='color:#f29400; font-size:small; float:right;'>" + checkZero(k.Monday, k.PriceMonS, 1).ToString + checkZero(k.Monday, k.PriceMonGet, 2).ToString + "</span>&nbsp;&nbsp;&nbsp;&nbsp;</span><br />" + checkLength(k.Monday2) + "<span style='color:#f29400; font-size:small;float:right;'>" + checkZero(k.Monday2, k.PriceMon2S, 1).ToString + checkZero(k.Monday2, k.PriceMon2Get, 2).ToString + "</span>&nbsp;&nbsp;&nbsp;&nbsp;<br />" + checkLength(k.Monday3) + "<span style='color:#f29400;font-size:small;float:right;'>" + checkZero(k.Monday3, k.PriceMon3S, 1).ToString + checkZero(k.Monday3, k.PriceMon3Get, 2).ToString + "</span></div></td></tr><tr><td><img src='./images/siteimages/linje_430.jpg'/></td></tr></table>"

This was the code you said would work...but it looks the same as usual

Heres the original code auto generated:

Lunches = Lunches + "<table> <tr> <td><div id='lunch'>" + "<a href='Lunchplace.aspx?c=" + city.ToString + "&id=" + k.ResturantID.ToString() + "'><img style='margin-top: 3px;' src='./images/" + Img + "'class='imagealign'/>" + "<b>" + k.Name + "</b>" + "<br />" + checkLength(k.Monday) + "&nbsp;" + "<span style='color:#f29400;font-size:small;text-align:right;'>" + checkZero(k.Monday, k.PriceMonS, 1).ToString + checkZero(k.Monday, k.PriceMonGet, 2).ToString + "</span><br />" + checkLength(k.Monday2) + "&nbsp;" + "<span style='color:#f29400;font-size:small;text-align:right'>" + checkZero(k.Monday2, k.PriceMon2S, 1).ToString + checkZero(k.Monday2, k.PriceMon2Get, 2).ToString + "</span><br />" + checkLength(k.Monday3) + "&nbsp;" + "<span style='color:#f29400;font-size:small;text-align:right;'>" + checkZero(k.Monday3, k.PriceMon3S, 1).ToString + checkZero(k.Monday3, k.PriceMon3Get, 2).ToString + "</span></div></td></tr><tr><td><img src='./images/siteimages/linje_430.jpg'/></td></tr></table>"

Still the same problem, Will be back tomorrow!

Answer 1

Your row is breaking because of the "float:right;" CSS attribute you have on the span element. Possibly adding style="clear:both" to your TD flag will fix this

Answer 2

Your 'inner' span has a css property of float:right; - this is causing the line breaks in IE

the code below should work.

<table cellspacing="0" cellpadding="0"> 
    <tr> 
        <td>
            <div id="lunch">
                <a href='Lunchplace.aspx?c=1&id=110'><img style="margin-top: 3px;" src="./images/115x52_Brasseriet.jpg'class='imagealign"/><strong>Brasseriet</strong>
                <br />Köttbullar med gräddsås &amp; kokt pota... &nbsp; <span style="color:#f29400; font-size:small; float:right;">80 Kr<span style="margin-left:20px;">70 Kr</span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <br />Kycklinggryta med örtcremefraishe &amp;... &nbsp; <span style="color:#f29400; font-size:small;float:right;">80 Kr<span style="margin-left:20px;">70 Kr</span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <br />Paj, Lasagne, Räksallad, Kycklingsa... &nbsp; <span style='color:#f29400;font-size:small;float:right;'>79 Kr<span></span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            </div>
        </td>
    </tr>

    <tr>
        <td>
            <img src='./images/siteimages/linje_430.jpg'/>
       </td>
    </tr>
</table>