Text breaks at incorrect spot 1

[R7Dave]

Hello

I am using tables in an aspx page to display an image, some text, and a link

The text breaks at a weird spot - could you tell me how to make the text use the whole cell?

Here is a link to the page

http://www.guitargoals.com/tabswip.aspx

This is the code for one table

<!-- Acoustic Tab -->
<table style="width: 700px" border="1">
<tr>
<td rowspan="2" align="left" style="width: 10%" valign="top">
<img src="Images/linkimages/sweet-black-acoustic-guitar.jpg" ></td>
<td style="width: 255px" align="left"><a href="

http://www.ultimate-guitar.com/tabs/c/chicago/beginnings_ver2_crd.htm"

target="_blank">
"Beginnings" by Chicago</a> </td>
</tr>
<tr>
<td style="width: 255px"><p>
This is a great song to play on the acoustic and it will show you how to incorpoorate
major seventh chords - you don't need a horn section, but it wouldn't hurt.</td>
</tr>
</table>


Also, what would be a better solution to do this same thing using CSS?

Thanks in advance
Dave

 

[feherke]

Hi

You mean to remove the margins before and after paragraphs ?

p {
  margin-top: 0;
  margin-bottom: 0;
}

Feherke.

http://rootshell.be/~feherke/

 

[R7Dave]

Hello

Did I do it right?

<table style="width: 700px" border="1">
<tr>
<td rowspan="2" align="left" style="width: 10%" valign="top">
<img src="Images/linkimages/sweet-black-acoustic-guitar.jpg" ></td>
<td style="width: 255px" align="left"><a href="

http://www.ultimate-guitar.com/tabs/c/chicago/beginnings_ver2_crd.htm"

target="_blank">
"Beginnings" by Chicago</a> </td>
</tr>
<tr>
<td style="width: 255px"><p style="margin-top: 0; margin-bottom: 0">
This is a great song to play on the acoustic and it will show you how to incorpoorate major seventh chords - you don't need a horn section, but it wouldn't hurt.
</p>
</td>
</tr>
</table>

If you follow the link, you will see what I mean - the text breaks while there is plenty of room before break is needed. I tried specifying the breaks but there seems to be a margin on the right hand side - did I try your suggestion correctly?

 

[feherke]

Hi

Probably I misunderstood you.

Personally I detect no strange breaking.

With which browser(s) are experiencing that breaking ?

Could you create a screenshot for us, visually marking the problem on it ?

Feherke.

http://rootshell.be/~feherke/

 

[R7Dave]

I'm using Internet Explorer 7

See

http://www.guitargoals.com/screenshot.jpg

I want the text to go all the way across the cell.

This is a great song to play on the acoustic and it will...

but now, it looks like...

This is a great song to play on the
acoustic and it will...


Thanks for you help
Dave

 

[R7Dave]

I see what you are saying - it doesn't do it with Google chrome. Any ideas? How can I standardize with all browsers?

 

[feherke]

Hi

Ouch ! That is indeed very ugly. It looks good in Mozillas ( FireFox, SeaMonkey ), Opera and Konqueror. )

No proper idea what to do. But for debugging I would make the [tt]pp[/tt]'s [tt]border[/tt] visible to find out to which element the empty space pertains :
I would add this style

p { border: dotted red 1px; }

Additionally, when experiencing such rendering differences across browsers, may help to correct the HTML. You can not expect that invalid HTML to appear identically in all browsers.

73 Errors, 3 warning(s)

http://validator.w3.org/check?verbose=1&uri=http://www.guitargoals.com/tabswip.aspx

Feherke.

http://rootshell.be/~feherke/

 

[R7Dave]

Thanks for your help - I will try your suggestions

Thanks again

 

[Vragabond]

Looking at the screenshot and the way it looks on my screen, I would say it is probably the table that is screwed up somehow. IE seems to be making extra space for a phantom column.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[datamasher]

Hi R7Dave,

Just looked at your source code. The td's giving the problem in Explorer 7 only have a width of 255px and I think Explorer 7 is wrapping at this point but other browsers aren't. Try increasing these td's to say 600px. This worked when I did a test.

Steve

 

[datamasher]

