[basilrath]

Just as little addon i decided to add an "iphone4" scroller which looks as follows

http://www.tabletennistalk.co.uk/forum/forum.php

Obviously forum blocked and i have a little issue but have temporarily got around it but looks not as nice as one would like

the code within the forum block is :

PHP Code:

<style type="text/css"> 
#marquee{
position: relative;
z-index: 600;
top: -28.50em;
left: -7.00px;
clear: both;
}
#flv-scroller{
position: relative;
left: 25.95px;
}
#iphone{
position: relative;
z-index: 600;
top: 15.00px;
left: -10.00px;
}
</style> 

<div id="iphone">
<img src="/image/iphone-ttt.png" width="260">
</div>


<div id="marquee">
<marquee width="240px" height="290px"  direction="up" scrolldelay="2" scrollamount="1.5" onmouseover="this.stop()" onmouseout="this.start()">

<div id ="flv-scroller">
<iframe title="YouTube video player" width="205" height="150" src="http://www.youtube.com/embed/wLfJ2ut1-zc" frameborder="0" allowfullscreen></iframe>
</div>
<br />

<font face="arial narrow" size="2"><ul>
<font color="#ffffff">Table Tennis Talk Live Stream 1 & 2 are active on site and open to view many matches. Check them out -</font> <a href="/forum/ttt-stream.php"><font color="#ff0000">Stream 1</font></a><a href="/forum/ttt-stream2.php"><font color="#ff0000"> Stream 2</font></a>

<br /><br /><br />

<a href="http://www.ittf.com/competitions/competitions2.asp?Competition_ID=2020&category=VWcup"target=_blank><font color="#ff0000">Volkswagen Cup 2011: <a href="/forum/ttt-stream.php">Stream 1</font><br /><font color="#ffffff">Guangzhou, Guangzhou CHN, Mar 23 - Mar 24, 2011</a></font>
<br />
<font color="#ff0000">**COMPLETED MATCHES AVAILABLE NOW TO WATCH**</font>

<br /><br /><br />

<a href="http://www.ittf.com/competitions/competitions2.asp?Competition_ID=2019&category=pt"target=_blank><font color="#ff0000">Spanish Open 2011: <a href="/forum/ttt-stream.php">Stream 1</font><br /><font color="#ffffff">ITTF Pro Tour, Almeria, ESP, Apr 6 - Apr 10, 2011</a></font>
<br />
<font color="#ff0000">**Full Livestream schedule for this event:<a href="http://www.ittf.com/Protour_new/pdf/2011ESP/TVScheduleESP.pdf"target=_blank"> HERE</a>**</font>

<br /><br /><br />

<a href="http://www.ittf.com/competitions/competitions2.asp?Competition_ID=1962&category=WTTC"target=_blank><font color="#ff0000">World Table Tennis Championsips 2011: <a href="/forum/ttt-stream.php">Stream 1</font><br /><font color="#ffffff">World Table Tennis Championships, Rotterdam, NED, May 8 - May 15</a></font>
<br />
<font color="#ff0000">**Full Livestream schedule for this event: TBA</a>**</font>
<br /><br />
<center>
<img src="/image/wttc-img.gif" width="204">
</center>
<br /><br /><br />

<font color="#ffffff" size="1"><i>Full list of scheduled livestream on TTT <a href="/forum/content.php?443-ITTF-Events"target=_blank"> <font color="#ff0000">HERE</a></i></font>

<br /><br />
</ul>
</marquee>
</div> 


The template rendering is the normal block_html

PHP Code:

<li>
    <div class="block smaller">
        <div class="blocksubhead">
            <a class="collapse" id="collapse_block_html_{vb:raw blockinfo.blockid}" href="{vb:raw relpath}#top"><img alt="" src="{vb:stylevar imgdir_button}/collapse_40b.png" id="collapseimg_html_{vb:raw blockinfo.blockid}"/></a>
            <span class="blocktitle">{vb:raw blockinfo.title}</span>
        </div>
        <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockbody restore">
            {vb:raw content}
        </div>
        </div>
    </div>
    <div class="underblock"></div>
</li> 


The problem is when you use the above code you get




When you use

PHP Code:

<li>
    <div class="block smaller">
        <div class="blocksubhead">
            <a class="collapse" id="collapse_block_html_{vb:raw blockinfo.blockid}" href="{vb:raw relpath}#top"><img alt="" src="{vb:stylevar imgdir_button}/collapse_40b.png" id="collapseimg_html_{vb:raw blockinfo.blockid}"/></a>

            <span class="blocktitle">{vb:raw blockinfo.title}</span>
        
        

        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockbody restore">

            {vb:raw content}
        
    </div>
    <div class="underblock"></div>
</li> 


It renders as it is now in the link which looks ok but isnt as you would like

As soon as you add a </div> it looks fine block wise but extends in depth below image?

Any ideas appreciated as other than that i sorta like how its turned out