Problem styling Twitter Widget in sidebar

[theplastickid]

Hi,

I am attempting to put a basic twitter widget in the sidebar of a site Im making but it is not displaying properly at all.

It looks like it is not actually generating the twitter update although when I disable all CSS styles the update is being generated.

This is my markup copy and pasted exactally as twitter has generated:

Quote:

<div id="sidebar_b">

<h3>Twitter</h3>

<div id="twitter_div">
<ul id="twitter_update_list"></ul>
<li></li>
<a href="http://twitter.com/HipHopKaraokeSX&quot; id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script&gt;
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/HipHopKaraokeSX.json?callback=twitterCallback2&amp;count=1"></script&gt;

and this is how it is displaying…

[img]http://img30.imageshack.us/img30/7974/twitterproblem.jpg[/img]

If my CSS styles are disabled I get this:

[img]http://img22.imageshack.us/img22/4018/twitterproblem2.jpg[/img]

I am running other java script on the page in the head of my document to create a lightbox effect. I don’t know if this would effect the feed or not??

Appreciate any help,
Thanks.

Also….

I have placed the code in a plan empty html doc and styles with CSS and it worked fine… So I can see what is causing the problem here.

Could it be the other javascript? Or the fact that my home page is a .php file?

[Rich]

I have done the same thing and here is the css that I used. I used the same code from twitter as you did. The styles from this will not be the same as you need, but you can change the font sizes and things to suit.

Code:

#twitter_div{
width:300px;
background-color: #333333;
float: right;
padding: 7px;
margin-left: 10px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 2px solid #cccccc;
overflow: inherit;
}
#twitter_div h2{
font-family: helvetica, arial, sans-serif;
font-size: 17pt;
color: #ff9900;
}
#twitter_div a{
font-family: helvetica, arial, sans-serif;
font-size: 11pt;
color: #ffffff;
text-decoration: none;
}
#twitter_div a:hover{
font-family: helvetica, arial, sans-serif;
font-size: 11pt;
color: #ff9900;
text-decoration: none;
}
#twitter_div ul{
list-style: none;
}
#twitter_div ul li{
font-family: helvetica, arial, sans-serif;
font-size: 13px;
text-decoration: none;
color: white;
padding: 5px 5px 5px 5px;
background-color: #990000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-bottom: 7px;
}
#twitter_div ul li a{
font-family: helvetica, arial, sans-serif;
font-size: 13px;
text-decoration: none;
color: #c1a574;
}
#twitter_div ul li a:hover{
font-family: helvetica, arial, sans-serif;
font-size: 13px;
text-decoration: underline;
color: black;
}

This code covers the div styling itself, the ‘follow me’ link at the bottom, links in the tweets, the tweet text and background, and the header of the box containing everything.

I have found that sometimes, when I tweet long links, it spills over the side of the box. I’m pretty sure if you take away the width of the ‘twitter_div’ and give the sidebar div a fixed width, that links will automatically break to the next line if they need to.

As for running other javascript in the header, I’m not sure. On my site it did not affect the tweets at all, but you could try putting the other javascript in a separate file and linking to that, if my css has no effect. Having the homepage as a .php file should also not affect it, because I use this in wordpress and it works fine.

I hope this helps,

-Rich

My Youtube Channel: http://www.youtube.com/irichiepoo

[Author]

Posts