Widgets are not aligning

  • theschoolphilly


    My widgets are not aligning on my website theschoolphily.com. Do you know how to fix this issue?




    It’s because quite a few of your images inside the widget container are too big (too large of dimensions). You probably want to resize them before uploading, if possible… or, use inline css to “shrink” them down a little bit.



    What dimensions should the images be?


    Syahir Hakim


    Actually one of your widgets has an unclosed <div>, which is causing the issue. Check the widget containing the school philly radio image, or the blogtalkradio widget.



    Is this going to fix the issue on all of the widgets? The problem was occurring before we had that widget up.


    Syahir Hakim


    We might be talking about a different issue here, but there are two issues with your sidebar at the moment. Josh’s answer will fix one, and my answer will fix the other.



    Do you know how to fix the alignment issue?


    Syahir Hakim


    One thing at a time. Fix that widget with the unclosed <div> first.



    ok. Is the widget fixed?


    Syahir Hakim


    No, the Facebook widget and all the rest of the widgets below it are inside the radio widget. Check that radio widget for any unclosed <div>, and close it with </div>.



    Here is the radio widget code, can you make the change and bold where it was. Thanks

    <object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=’http://download.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0′ width=’300′ height=’250′ name=”344091″ id=”344091″><param name=”movie” value=”http://www.blogtalkradio.com/btrplayer.swf?file=http://www.blogtalkradio.com%2Ftspradio%2Fplay_list.xml%3Fitemcount%3D5&autostart=false&bufferlength=5&volume=80&corner=rounded&callback=http://www.blogtalkradio.com/flashplayercallback.aspx” /><param name=”quality” value=”high” /><param name=”wmode” value=”transparent” /><param name=”menu” value=”false” /><param name=”allowScriptAccess” value=”always” /><embed src=”http://www.blogtalkradio.com/btrplayer.swf” flashvars=”file=http://www.blogtalkradio.com%2ftspradio%2fplay_list.xml%3Fitemcount%3D5&autostart=false&shuffle=false&callback=http://www.blogtalkradio.com/FlashPlayerCallback.aspx&width=210&height=270&volume=80&corner=rounded” width=”300″ height=”250″ type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” quality=”high” wmode=”transparent” menu=”false” name=”344091″ id=”344091″ allowScriptAccess=”always”></embed></object><div style=”font-size: 10px;text-align: center; width:220px;”>


    Syahir Hakim


    Remove this code right at the end:

    <div style="font-size: 10px;text-align: center; width:220px;">



    Thank you it looks like that fixed one of the issues. Can you now help with the alignment issue.




    Thanks for helping with the first issue, can you give me some assistance on fixing the alignment issue.



    1. Okay…. first image in sidebar…

    <img width="280" height="240" alt="" src="http://www.theschoolphilly.com/wp-content/uploads/2012/10/halloween2.jpg" title="halloween" class="aligncenter size-full wp-image-27614" style="width:280px;height:240px;">

    2. For second image down…

    <img width="280" height="240" alt="" src="http://www.theschoolphilly.com/wp-content/uploads/2012/08/TSPradio2-300x263.png" title="TSPradio" class="aligncenter size-medium wp-image-24847" style="width:280px;height:240px;">

    3. Your blog talk radio…

    <object width="280" height="220" id="344091" name="344091" codebase="http://download.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"><param value="http://www.blogtalkradio.com/btrplayer.swf?file=http://www.blogtalkradio.com%2Ftspradio%2Fplay_list.xml%3Fitemcount%3D5&autostart=false&bufferlength=5&volume=80&corner=rounded&callback=http://www.blogtalkradio.com/flashplayercallback.aspx" name="movie"><param value="high" name="quality"><param value="transparent" name="wmode"><param value="false" name="menu"><param value="always" name="allowScriptAccess"><embed width="280" height="220" allowscriptaccess="always" id="344091" name="344091" menu="false" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" flashvars="file=http://www.blogtalkradio.com%2ftspradio%2fplay_list.xml%3Fitemcount%3D5&autostart=false&shuffle=false&callback=http://www.blogtalkradio.com/FlashPlayerCallback.aspx&width=210&height=270&volume=80&corner=rounded" src="http://www.blogtalkradio.com/btrplayer.swf"></object>

    4. To fix your facebook width… you need to add this to your custom css:

    #LikeboxPluginPagelet {
    width: 280px !important;

    5. For your “Indigo” image… you need to change the width in the <object> tag from 300 px… to 280px.

    6. The next one is blank… so the code is improper and not loading correctly.

    7. For “Drinkers Philly”…

    <img width="280" height="250" class="aligncenter size-full wp-image-22202" title="CB_ad_300x250_phils" alt="" src="http://www.theschoolphilly.com/wp-content/uploads/2012/05/CB_ad_300x250_phils.jpg">

    8. The “Lions Den”…

    <img width="280" height="250" alt="" src="http://www.theschoolphilly.com/wp-content/uploads/2012/03/LionsDen-1.jpg" title="LionsDen-1" class="aligncenter size-full wp-image-19599">

    9. The “Basketball League”…

    <img width="280" height="400" class="aligncenter size-full wp-image-19800" title="PMBL AD-1" alt="" src="http://www.theschoolphilly.com/wp-content/uploads/2012/03/PMBL-AD-1.jpg">

    10. “State Shades”…

    <img width="280" height="251" alt="" src="http://www.theschoolphilly.com/wp-content/uploads/2012/05/Screen-Shot-2012-05-13-at-9.04.32-PM.png" title="Screen Shot 2012-05-13 at 9.04.32 PM" class="aligncenter size-full wp-image-22149">

    11. The “School Philly”…

    <img width="280" height="250" class="aligncenter size-full wp-image-19916" title="Picture 1" alt="" src="http://www.theschoolphilly.com/wp-content/uploads/2012/03/Picture-1.png">

    NOTE: See how I changed every instance of width from 300px… to 280px.

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.