Inheritance problem with plugin css
-
I’m trying to get a Twitter plugin to work on my sidebar. The plugin works but the problem is the CSS. The link in each twitter post inherits the CSS from that of the rest of the sidebar. I can’t seem to figure out what I need to do to force it to use something else.
Here is what the CSS being inherited looks like:
#sidebar li{ list-style: none; } #sidebar ul li a { border-bottom: 1px dotted #666; color: #cc99ff; display: block; text-decoration: none !important; margin-left: 0px; padding: 4px 0px 4px 25px; background-image: url('images/bull.gif'); background-repeat: no-repeat; background-position: 10px 50%; font-size: 13px; } #sidebar ul li a:hover{ color: #cc99ff; background-color: #eeeeee; }That puts a dotted underline under each link with a arrow to the left and a grey highlight with mouseover. I like these effects for the rest of the stuff in my sidebar and don’t want to change it.
The problem with the twitter plugins is that the link is effected. Here is what the html looks like that is generated by the plugin:
<div id="twitt"><ul> <li><span class="mytwitter_tweet" id="mytwitter_tweet-1">I have a headache <i><a href="http://example.com">link</a></i></span><span class="mytwitter_separator" id="mytwitter_separator-1"> -- </span><span class="mytwitter_tweet_time" id="mytwitter_tweet_time-1">9 hours ago</span></li> <li><span class="mytwitter_tweet" id="mytwitter_tweet-2">Doing some blogging today <i><a href="http://tinyurl.com/example">link</a></i></span><span class="mytwitter_separator" id="mytwitter_separator-2"> -- </span><span class="mytwitter_tweet_time" id="mytwitter_tweet_time-2">2 days ago</span></li> <li><span class="mytwitter_tweet" id="mytwitter_tweet-3">Just began my tumblr <i><a href="http://self-composed.tumblr.com/">link</a></i></span><span class="mytwitter_separator" id="mytwitter_separator-3"> -- </span><span class="mytwitter_tweet_time" id="mytwitter_tweet_time-3">2 days ago</span></li> <li><span class="mytwitter_tweet" id="mytwitter_tweet-4">Were going to look at puzzles(?). <i><a href="http://tinyurl.com/example">link</a></i></span><span class="mytwitter_separator" id="mytwitter_separator-4"> -- </span><span class="mytwitter_tweet_time" id="mytwitter_tweet_time-4">4 days ago</span></li> </ul></div>I’ve tried things like declaring border-bottom: none; for the class. I can add other borders to the top or sides, but I can’t change the bottom one.
I also want to the link to be inline with the rest of each tweet/post/li not on a seperate line.
Also, with the plugin I’m currently using (MyTwitter) I can make the li and ul tags have anything in them I want or change them altogether to something else.
The topic ‘Inheritance problem with plugin css’ is closed to new replies.