CODEWITHSUNDEEP
htmlhtml-tablerowinternet-explorer-7
Jimmy
Jimmy

Reputation: 285

<span> tag breaking row in IE7

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 understand!

example of problem http://img2.imageshack.us/img2/3130/humm.png

I'm sure you can see my problem!

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.

Here's 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>"

Upvotes: 4

Views: 3495

Answers (2)

Rocket Ronnie
Rocket Ronnie

Reputation: 1116

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>

Upvotes: 4

Jaime Garcia
Jaime Garcia

Reputation: 7096

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

Upvotes: 1

Related Questions