Imajica wrote:any idea why or is there a way around it?
Depending on how you use the HTML nugget (CK Editor?), it might just be stripped. Also, this is a
way to unspecific selector anyway – with that CSS, you would target
any ul on your site, and I assume you only want to target the one in the HTML nugget, right? <style> elements are
not local to the HTML nugget or something. Also, using inline <style> elements is a relic from the past, we don't really do that anymore.
So, where to put CSS now? Well, s9y has a nifty solution for that. You can create a file called user.css in your theme's directory, i.e. /templates/YOUR_THEME/user.css, and it will be automagically included in your site. And since you created it, it's not part of the s9y core and thus safe in case of an update.
As I said, using ul in your inline styles would usually target all ul elements on your site, so you'll (probably) want to be more specific and limit those to the HTML nugget or all HTML nuggets. To target all ul elements in HTML nuggets, you could use
Code: Select all
.serendipity_plugin_html_nugget ul {
/* Here be dragons */
}
But you might just want to target that one particular ul in that one particular nugget. Well, since you control the markup of said ul, you can just give that ul a specific thingy that we call a class.
Code: Select all
<ul class="my-nugget-list">
<li><a href="https://www.facebook.com/myfavoritepinups/" target="_blank"><img src="http://www.myfavoritepinups.com/img/facebook.gif" class="my-nugget-image" /></a></li>
<li><a href="http://twitter.com/#!/MyFavePinups" target="_blank"><img src="http://www.myfavoritepinups.com/img/logo_wordmark.png" class="my-nugget-image" /></a></li>
<li><a href="http://www.myfavoritepinups.com/feeds/index.rss2"><img src="http://www.myfavoritepinups.com/img/rss.png" /></a></li>
<li><a href="http://www.myfavoritepinups.com/pages/friends.html"><img src="http://www.myfavoritepinups.com/img/friends.png" /></a></li>
<li><a href="http://www.myfavoritepinups.com/pages/contactform.html"><img src="http://www.myfavoritepinups.com/img/contact.png" /></a></li>
</ul>
Note that I have already omitted the inline styles you used here and instead assigned classes. Now, you can put all your CSS in the user.css (also, remove the <style> element from your HTML nugget):
Code: Select all
.my-nugget-list {
list-style: none;
margin: 0;
padding: 20px;
overflow: hidden;
background-image: url("http://www.myfavoritepinups.com/img/img12.gif");
background-repeat: repeat-y;
}
.my-nugget-image {
width: 82px;
}
Also note that I added a unit (px) to the padding there – I'm not sure if you meant px, but the padding value needs to have a unit (px, em, rem or %). That might also be why your CSS was not applied.
If you wanted to address just one element in your whole site, you can also assign it an id, which must be a site-wide unique identifier, i.e.
Code: Select all
<ul id="my-ul" class="my-nugget-list">
…
</ul>
YL