Hi again,
just to clarify. See code below. Alterations I made are in red.

    <!-- Acoustic Tab -->
    <table style="width: 700px" border="1" >
        <tr>
            <td rowspan="2" align="left" style="width: 10%" valign="top">
                <img src="Images/linkimages/sweet-black-acoustic-guitar.jpg" ></td>
            <td style="width: 255px" align="left">
                <a href="[URL unfurl="true"]http://www.ultimate-guitar.com/tabs/c/chicago/beginnings_ver2_crd.htm"[/URL] target="_blank"> "Beginnings" by Chicago</a></td>
        </tr>
        <tr>
            <td style="width: [COLOR=red]600px[/color]" align="left" ;><p style="margin-left">
                This is a great song to play on the acoustic and it will show you how to incorpoorate
                major seventh chords - you don't need a horn section, but it wouldn't hurt.</p></td>
        </tr>
    </table>
    <br />
    <!-- Electric Tab -->
    <table style="width: 700px" border="1">
        <tr>
            <td rowspan="2" align="left" style="width: 10%" valign="top">
                <img src="Images/linkimages/black-and-white-electric-guitar-on-a-black-background.jpg" ></td>
            <td style="width: [COLOR=red]600px[/color]" align="left"><a href="[URL unfurl="true"]http://www.911tabs.com/link/?1574926"[/URL] target="_blank">
                "Crazy Train"</a> </td>
        </tr>
        <tr>
            <td style="width: 600px"><p>
                Get on board with one of the best metal riffs of all time - Randy Rhodes was jams
                this riff showing just how cool an Aeolian lick can sound - while your at it, <a href="[URL unfurl="true"]http://www.kolumbus.fi/kari.tammilehto/rrtone.htm"[/URL] target="_blank"> check
                out how Randy got his tone</a></p></td>
        </tr>
    </table>
    <br />
    <!-- Jam Tab -->
    <table style="width: 700px" border="1">
        <tr>
            <td rowspan="2" align="left" style="width: 10%" valign="top">
                <img src="Images/linkimages/skynard3_jpg_w300h225.jpg" width="155" height="116" ></td>
            <td style="width: 255px" align="left">
                <a id="ctl00_ContentPlaceHolder1_LinkButton1" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$LinkButton1&quot;, &quot;&quot;, false, &quot;&quot;, &quot;[URL unfurl="true"]http://www.youtube.com/watch?v=if8cZnCFmnQ&amp;feature=related&quot;,[/URL] false, true))">Simple Man YouTube lesson</a>
                and
                <a id="ctl00_ContentPlaceHolder1_LinkButton2" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$LinkButton2&quot;, &quot;&quot;, false, &quot;&quot;, &quot;[URL unfurl="true"]http://www.chordie.com/chord.pere/www.ultimate-guitar.com/print.php?what=tab&amp;id=45439&quot;,[/URL] false, true))">Simple Man chords</a></td>
        </tr>
        <tr>
            <td style="width:[COLOR=red]600px[/color]; height: 37px;" align="left"><p>
                "Play some Skynard man!!!" If your looking for a good song to jam on with a band
                then check out some Skynard and "turn it up". Shinedown covered "Simple Man". Also
                check out <a href="[URL unfurl="true"]http://www.chordie.com/chord.pere/www.ultimate-guitar.com/print.php?what=tab&id=493878"[/URL] target="_blank"> "Tuesdays Gone"</a>;
                once covered by Metallica and John Popper of Blues Traveler.</p></td>

        </tr>
    </table>
    <br />
    <!-- DIY -->
    <table style="width: 700px" border="1">
        <tr>
            <td rowspan="2" align="left" style="width: 10%" valign="top">
                <img src="Images/linkimages/diy.JPG" width="155" height="116" ></td>
            <td style="width: 255px" align="left"><a href="pedalboard.aspx" target= "_self">Make your own pedal board</a>
                </td>
        </tr>
        <tr>
            <td style="width: [COLOR=red]600px[/color]; height: 55px;" valign="top" align="left">
                <p>You can pay a lot of money on a pedal board - but all you need is an ISPOT
                power supply and about 5 bucks at a hardware store.</p></td>
        </tr>
    </table>
<br />

    <table style="width: 700px" border="1">
        <tr>
            <td rowspan="2" align="left" style="width: 10%" valign="top">
                <img src="Images/linkimages/beethoven.JPG" style="width: 155px" height="116" ></td>
            <td style="width: 255px" align="left">
                <a href="[URL unfurl="true"]http://www.theorylessons.com/modeintro.html"[/URL] target="_blank"> Check out Modes and jumpstart your&nbsp; theory</a></td>
        </tr>
        <tr>
            <td style="width: [COLOR=red]600px[/color];" align="left">
            <p>
                Have you ever messed with modes? They are the coolest thing - if you know the major
                scale (Do - Re - Mi - Fa - So - La - Ti - Do) you can do modes. Modes will unlock
                the secret on how you can make music can sound happy, sad, evil,or crazy.
                </p>
            </td>
        </tr>
    </table>

This works in FF and Explorer7

Hope this helps

Steve

 

[R7Dave]

Thank you Steve - that did it.

Thanks to everyone that replied - and also for the validator

http://validator.w3.org/check?verbose=1&uri=http://www.guitargoals.com/tabswip.aspx

Thanks
Dave

 

[LarrySteele]

Dave,

Here's a developer toolbar you can use with IE6:

http://www.microsoft.com/downloadS/...64-672D-4511-BB3E-2D5E1DB91038&displaylang=en

(I haven't used with with IE7/8).

Once installed, go to View | Explorer Bar and select IE Developer Bar. It's a great tool for outlining elements on screen, similar to what feherke suggested in his 1 Mar 09 11:23 post.

Using the developer bar, I saw that it's the p element that's causing the problems - its width is about 50% of the td element. I didn't see anything that would cause that, just saw the glaring effect.

If it was me, I'd be inclined to take out the p tags and just create a css class for the description cells. Not sure if that's the most correct method, but I would think it'd work.

HTH,
Larry